这里拿之前写的hexo-tag-bili插件为例。(后来发现之前已经有Z4Tech大大发布过类似的插件了,纯当学习于是继续完成了这个插件)

准备npm账号

若是没有npm账号,在cmd中输入如下npm addUser命令注册账号

若是已有npm账号,在cmd中输入如下npm login命令登录账号

新建插件

选择一个目录新建我们的插件文件夹(这里为hexo-tag-bili)。
cd到目录下,运行npm init初始化

这里解释下上图参数的意思:(直接打回车即空白的部分,表示默认用前面括号中的内容)

  • name 项目名称
  • version 项目版本号
  • description 项目描述
  • entry point 项目主入口文件
  • test command 项目启动时脚本命令
  • git repository git仓库地址(可以将这个项目放到你的 Git 仓库里)
  • keywords 关键词
  • author 作者
  • license 项目要发行的时候需要的证书,平时玩玩忽略它

编写插件

接下来新建index.js作为插件入口文件,又因为我这个插件功能简单,就直接在index中实现功能就好了。代码如下:(为啥这么写请参考hexo官方文档)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
* hexo-tag-bili
* https://github.com/honjun/hexo-tag-bili.git
*
* Syntax:
* {% bili video_id %} or {% bili video_id page %}
*
* Example:
* https://www.bilibili.com/video/av24897960
* {% bili 24897960 %}
* https://www.bilibili.com/video/av24897960/?p=2
* {% bili 24897960 2 %}
*/
hexo.extend.tag.register('bili', function(args){
var id = args[0];
var page = args[1] || '';
return `<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"><iframe src="//player.bilibili.com/player.html?aid=${id}&page=${page}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe></div>`;
});

发布插件

插件写好了,按道理是要测试下的咳咳,表示之前有直接使用,这就不测试了哈,直接使用npm publish发布到npm上。

1
npm publish

发布后我们就可以使用npm命令下载我们的插件了。

1
npm i hexo-tag-bili --save

安装好后可以在hexo博客目录的node_modules目录下找到我们的hexo-tag-bili插件。然后就可以使用

1
{% bili video_id page %}

来插入B站视频了!

其他

把插件源代码发布到github仓库。(略……)

感谢

largeQ
酷酷小七
kuke_kuke
dkvirus
Z4Tech

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦