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

Question

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

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

现在，我做了一些研究，似乎我能够使用 Stack Exchange API to attain my Stack Overflow account information in JSON format via an endpoint URL. Furthermore, Shield.io's API 将允许我从端点 URL 创建徽章，这是完美的。但是，Shields.io 要求端点采用特定的 JSON 格式。

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

我正在努力实现的一个例子（但不是提交而是我的 Stack Overflow 声誉）：

Answer 1

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

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

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

现在我们有了 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=Whosebug";
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": "Whosebug REPUTATION",
            "message": "API ERROR",
            "color": "FF0000",
            "labelColor": "black",
            "style": "for-the-badge"
        }
    }
    return {
        "schemaVersion": 1,
        "label": "Whosebug REPUTATION",
        "message": reputation,
        "color": "FE7A16",
        "labelColor": "black",
        "style": "for-the-badge"
    }
})

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

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

现在，剩下的就是转到 shields.io 的 JSON 端点徽章页面 here 并粘贴 url 如下：

除了复制徽章url选项，您还可以选择复制markdown版本，复制它并将其粘贴到您的 GitHub 配置文件 README.

降价结果：

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

Answer 2

另一个简单的解决方案是使用 Stack Exchange 中内置的 flair feature：

Edit your profile
点击边栏中的“Flair”：
复制该页面上显示的 HTML 并将其粘贴到您的 README.md

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

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

Answer 3

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

现在，转到 shields.io 聊天徽章 here 并将您的 url 粘贴到查询部分

在查询部分，您只需粘贴 users/ 之后的部分，例如：

This is a complete url:
/2.2/users/2096394?order=desc&sort=reputation&site=Whosebug
you only need this part:
2096394?order=desc&sort=reputation&site=Whosebug

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

Answer 4

有https://shields.io/

很遗憾，无法正常工作。

所以我分叉并克隆了 shield 存储库。当我运行在本地工作时。所以这意味着 Whosebug API 可能有配额或者正在将 shield IO ip 地址列入黑名单。

你可以做的是 fork 这个项目并自己托管它（你可以使用 heroku 之类的东西）。

Answer 5

~~对我来说Shields.io's StackExchange reputation endpoint is working fine. Here is an example:~~ It breaks sometimes. Probable Reason.

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

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

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

用你想要的任何东西代替 <user_name>，但用你的 Whosebug 用户 ID 替换上面的 <user_id>。您可以通过访问您的 profile 并查看个人资料 URL 来获取它。它的形式是：https://whosebug.com/users/<user_id>/<user_name>

以上徽章中的colors/text/logo可以根据需要自定义。

Answer 6

@Chris 的解决方案是唯一在回答这个问题时似乎有效的解决方案。鉴于此，如果您从 Whosebug Flair 部分获得的 Flair 看起来不太好，您可以按如下方式手动设置声誉，

<!-- Add your profile URL below-->
<a href="https://whosebug.com/users/10883380/visal-rajapakse">
    <img src="https://img.shields.io/badge/Stack%20Overflow-802-F47F24">
                                                        <!-- ^ Change this to your reputation -->
</a>

上面看起来像：

Answer 7

https://github.com/lowlighter/metrics 可以生成包含 SO 小部件的 SVG，并且 SVG 可以包含在 GitHub 配置文件中 README.md。它有多种样式，SO 插件有多种配置选项，但没有一种接近屏蔽布局。

幸运的是，它可以生成许多其他格式，包括原始格式 JSON，其他工具可以使用它来渲染盾牌布局。

要创建盾牌，我们可以使用它的 markdown 格式，并提供模板 markdown 文件。

结合@Visal-rajapakse 的回答，我在 TEMPLATE.md 中使用了以下降价：

<a href="https://whosebug.com/users/{{ plugins.Whosebug.user.id }}">
    <img src="https://img.shields.io/badge/Reputation-{{ plugins.Whosebug.user.reputation }}-F47F24?logo=Whosebug&style=flat-square" alt="Whosebug">
</a>

要激活它，请在您的“特殊”用户名回购中创建一个 GitHub 操作到该模板上的运行 lowlighters 指标工具以生成 README.md

这是我的 GitHub 动作。用您的 Github 用户名和 SO 用户 ID 替换 'jayvdb' 和“5037965”：

name: Metrics
on:
  # Schedule updates (once per day)
  schedule: [{cron: "0 1 * * *"}]
  # Lines below let you run workflow manually and on each commit (optional)
  workflow_dispatch:
  push: {branches: ["master", "main"]}

jobs:
  readme-template:
    name: Generate README
    runs-on: ubuntu-latest
    steps:
      - name: Update README.md
        uses: lowlighter/metrics@main
        with:
          # Common config
          user: jayvdb
          token: ${{ secrets.METRICS_TOKEN }}
          output_action: skip-if-only-metadata-changed
          committer_branch: main
          committer_message: Update ${filename} - [GitHub Action]
          config_timezone: Etc/UTC

          # Input file
          markdown: https://raw.githubusercontent.com/jayvdb/jayvdb/main/TEMPLATE.md

          # Output file
          template: markdown
          filename: README.md
          config_output: markdown

          plugin_Whosebug: yes
          plugin_Whosebug_user: 5037965
          plugin_Whosebug_sections: answers-top, answers-recent
          plugin_Whosebug_limit: 3
          plugin_Whosebug_lines: 0

如果您只想要一个 SO 小部件，还有一些其他自述文件 widgets/generators 具有各种内置布局，但其中 none 当前支持屏蔽布局。它们更易于使用，作者可能愿意添加屏蔽布局。

https://github.com/omidnikrah/github-readme-Whosebug provides two layouts currently, and I've added an issue添加屏蔽布局
https://github.com/johannchopin/Whosebug-readme-profile 提供两种布局。
https://github.com/harish-sethuraman/readme-components/blob/master/docs/WhosebugCard.md（这个类似于 SO 'Flair'，但具有更好的用户体验）

Answer 8

要获得 Whosebug 作为实时徽章的声誉，只需替换我的用户 用户 ID name 和你的一样！！

<a href="https://whosebug.com/users/10249156/wasitshafi" target="_blank">
<img alt="Whosebug"
src="https://Whosebug-badge.vercel.app/?userID=10249156" />
</a>

结果

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

How do I add my Stack Overflow reputation as a live badge on GitHub?

markdown

github

badge

shields.io