shields小徽章是如何生成的？以及搭建自己的shield服務器

shields小徽章介紹

一般開源項目都會有一些小徽章來標識項目的狀態信息，並且這些信息是會自動更新的。在shields的官網https://shields.io/#/, 上面有各種各樣的小圖標，並且有很多自定義的方案。

起因：如何給私有部署的jenkins製作shields服務？

私有部署的jenkins是用來打包docker鏡像的，而我想獲取最新的項目打包的jenkins鏡像信息。但是私有的jenkins項目信息，公網的shields服務是無法獲取其信息的。那麼如果搭建一個私有的shields服務呢？

第一步：如何根據一些信息，製作svg圖標

查看shields圖標的源碼，可以看到這些圖標都是svg格式的圖標。然後的思路就是，將文字信息轉成svg圖標。最後我發現這個思路是個死衚衕，

有個npm包叫做，text-to-svg, 似乎可以將文本轉成svg, 但是看了文本轉svg的效果，果斷就放棄了。

最後回到起點，看了shields官方倉庫，發現一個templates目錄，豁然開朗。原來svg圖標是由svg的模板生成的，每次生成圖標只需要將信息添加到模板中，然後就可以渲染出svg字符串了。

順着這個思路，發現一個包shields-lightweight

var shields = require('shields-lightweight');
var svgBadge = shields.svg('subject', 'status', 'red', 'flat');

這個包的確可以生成和shields一樣的小徽章，但是如果徽章中有中文，那麼中文就會溢出。因爲一箇中文字符的寬度要比一個英文字符寬很多。

所以我就fork了這個項目，重寫了圖標寬度計算的方式。shields-less

npm install shields-less

var shieldsLess = require('shields-less')
var svgBadge = shieldsLess.svg({
    leftText: 'npm 黃河遠上白雲間',
    rightText: 'hello 世界'
})

var svgBadge2 = shieldsLess.svg({
    leftText: 'npm 黃河遠上白雲間',
    rightText: 'hello 世界',
    style: 'square'
})

var svgBadge2 = shieldsLess.svg({
    leftText: 'npm 黃河遠上白雲間',
    rightText: 'hello 世界',
    leftColor: '#e64a19',
    rightColor: '#448aff',
    style: 'square' // just two style: square and plat(default)
})

渲染後的效果，查看在線demo: https://wdd.js.org/shields-le...

shields服務開發

shields服務其實很簡單。架構如下，客戶端瀏覽器發送一個請求，向shields服務，shield服務解析請求，並向jenkins服務發送請求，jenkins服務每個項目都有json的http接口，可以獲取項目信息的。shields將從jenkins獲取的信息封裝到svg小圖標中，然後將svg小圖標發送到客戶端。

最終效果