如何在GitHub上添加我的Stack Overflow信誉作为实时徽章?

问题描述

我试图在我的GitHub个人资料README上添加我的Stack Overflow信誉作为实时徽章。

首先,我需要使用某种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似乎可以做到这一点。

我要实现的目标的一个示例(但不是提交而是它的堆栈溢出信誉):

enter image description here

解决方法

首先使用堆栈交换的 user API here,您可以通过端点url获得JSON格式的堆栈溢出帐户信息。您要做的就是在id字段中指定堆栈溢出用户ID,然后单击 run 生成端点路径。您可以通过单击个人资料图片来获取堆栈溢出用户ID,然后该ID将出现在搜索栏中。

enter image description here

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

我的堆栈交换端点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,"message": reputation,"color": "FE7A16","style": "for-the-badge"
    }
})

发布后,单击RunKit页面顶部的终结点超链接,以查看要传递给屏蔽以创建徽章的终结点URL。

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

现在,剩下的就是去shields.io的JSON端点徽章页面here并粘贴如下网址:

enter image description here

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

降价结果:

Custom badge

注意:您可以通过更改RunKit代码中的JSON return语句或在JSON端点标志页面中覆盖要更改的内容来更改标志的设计。您可以更改的属性在同一页面上列出。

,

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

  1. Edit your profile

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

    Screenshot of sidebar menu with Flair selected

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

默认情况下,精美图片如下所示:

profile for Chris at Stack Overflow,Q&A for professional and enthusiast programmers

个性页面上有一些选项可用于更改主题以及仅显示来自一个站点的数据(例如Stack Overflow)或包括您拥有200分以上的所有Stack Exchange网站的信誉。

,

其他解决方案, 首先使用堆栈交换的用户API here,您要做的就是在id字段中指定堆栈溢出用户ID,然后单击运行以生成端点路径。您可以通过单击个人资料图片来获取堆栈溢出用户ID,然后该ID将出现在搜索栏中。

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

enter image description here

在查询部分,您只需要粘贴用户/之后的部分,例如:

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

这样,您就可以使徽章正确工作。

,

https://shields.io/

不幸的是无法正常工作。

所以我分叉并克隆了 shield 存储库。当我在本地运行时,它起作用了。 所以这意味着 StackOverflow API 可能有配额或将屏蔽 IO ip 地址列入黑名单。

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

,

对我来说,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&cacheSeconds=86400)](https://stackoverflow.com/users/<user_id> "<user_name>'s Stack Overflow Reputation")

将您想要的任何内容替换为 <user_name>,但将上面的 <user_id> 替换为您的 StackOverflow 用户 ID。您可以通过访问您的 profile 并查看个人资料 URL 来获取它。它的格式为:https://stackoverflow.com/users/<user_id>/<user_name>

Brc-dd's Stack Overflow Reputation

如果您愿意,您可以自定义上述徽章中的颜色/文字/徽标。另外,我已经传递了 cacheSeconds 参数 1 天。如果有人多次访问您的个人资料,这样做可以加快速度,并防止对 Shield 的服务器(以及最终对 SO)的某些调用。 ;)