Shields.io 的静态徽章
最近给博客页面做点缀的时候，又想到这个老东西——Shields.io 的静态徽章。说 "又" 是因为它早就有了，但每次要用的时候还是觉得省事，所以记一笔。
简单讲，静态徽章就是你拼一个链接，它返给你一张小图片：左边一个词、右边一个词、右边带个底色。长得就是 GitHub 那种 build passing 的小牌子。它妙在不用接任何接口、不需要你自己的后端，纯靠 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 最稳，别跟命名色较劲。
就这样，一个不起眼但真能省心的小工具。下次你要在页面上放个 "状态标签" 又不想写代码的时候，先想想它。