偶然看到b站pc版文章页面中调用b站视频的小卡片感觉很好看，想到自己未来也有这样的需求，就尝试写了一个Hexo插件，这里简单介绍一下情况，后面会尝试出一个编写教程！

效果演示

不多bb，开头就演示来一发！

76:37:12

《高等数学》同济版 全程教学视频（宋浩老师）

13586.6万 266.6万

效果咋说呢，还可以吧，目前需要完善移动端显示。
还有就是增加其他类型了，比如文章卡片、Github/npm卡片之类的。
如果你想尝试的话可以直接在你的hexo目录下输入：

1
npm i hexo-bilibili-card

(终于轮到我有这个了好耶！)
欢迎star&贡献代码！！！

心路历程

这个插件的原理其实还是比较简单的，就是从b站的api中获取对应的信息用模板渲染出来对应的信息就是了。
所以我的主要工作就是：写一个卡片的模板，写一个处理b站api的程序。

模板方面

比较简单（但还是写了很久，毕竟我渣渣……）
想看的拿审查元素biubiu一下大概就知道了，不过很多样式其实是直接抄的b站原版（

图片防盗链

还有一点比较值得注意的，就是b站封面的图片服务器不知道为何在首次访问页面的时候会报403，但是第二次就可以正常访问。
这里使用了一个中庸的方法就是使用代理 https://images.weserv.nl/?url={your_img_url} 来解决这个问题，稍微拖慢了一些加载速度。

但是写完html并不只是完了，因为你要通过模板引擎生成，还要适配主题。
模板引擎方面选择的是Hexo目前自带的nunjucks，语法比较简单，主要用到的就是{{里放变量}}然后一些其他杂七杂八的。
主题的适配目前只做了自己的，不过直观感觉大部分主题都能差不多。

信息处理方面

这里把部分代码拿出来说明一下，写的有点乱。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//首先通过hexo的api中的`generator`创建一个虚拟的路由，即把插件中的css样式文件放到public文件夹中
hexo.extend.generator.register('bili_asset', ()=>[
    {
      path: 'css/bilicard.css',
      data: function(){
        return fs.createReadStream(
          path.resolve(path.resolve(__dirname, "./source"),"bilicard.css"))
      }
    }
]);
//然后是使用`Tag`创建一个新的标签方便在网页中插入。
hexo.extend.tag.register("bilicard", function (args) {
    return bili(args[0]).then(function(bili_card){
      //console.log(bili_card);
      return bili_card;
    });
    
},{async: true});
//最后使用`fitter`在文章后插入我们css文件的link代码。
hexo.extend.filter.register('after_post_render', (data) => {
    let my_css = '<link rel="stylesheet" href="/css/bilicard.css" type="text/css">';
    data.content += my_css;
    return data;
});

比较值得注意的是第二部分，你会发现我开启了async: true即异步模式。
因为在编写请求api并处理信息的同时，我发现总是无法获得node的request的返回值，这个时候才想起来js中的请求是异步的，所以返回的时候并不一定请求结束，所以在网上搜了许多解决方法最终解决了。
首先展示一下我做的请求部分的代码片段

1
2
3
4
5
6
7
8
9
10
11
var getVideoMessage = (id) => {
    return new Promise((resolve, reject) => {
        request('http://api.bilibili.com/x/web-interface/view?' + vtype[0] + '=' + id, function (error, response, body) {

        }};));
        ……………………
module.exports = async function createCard(id) {
    var card = nunjucks.render(
        path.resolve(__dirname, '../templates/' + 'bilicard.njk'), await getVideoMessage(id));
    return card;
}

首先内部构造了一个Promise，然后使用await接受参数，最后在上面的index.js里用then来获取参数。这部分由于我也不是理解太透彻暂时不多说（果然还是要多学习呀……）感兴趣的小伙伴欢迎去github看下全部代码顺便给个star

最后

那么基本就这样个情况，后续有啥问题我在更新吧，这期就到这里，祝大家新年快乐！