Blog.L

Blog.L

添加自定义静态/动态shields徽章

156
2023-09-15

提取准备

1、静态徽章

1.1 基本自定义

shields1.jpg

1.2 条件自定义

打开Simpleicons图标官网
shields3.jpg

复制到logo框中,图标颜色也可以自定义
shields4.jpg

如果Simpleicons图标库没有你要的图标,通过阅读官网,可以把图片转成 Base64 放在 logo 框中使用
shields5.jpg

准备一张图片,越小越好,最好不要超过20k,不然会报url太大

<html>
<head><title>414 Request-URI Too Large</title></head>
<body>
<center><h1>414 Request-URI Too Large</h1></center>
<hr><center>cloudflare</center>
</body>
</html>

打开在线工具图片转Base64,上传你的图片,复制红色框内容
shields6.jpg

生成结果
shields7.jpg

2、动态徽章

动态徽章,不需要手动修改,就会自动更新。
搜索找到 GitHub release (with filter)
shields8.jpg

示例:
shields11.jpg

  • user:github用户名
  • repo:github项目名
    shields9.jpg

修改并添加条件
logo:Base64图片
label:左边名称
shields12.jpg

还有其他可以添加,比如stars
shields13.jpg

添加到自己网站的页脚即可
shields14.jpg

最后的效果如下
shields15.jpg