給文檔添加一組掘金的「小盾牌」

寫在最前

由於昨天掘金上線了自己的小盾牌，感覺非常酷有木有！相關文章在這裏。
就是下面這個：）

嗯上面那個是這篇文章現在的喜歡數嘻嘻~
然而這個是分享到掘金的文章纔可以生成這樣一個盾牌，可是我的文章在專欄裏我也想要一個放到github的博客裏怎麼破！所以我決定自己寫一個工具好了。我希望它可以實現：

• 自動獲取個人掘金主頁的喜歡數、閱讀數
• 將盾牌圖標數據更新到自己本地博客的md中
• 通過git推送到github中的博客（是的gayhub博客求贊）

歡迎關注我的博客，不定期更新中——

最終效果

看起來還是很好看的嘛！

PS：關於小盾牌這個圖標的生成是使用的shield.io這個網站的功能，會生成有一段url，裏面是返回的svg圖像，替換url參數就可以實現更新盾牌數據了。下文會直接對其進行數據更新。

實現思路

• 在自己的md中預先設置好盾牌
• 對掘金個人主頁進行數據獲取
• 更新md
• 執行git命令
• 簡易封裝

在自己的md中預先設置好盾牌

<p align="center">
   <a href="">![Build Status](https://img.shields.io/badge/掘金-1.7k喜歡-blue.svg)</a>
   <a href="">![Build Status](https://img.shields.io/badge/掘金-37.6k閱讀-blue.svg)</a>
  </p>

在自己的md中添加這種代碼就可以預先放置一些盾牌了，之後再進行更新數據的操作。

對掘金個人主頁進行數據獲取

這是獲取個人主頁數據的請求：

有興趣的同學們可以自己在控制檯中瀏覽，可以看到這是一個get請求，需要的參數都包在其中了，故作者便厚顏無恥的直接將這個url複製過來用了..主要是因爲掘金涉及了token驗證，不清楚怎麼簽名的不太好實現自動化得抓取，所以爲了最快速得可以做出來這個小工具，作者暫時直接將這個url拿來使用了。之後的事情就簡單了：

const superagent = require('superagent')
superagent.get(juejinUrl)
    .end((err, obj) => {
        var msg = obj.body.d
        var totalCollectionsCount = msg.totalCollectionsCount //喜歡數
        var totalViewsCount = msg.totalViewsCount //閱讀數
        console.log('實時喜歡數：' + totalCollectionsCount)
        console.log('實時閱讀數：' + totalViewsCount)
        changeReadMe(totalCollectionsCount, totalViewsCount)
    })

通過superagent簡單請求到數據後做一個篩選就得到了我們需要的數據。PS：你也可以使用原生api請求，無所謂的。

更新md

const cheerio = require('cheerio')
const fileName = './README.md'
    const readAble = fs.createReadStream(fileName)
    //創建可讀流
    var body = ''
    readAble.on('data', (chunk) => {
      body += chunk
    })
    readAble.on('end', () => {
        $ = cheerio.load(body)
        var regLike = $('#like').attr('src'),
            regRead = $('#read').attr('src')
        body = body.replace(regLike, 'https://img.shields.io/badge/掘金-'+ (like / 1000).toFixed(1)+'k喜歡-blue.svg')
        body = body.replace(regRead, 'https://img.shields.io/badge/掘金-'+ (read / 1000).toFixed(1)+'k閱讀-blue.svg')
        fs.writeFile(fileName, body, (err) => {
            if (err) throw err;
            var updateRan = 'update' + Number(Math.random().toString().split('.')[1])
            console.log('文件：'+ fileName +' 已經更新')
        });
    })

首先創建一個可讀流，讀出其中的數據body,通過cheerio來解析一下body，查到我們需要更新的兩段url裏面的數據。將之前獲取到的實時數據進行替換，再重新寫入文檔。

執行git命令

const { spawnSync} = require('child_process')
spawnSync('git', ['add', '-A'])
spawnSync('git', ['commit', '-m'+updateRan])
spawnSync('git', ['push'])

通過調用child_process模塊中的spawnSync會同步執行上面的命令，已達到推送數據的效果。
PS：沒有使用異步是爲了簡易，情況複雜或者計算量大阻塞線程的情況還是應該全部異步執行。

簡易封裝

最終我們是通過命令行的形式來執行這個“自動化”更新數據的流程，形式如下：

node juejin.shields.js xxx true

其中的第一個參數是我們自己在控制檯中看到的get請求的url，其中包裹了查詢參數。第二個參數是是否開啓git推送，還是隻是在本地更新自己的文檔，默認爲false。命令行獲取參數的方式是通過process.argv，有興趣的童鞋自行打印一下就明白了。

最終實現

源碼地址
PS: 這個命令可以封裝進類似PM2的守護進程的工具中，自己設定個定時器就可以定時更新盾牌數據咯，只不過token有可能過期？233。同時這個demo比較簡單，很多功能不齊全，希望定製化的小夥伴自己拷走代碼自己改改~

最後

慣例po作者的博客，不定時更新中——
有問題歡迎在issues下交流，捂臉求star=。=