Aaaaaaaty / blog

趁还能折腾的时候多读书——前端何时是个头
1.78k stars 272 forks source link

给文档添加一组掘金的「小盾牌」 #15

Open Aaaaaaaty opened 7 years ago

Aaaaaaaty commented 7 years ago

写在最前

由于昨天掘金上线了自己的小盾牌,感觉非常酷有木有!相关文章在这里。 就是下面这个:) 嗯上面那个是这篇文章现在的喜欢数嘻嘻~ 然而这个是分享到掘金的文章才可以生成这样一个盾牌,可是我的文章在专栏里我也想要一个放到github的博客里怎么破!所以我决定自己写一个工具好了。我希望它可以实现:

欢迎关注我的博客,不定期更新中——

最终效果

看起来还是很好看的嘛!

PS:关于小盾牌这个图标的生成是使用的shield.io这个网站的功能,会生成有一段url,里面是返回的svg图像,替换url参数就可以实现更新盾牌数据了。下文会直接对其进行数据更新。

实现思路

在自己的md中预先设置好盾牌

<p align="center">
   <a href=""><img id="like" src="https://img.shields.io/badge/掘金-1.7k喜欢-blue.svg" alt="Build Status"></a>
   <a href=""><img id="read" src="https://img.shields.io/badge/掘金-37.6k阅读-blue.svg" alt="Build Status"></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比较简单,很多功能不齐全,希望定制化的小伙伴自己拷走代码自己改改~

最后

不定时更新中—— 有问题欢迎在issues下交流。