shields小徽章介绍一般开源项目都会有一些小徽章来标识项目的状态信息，这些信息会自动更新。在shields的官网https://shields.io/#/上，有各种小图标和很多自定义方案。起因：如何为私有部署的jenkins做盾牌服务？私有部署的jenkins用于打包docker镜像，想获取项目打包的最新jenkins镜像信息。但是私有的jenkins项目信息和公网上的shields服务是无法获取到它的信息的。那么如果你建立一个私人盾牌服务呢？第一步：如何根据一些资料制作svg图标查看shieldsicons的源码，可以看到这些图标都是svg格式的。然后思路就是将文本信息转换成svg图标。最后发现这个想法是死路一条。有个npm包叫text-to-svg，貌似可以把text转svg，但是看到text转svg的效果后果断放弃。最后回到起点，查看shields官方仓库，找到一个templates目录，顿时豁然开朗。原来svg图标是由svg模板生成的。每次生成图标时，只需要在模板中添加信息，即可渲染svg字符串。按照这个思路，我找到了一个包shields-lightweightvarshields=require('shields-lightweight');varsvgBadge=shields.svg('subject','status','red','flat');这个包确实可以生成和盾牌一样的小徽章，但是如果徽章里面有中文，中文就会溢出来。因为汉字的宽度比英文字符宽很多。所以我fork了这个项目，重写了图标宽度的计算方式。shields-lessnpminstallshields-lessvarshieldsLess=require('shields-less')varsvgBadge=shieldsLess.svg({leftText:'npm黄河远在白云之上',rightText:'helloworld'})varsvgBadge2=shieldsLess.svg({leftText:'npm黄河远在白云之上',rightText:'helloworld',style:'square'})varsvgBadge2=shieldsLess.svg({leftText:'npmThe黄河远在白云之上',rightText:'helloWorld',leftColor:'#e64a19',rightColor:'#448aff',style:'square'//两种风格：square和plat(默认)})渲染完成后查看在线演示：https://wdd.js.org/shields-le...shieldsservice开发shieldsservice其实很简单。架构如下。客户端浏览器向屏蔽服务发送请求。shield服务解析请求，向jenkins服务发送请求。jenkins服务的每个项目都有一个jsonhttp接口来获取项目信息。Shields将从jenkins获取的信息封装成svg小图标，然后将svg小图标发送给客户端。最终效果
