Hexo 哔哩哔哩卡片:关于想写一个Hexo插件于是尝试写了这件事
效果演示
不多bb,开头就演示来一发!
效果咋说呢,还可以吧,目前需要完善移动端显示。
还有就是增加其他类型了,比如文章卡片、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 | //首先通过hexo的api中的`generator`创建一个虚拟的路由,即把插件中的css样式文件放到public文件夹中 |
比较值得注意的是第二部分,你会发现我开启了async: true
即异步模式。
因为在编写请求api并处理信息的同时,我发现总是无法获得node的request
的返回值,这个时候才想起来js中的请求是异步的,所以返回的时候并不一定请求结束,所以在网上搜了许多解决方法最终解决了。
首先展示一下我做的请求部分的代码片段
1 | var getVideoMessage = (id) => { |
首先内部构造了一个Promise
,然后使用await接受参数,最后在上面的index.js
里用then来获取参数。这部分由于我也不是理解太透彻暂时不多说(果然还是要多学习呀……)感兴趣的小伙伴欢迎去github看下全部代码顺便给个star
最后
那么基本就这样个情况,后续有啥问题我在更新吧,这期就到这里,祝大家新年快乐!