如何定制动态数据小牌子?

有时候在逛 GitHub 或者网站的时候,会发现在主页有许多小牌子,很是好看(个人观点)

对于半个程序员的阿斌来说,F12 走起,经过一番奋斗,终于找到了几个可以做小牌牌的网站

这些小牌子不仅作为程序员的标识符,还能用于展示个人热度的小标志,小巧且美观

下面就跟阿斌来学习怎样定制吧!

Shields.io

Shields.io 说起,这个网站应该是使用最多的,大部分小牌子都是这个网站生成的

它可以生成的样式有静态文字的、动态文字的、还有带图标和风格的小牌子

// 静态文字
https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>
<LABEL>:标签,作为左半部分展示
<MESSAGE>:信息,作为右半部分展示
<COLOR>:颜色,右半部分的背景颜色

// 动态文字
  https://img.shields.io/badge/dynamic/json?url=<URL>&label=<LABEL>&query=<.DATA.SUBDATA>&color=<COLOR>&prefix=<PREFIX>&suffix=<SUFFIX>
<URL>:链接,作为通过Api获取数据的链接,显示在右半部分
<LABEL>:标签,作为左半部分展示
<.DATA.SUBDATA>: Api 返回的数据字段
<COLOR>:颜色,右半部分的背景颜色
<PREFIX>:前缀,作为右半部分前面添加的文字
<SUFFIX>:后缀,作为右半部分后面添加的文字

// 带图标的
  在动态文字的基础上添加 &logo=<logo>
  <logo>:标志,应为logo名称,类似:github

// 带风格的
  在动态文字的基础上添加 &style=<style>
  <style>:风格,应为风格名称,总共5种:plastic、flat、flat-square、for-the-badge、social

// 1. 静态文字
https://img.shields.io/badge/博客-文武科技柜-brightgreen

// 2. 动态数据
https://img.shields.io/badge/dynamic/json?color=blue&label=GitHub Stars&prefix=有 &query=stars&suffix= 个星&url=https://api.github-star-counter.workers.dev/user/dongyubin

// 带图标和风格的
https://img.shields.io/badge/dynamic/json?color=blue&label=GitHub Stars&prefix=有 &query=stars&suffix= 个星&url=https://api.github-star-counter.workers.dev/user/dongyubin&style=for-the-badge&logo=github

substats

substats 是一个基于 Shields.io 偏向国内界面化的小图标网站,比如知乎、微博、bilibili等

substats:在线制作网站

API文档介绍

实例如下:

哔哩哔哩

GitHub-Star-Counter

GitHub-Star-Counter 是统计 GitHub 上总 star 数和 fork 数的api

  1. https://api.github-star-counter.workers.dev/user/idealclover

  2. Heroku version: https://github-star-counter.herokuapp.com/user/idealclover

// 末尾的XXX代表:用户名
https://api.github-star-counter.workers.dev/user/XXX

skillicons

skillicons 是一个开源的图标项目,通过它能够在你的github主页或者简历页面显示指定的技能图标,比如编程技能:c++,java,html,js等等,支持图标的主题色修改,指定每行的图标数,图标居中等等。

斌仔

公众号:文武科技社

相关推荐

发表评论

您的电子邮箱地址不会被公开。

:?: :非难: :伤心: :邪恶: :!: :微笑: :oops: :咧嘴: :eek: :休克: :色: :睡觉: :???: :凉: :大声笑: :狂: :扭曲: :滚: :眨眼: :理念: :箭头: :中性: :哭: :格林先生:

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

如何定制动态数据小牌子?
嘿!有什么能帮到您的吗?
返回顶部 夜间模式

显示

忘记密码?

显示

显示

获取验证码

Close