写一个自己的hexo插件

概述

• hexo-fs：File IO
• hexo-util：Utilities
• hexo-i18n：Localization (i18n)
• hexo-pagination：Generate pagination data

转自：这里

环境

• node v8.5.0
• hexo v3.7.1
• hexo-cli v1.1.0

前言

Hexo对Markdown解析的不错，唯一不太完美的就是无法添加视频标签，不过其实也是可以的，如下

这是一篇博文

...

{% raw %}
<!-- 这里可以写原生的HTML代码 -->
{% endraw %}
...

但是如果我又想用第三方库把播放器装扮的好看一点呢，总归不可能写一次视频就写一大堆script,link,div标签吧，这样代码的重用性非常的不好，比较希望是如下效果

这是一篇博文

...

{% mdVideo video.mp4 %}{% endmdVideo %}
...

那就自己写一个插件呗。

ps：

1.这里的video.mp4是默认存在执行hexo new post时创建的文件夹中的，只要把配置文件_config.yml中的post_asset_folder设为true就可以了。这样子静态资源对应的路径就是http:// ... /文章名/video.mp4了

1. 需要对javascript的语法有一定的了解

---

准备工作

在博客的根目录的node_modules中创建一个文件夹，就把它叫做hexo-simple-video-tag好了，注意，文件夹一定要是以hexo-开头的，请参考官网文档:

First, create a folder in the node_modules folder.
The name of this folder must begin with hexo- or Hexo will ignore it.

到这个文件夹的根目录(/node_modules/hexo-simple-video-tag)下执行npm init命令，使其生成一个package.json文件，同时创建一个index.js文件目录如下

.
├── index.js
└── package.json

package.json(/node_modules/hexo-simple-video-tag/package.json)的文件内容如下

{
  "name": "hexo-simple-video-tag",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

将name与version的信息添加到博客根目录的package.json文件中

....
  "dependencies": {
    ...

    "hexo-simple-video-tag": "1.0.0"
  },
....

使用npm script简化命令的输入，还是在博客根目录的package.json文件中

....
  "scripts": {
    "local": "hexo clean && hexo g && hexo s"
  }
....

这样直接在命令行中执行npm run local就可以启动本地预览服务器了

好了，打开文件夹hexo-simple-video-tag中的index.js文件开始编写代码

关于 hexo.extend.tag.register 的说明请查看官方文档

hexo.extend.tag.register('mdVideo', function(args, content){
  return `<div>Hello ${args[0]} tag! ${content}</div>`
  // ends为true的话标签是这样的
  // {%tag arg0 arg1 arg2%} content {%endtag%}
  // false的话是这样
  // {%tag%}
  // 回调函数的 args参数是[arg0, arg1, arg2 ...] 组成的数组
  //          content是夹在标签之间的内容
}, {ends: true})

创建一篇新博文，就是本文的标题吧教程向：自己写一个hexo插件,写入如下内容

{% mdVideo hexo %}
<p>I'm content</p>
{%endmdVideo%}

在博客根目录下执行hexo clean && hexo g && hexo s看效果

依赖（dependencies）

underscore.js

作用大至如下：

_.cat();                    // 0-args
//=> []

_.cat([]);                  // 1-arg, empty array
//=> []

_.cat([1,2,3]);             // 1-arg
//=> [1,2,3]

_.cat([1,2,3],[4,5,6]);     // 2-args
//=> [1,2,3,4,5,6]

_.cat([1,2,3],[4,5,6],[7]); // 3+ args
//=> [1,2,3,4,5,6,7]

lodash.js

通过使用数组、数字、对象、字符串等，使得 JavaScript 变得更加简单。Lodash 的模块化方法非常适用于:

迭代数组、对象和字符串操作和测试值创建复合函数

作用大至如下：

_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });
// → { 'a': 1, 'b': 2 }
_.partition([1, 2, 3, 4], n => n % 2);
// → [[1, 3], [2, 4]]

参考链接：