0%

Github 添加一个实时显示StackOverflow分数Reputation的徽章

我們采用XPath强行解析StackOverflow用户主页的HTML节点来获取用户的Reputation数字。
Shields.io提供了后端XPath解析网络上XML内容并输出到徽章的接口:

1
https://img.shields.io/badge/dynamic/xml?url=<URL>&label=<LABEL>&query=<//data/subdata>&color=<COLOR>&prefix=<PREFIX>&suffix=<SUFFIX>

经过反复调试,最终找出了获取StackOverflow用户的分数Reputation的XPath:/html/body//div[@class='grid--cell fs-title fc-dark']。将这个XPath拼接到Shields.io的URL里面,就可以获取指定用户的分数了。

这段URL可以根据需要使用指定的样式来显示需要的内容。

1
https://img.shields.io/badge/dynamic/xml?label=StackOverflow%20%28Inactive%29&query=%2Fhtml%2Fbody%2F%2Fdiv%5B%40class%3D%27grid--cell%20fs-title%20fc-dark%27%5D&url=改成StackOverflow用户主页的网址注意转义一次&longCache=true&style=选择显示的样式&suffix=改成数字后面需要显示的后缀&logo=stackoverflow&labelColor=改成左侧背景的颜色&logoColor=改成LOGO图案的颜色&color=改成右侧背景的颜色

可以选择的样式有:plastic, flat, flat-square, for-the-badge, social

用MarkDown表示出来就是

1
[![](https://img.shields.io/badge/dynamic/xml?label=StackOverflow%20%28Inactive%29&query=%2Fhtml%2Fbody%2F%2Fdiv%5B%40class%3D%27grid--cell%20fs-title%20fc-dark%27%5D&url=改成StackOverflow用户主页的网址注意转义一次&longCache=true&style=选择显示的样式&suffix=改成数字后面需要显示的后缀&logo=stackoverflow&labelColor=改成左侧背景的颜色&logoColor=改成LOGO图案的颜色&color=改成右侧背景的颜色)](要链接的StackOverflow用户主页的地址)

例如,本示例的写法是

1
[![](https://img.shields.io/badge/dynamic/xml?label=StackOverflow%20%28Inactive%29&query=%2Fhtml%2Fbody%2F%2Fdiv%5B%40class%3D%27grid--cell%20fs-title%20fc-dark%27%5D&url=https%3A%2F%2Fstackoverflow.com%2Fusers%2F14547429%2Fno-5972&longCache=true&style=flat-square&suffix=%20Reputations&logo=stackoverflow&labelColor=f48024&logoColor=white&color=F7A05B)](https://stackoverflow.com/users/14547429/no-5972)

写到Github Profile的效果如图所示。
在这里插入图片描述

类似的,其他不能使用JSON方式获取数字的平台也可以通过这种XPath的方式来读取用户或项目主页的DOM节点来获取需要显示的动态内容。这里就不再赘述了。

Buy me a coffee
No.5972 Alipay

Alipay

隐藏
推进创文常态化 共建文明襄阳城 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 做文明襄阳人 建文明襄阳城 凝聚文明正能量 筑梦千年古襄阳 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 创建全国文明城市 加快建设汉江流域中心城市 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 讲文明 树新风 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 用微笑融化陌生 用文明美化襄阳 · 🄽🄾5️⃣9️⃣7️⃣2️⃣ · 争当文明使者 播撒文明新风