写 README、搭文档站、或者给博客文章加状态标识时,你大概率用过 shields.io。那些精致的小徽章(build passing、license MIT、coverage 95%)几乎是开源项目和开发者博客的标配。
但用久了你会发现一个痛点:shields.io 的静态徽章 URL 规则太反人类了。
- 颜色支持 hex、rgb、命名色,但 rgb 里的逗号和空格还得手动 URL 编码;
- 改个参数就得刷新页面看效果,来回切标签页切到眼花。
官方虽然有交互式页面,但嵌入到 WordPress 或某些 CMS 时,脚本经常被转义、被拦截、被缓存插件改写,折腾半天还是贴回纯文本 URL。
所以我干脆自己写了一个「shields.io 静态徽章生成器」,今天正式放出来。
它能做什么
- 实时预览:左侧填参数,右侧即时渲染,所见即所得;
- 自动转义:空格、下划线、连字符、百分号、RGB 颜色……全部按 shields.io 规范自动处理,不用再心算
%20和%2C; - 一键复制:Markdown / HTML img / HTML object 三种格式,点一下就走;
- 预设速填:
build passing、license MIT、coverage、version、docs、blog、status常用组合一键填入; - 全样式对比:flat / flat-square / plastic / for-the-badge / social 五种风格并排预览,选完再走;
- Logo 支持:输入 Simple Icons slug 即可叠加图标,支持自定义 logoColor 与自适应大小;
- 零依赖:纯原生 HTML/CSS/JS,无框架、无外部请求,可离线使用,也可安全嵌入任何 CMS。
工具已上线 LYKNS XWYER:shields.io 静态徽章生成器 – LYKNS XWYER
欢迎试试。有 bug 或想加的功能,评论区见。