我正在尝试将我的 Stack Overflow 声誉添加为我的 GitHub 个人资料 README 中的实时徽章。
首先，我需要使用一些 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 声誉）：
首先在这里使用堆栈交换的用户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 端点网址：https ://stack-overflow-reputation-ciqil1ej93hq.runkit.sh
现在，剩下的就是转到 shields.io 的 JSON 端点徽章页面并粘贴 url，如下所示：
除了复制徽章 url选项外，您还可以选择复制 markdown版本，将其复制并粘贴到您的 GitHub 配置文件README中。
降价结果：
注意：您可以通过更改 RunKit 代码中的 JSON 返回语句或覆盖您要在 JSON 端点徽章页面中更改的内容来更改徽章的设计。您可以更改的属性列在同一页面上。
这已经不起作用了......其他解决方案，首先 在这里使用堆栈交换的用户API ，您所要做的就是在id字段中指定您的堆栈溢出用户ID，然后单击运行以生成端点路径。您可以通过单击您的个人资料图片来获得您的堆栈溢出用户 ID，然后它将出现在搜索栏中。
现在，在此处访问 shields.io 聊天徽章并将您的网址粘贴到查询部分
在查询部分中，您必须仅粘贴 users/ 之后的部分，例如：
这是一个完整的网址：
/2.2/users/2096394 ?order=desc&sort=reputation&site=stackoverflow
你只需要这部分：
2096394?order=desc&sort=reputation&site=stackoverflow
这样你就可以让你的徽章正常工作。
@Chris 的解决方案是唯一在回答这个问题时似乎有效的解决方案。鉴于此，如果您从 StackOverflow Flair 部分获得的 Flair 看起来不是那么好，您可以手动设置声誉，如下所示，
<!-- Add your profile URL below-->
<a href="https://stackoverflow.com/users/10883380/visal-rajapakse">
<img src="https://img.shields.io/badge/Stack%20Overflow-802-F47F24">
<!-- ^ Change this to your reputation -->
</a>
上面看起来像：
不幸的是不工作。
所以我分叉并克隆了屏蔽存储库。当我在本地运行时，它起作用了。所以这意味着 StackOverflow API 可能有配额或将屏蔽 IO ip 地址列入黑名单。
你可以做的是分叉这个项目并自己托管它（你可以使用像heroku这样的东西）。
对我来说Shields.io的 StackExchange 信誉端点运行良好。这是一个例子：它有时会破裂。可能的原因。
<!-- hyperlinked with alt text and title: -->
[](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>
如果您愿意，您可以自定义上述徽章中的颜色/文本/徽标。
https://github.com/lowlighter/metrics可以生成包含 SO 小部件的 SVG，并且 SVG 可以包含在 GitHub 配置文件 README.md 中。它有多种风格，SO 插件有多种配置选项，但没有什么能比得上盾牌布局。
幸运的是，它可以生成许多其他格式，包括可以被其他工具用来渲染屏蔽布局的原始 JSON。
要创建屏蔽，我们可以使用它的降价格式，并提供一个模板降价文件。
结合@Visal-rajapakse 的回答，我在我的TEMPLATE.md:
<a href="https://stackoverflow.com/users/{{ plugins.stackoverflow.user.id }}">
<img src="https://img.shields.io/badge/Reputation-{{ plugins.stackoverflow.user.reputation }}-F47F24?logo=stackoverflow&style=flat-square" alt="StackOverflow">
</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_stackoverflow: yes
plugin_stackoverflow_user: 5037965
plugin_stackoverflow_sections: answers-top, answers-recent
plugin_stackoverflow_limit: 3
plugin_stackoverflow_lines: 0
如果您只想要一个 SO 小部件，还有其他一些具有各种内置布局的自述小部件/生成器，但目前它们都不支持屏蔽布局。它们更易于使用，作者可能愿意添加屏蔽布局。
要获得 StackOverflow 作为实时徽章的声誉，只需将我的用户用户 ID 和名称替换为您的！
<a href="https://stackoverflow.com/users/10249156/wasitshafi" target="_blank">
<img alt="StackOverflow"
src="https://stackoverflow-badge.vercel.app/?userID=10249156" />
</a>
结果
