根据shields徽章，典型的开源项目会有一个小徽章，用于标识项目的状态信息，并会自动更新。 shields的官方网站https://shields.io/#/上有各种各样的小图标，也有很多定制方案。
原因：如何在专用部署的jenkins上创建shields服务？ 专用部署的jenkins用于打包docker镜像，但希望获取最新的项目打包的jenkins镜像信息。 但是，专用的jenkins项目信息，公共网络上的shields服务无法获取该信息。 那么，构建专用的shields服务怎么样？
第一步(如何基于信息创建svg图标并显示shields图标的源代码。 您可以看到这些图标都是svg格式的图标。 然后，考虑将文字信息转换为svg图标。 最后，我意识到这是一个死胡同，
有一个名为text-to-svg的npm软件包，似乎可以将文本转换为svg，但看到将文本转换为svg的效果后，我果断放弃了。
最后回到起点，浏览shields官方仓库，找到templates目录，豁然开朗。 svg图标最初是从svg模板生成的，每次生成图标时，只需在模板中添加信息，就可以呈现svg字符串。
顺着这个想法，我找到了一个叫shields-lightweight的包
var shields=require (shields-lightweight )； varsvgbadge=shields.SVG (' subject '、' status '、' red '、' flat ' )； 这个包确实可以生成和shields一样的小徽章，但是徽章里有中文的话，会溢出中文。 因为中文文字的宽度比英文文字的宽度宽得多。
所以我fork了这个项目，重写了图标宽度的计算方法。 shields-less
npminstallshields-lessvarshieldsless=require (shields-less ) ) varSVGbadge=shieldsless.SVG ) lefttext3360 ) nppg rigeld (varsvgbadge2=shields less.SVG (lefttext : ' NPM黄河远上白云间'，rightText: 'hello世界'， syle : ' square ' } (varsvgbadge2=shields less.SVG (lefttext : ' NPM黄河之外白云之间'，rightText: 'hello世界'，leftct ) 样式： ' square '/justtwostyle 3360 squareandplat (default ) }查看渲染后的效果，并在线demo336033555 .
shields服务开发shields服务其实很简单。 架构如下，客户端浏览器发送一个请求，向shields服务、shield服务解析请求，然后发送请求给jenkins服务，jenkins服务针对每个项目进行json的http shields将从jenkins获取的信息封装在svg小程序中，并将svg小程序发送到客户端。
最终效果