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

本文最后更新于 11天前,如有内容失效请留言告知。

2022040912.webp

2022040912.webp

有时候在逛 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等等,支持图标的主题色修改,指定每行的图标数,图标居中等等。

GitHub Profile Page Creator

GitHub Profile Page Creator 通过动态配置生成代码复制到 GitHub 主页里即可生成漂亮的主页介绍。

GitHub源码地址

Github Profile Header Generator

Github Profile Header Generator 通过设置生成 banner 图

Visit Count Pro

Visit Count Pro 是一个图标显示访问计数器

GitHub源码地址

ASCII text banners

ASCII text banners 通过设置生成 ASCII 文本信息,可以复制到代码中。

STARCHARTS

STARCHARTS 一款可以查看 GitHub 项目的 star 增长情况的工具,可以把 svg 图片放到项目的 README.md 里。

GitHub Star History

GitHub Star History 与 STARCHARTS 类似的查看 GitHub Star 的工具。

GithubCity

GithubCity 这个网站使用 ThreeJS 从你的 GitHub 贡献以一个 3D 城市的形式展示出来。 与 Skyline 类似

斌仔

公众号:文武科技社

相关推荐

发表评论

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

*

*

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

微信扫一扫

微信扫一扫

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

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

显示

忘记密码?

显示

显示

获取验证码

Close