如何将我的 Stack Overflow 声誉添加为 GitHub 上的实时徽章？

Question

我正在尝试将我的 Stack Overflow 声誉作为实时徽章添加到我的 GitHub 个人资料自述文件中。

首先，我需要使用一些 API 从 Stack Overflow 以某种方式获取我的帐户信息。接下来，我需要提取声誉，然后将其传递给另一个在 Markdown 中创建徽章的 API。

现在，我做了一些研究，似乎我可以使用 Stack Exchange API通过端点 URL 以 JSON 格式获取我的 Stack Overflow 帐户信息。此外，Shield.io 的API将允许我从完美的端点 URL 创建徽章。但是，Shields.io 要求端点采用特定的 JSON 格式。

所以现在要解决这个难题，我需要第三个 API，它能够从 Stack Exchange API 读取和解析 JSON，然后以所需的 JSON 格式托管端点 URL。RunKit 的API似乎能够做到这一点。

我试图实现的一个例子（但不是提交，而是我的 Stack Overflow 声誉）：

Answer 1

另一个简单的解决方案是使用Stack Exchange 内置的天赋功能：

1. 编辑您的个人资料

2. 点击侧边栏中的“Flair”：

   

3. 复制该页面上显示的 HTML 并将其粘贴到您的 README.md

默认情况下，fair 图像如下所示：

天赋页面上有一些选项可以更改主题以及显示来自一个站点（例如 Stack Overflow）的数据或包括来自所有 Stack Exchange 站点的声誉，其中您拥有 200 分以上。

Answer 2

要获得 StackOverflow 作为实时徽章的声誉，只需将我的用户ID 和名称替换为您的用户 ID 和名称即可！

<a href="/sf/users/717440951/" target="_blank">
<img alt="StackOverflow"
src="https://stackoverflow-badge.vercel.app/?userID=10249156" />
</a>

结果

Answer 3

首先在此处使用堆栈交换的用户api ，您可以通过端点 url 以 JSON 格式获取堆栈溢出帐户信息。您所要做的就是在 id 字段中指定您的堆栈溢出用户 ID，然后单击运行以生成端点路径。您可以通过单击您的个人资料图片来获取堆栈溢出用户 ID，然后它会出现在搜索栏中。

将生成的路径附加到https://api.stackexchange.com以形成端点 url。

我的堆栈交换端点网址：https : //api.stackexchange.com/2.2/users/9133459? order = desc & sort = reputation & site =stackoverflow

现在我们有了 JSON 格式的堆栈溢出信息，我们可以继续解析它并创建一个满足屏蔽要求的新端点。为此，您必须使用RunKit创建一个帐户。在 RunKit 上发布这段代码，并确保节点版本为 v4.9.1（将代码中的 url 替换为您之前生成的自己的端点 url）：

// variables
var endpoint = require("@runkit/runkit/json-endpoint/1.0.0");
var fetch = require("node-fetch");
var url = "https://api.stackexchange.com/2.2/users/9133459?order=desc&sort=reputation&site=stackoverflow";
let settings = { method: "Get" };  

// main function
endpoint(module.exports, async function()
{
    try {
       await fetch(url, settings)
            .then(res => res.json())
            .then((json) => {
                reputation = json["items"][0].reputation;
                if (reputation >= 1000) {
                    reputation = reputation / 1000;
                    reputation = Math.floor(reputation * 10) / 10;
                    // if first decimal place is 0
                    if ((reputation * 10) % 10 == 0) {
                        // round to int
                        reputation = Math.round(reputation);
                    }
                    reputation = reputation.toString();
                    reputation += "K";
                }
        });    
    } catch(e) {
        return {
            "schemaVersion": 1,
            "label": "STACKOVERFLOW REPUTATION",
            "message": "API ERROR",
            "color": "FF0000",
            "labelColor": "black",
            "style": "for-the-badge"
        }
    }
    return {
        "schemaVersion": 1,
        "label": "STACKOVERFLOW REPUTATION",
        "message": reputation,
        "color": "FE7A16",
        "labelColor": "black",
        "style": "for-the-badge"
    }
})

发布后，单击 RunKit 页面顶部的端点超链接以查看您将传递给 shields 以创建徽章的端点 url。

这是我的 runkit 端点 url：https ://stack-overflow-reputation-ciqil1ej93hq.runkit.sh

现在，所有剩下的就是去shields.io的JSON端点徽章页面这里并粘贴网址为这样的：

除了复制徽章 url选项外，您还可以选择复制 Markdown版本，将其复制并粘贴到您的 GitHub 个人资料README 中。

降价结果：

注意：您可以通过更改 RunKit 代码中的 JSON 返回语句或覆盖 JSON 端点徽章页面中要更改的内容来更改徽章的设计。您可以更改的属性列在同一页面上。

Answer 4

这不再起作用了......其他解决方案，首先在这里使用堆栈交换的用户API ，您所要做的就是在id字段中指定您的堆栈溢出用户ID，然后单击运行以生成端点路径。您可以通过单击您的个人资料图片来获取堆栈溢出用户 ID，然后它会出现在搜索栏中。

现在，去shields.io通讯徽章这里并粘贴在查询部分您的网址

在查询部分中，您必须仅粘贴 users/ 之后的部分，例如：

这是一个完整的网址：
/2.2/users/2096394 ?order=desc&sort=reputation&site=stackoverflow
你只需要这部分：
2096394?order=desc&sort=reputation&site=stackoverflow

这样你就可以让你的徽章正常工作。

Answer 5

对我来说Shields.io的 StackExchange 信誉端点工作正常。这是一个例子：

有时它会破裂。可能的原因。（固定的）

![](https://img.shields.io/stackexchange/stackoverflow/r/<user_id>?color=orange&label=reputation&logo=stackoverflow&style=for-the-badge&cacheSeconds=86400)

<!-- hyperlinked with alt text and title: -->

[![<user_name>'s Stack Overflow Reputation](https://img.shields.io/stackexchange/stackoverflow/r/<user_id>?color=orange&label=reputation&logo=stackoverflow&style=for-the-badge)](https://stackoverflow.com/users/<user_id> "<user_name>'s Stack Overflow Reputation")

将您想要的内容替换为<user_name>，但将<user_id>上面的 替换为您的StackOverflow用户 ID。您可以通过访问您的个人资料并检查个人资料 URL来获取它。它的形式如下：https://stackoverflow.com/users/<user_id>/<user_name>

如果您愿意，您可以自定义上述徽章中的颜色/文本/徽标。