Shields.io 的静态徽章
Shields.io 的静态徽章：拼一个链接，返一张小图片——左边一个词、右边一个词、右边带个底色，就是 GitHub 那种 build passing 的小牌子。不用接接口、不要后端，纯靠 URL 参数决定内容，到处都能贴。
最近给博客页面做点缀的时候，又想到这个老东西。说「又」是因为它早就有了，但每次要用的时候还是觉得省事，所以记一笔。
它妙在不接任何接口、不需要你自己的后端，纯靠 URL 参数决定内容，所以 Markdown、HTML、README，甚至评论区里都能塞。我是拿它在 Halo 博客上挂状态用的：文章里标个「当前主题版本」，关于页列一下技术栈，页脚放几个「HTTPS / CDN 加速 / 已备案」。一排色块看着就是比纯文字顺眼，而且完全是静态图，主题升个级也不会把自定义代码冲掉。
怎么用
入口永远是这一句：
https://img.shields.io/badge/{左边}-{右边}-{颜色}
比如只要右边一段字加颜色：
带左边标签的完整版：
几个字符坑先说在前头，不然渲染出来是歪的：空格用 %20 或者下划线 _；想要真下划线就写 __；想要真短横线就写 --。我第一次用就被空格坑过。
能调的东西
跟在 ? 后面传参数，常用的就这几个：
-
style：换外观。flat是默认，flat-square更紧凑，for-the-badge那款更潮一点，我个人博客偏爱后两个。 -
color/labelColor：右边和左边的底色，hex、rgb、hsl 还有 CSS 命名色都行（比如blue、orange、brightgreen）。 -
logo：加个图标，slug 从 simple-icons 拿，再配logoColor调颜色。
够用了。剩下的 label（覆盖左边文字）、cacheSeconds（缓存时长）这些，纯展示基本用不上，想折腾再去官网翻。
在 Halo 里怎么贴
因为它本质就是张图，在 Halo 的 Markdown 编辑器里直接写标准图片语法就能渲染，不用装任何插件：
我一般在三个地方用：文章里标注状态、关于页做技术栈展示、页脚挂运行指标。都是「写了就不用再管」的那种静态信息，挺合适。
颜色名和 CSS 标准色个别会有出入，不确定的时候直接上 hex 最稳，别跟命名色较劲。
就这样，一个不起眼但真能省心的小工具。下次你要在页面上放个「状态标签」又不想写代码的时候，先想想它。
