跳至主要內容

hexo-插件开发实例

holic-x...大约 3 分钟hexobutterfly

插件开发参考

1.标签插件

​ 以标签插件为参考,其核心说明如下

a.定义一个函数用于接收参数并转化文本
b.借助hexo.hexo.extend.tag.register方法注册自定义标签
- hexo.extend.tag.register('标签名称', 函数, options(扩展配置))
- 其中函数定义默认参数为xxx(args,content)

方式1:index.js

​ 以showText为例进行说明,该方式直接在index.js中构建即可正常引入

// 定义函数
function addText (args, content) {
  const text = args[0] || 'non'

  console.log("showText Plugin");
  return `<h1>${text}</h1>`;

}
// 注册插件
hexo.extend.tag.register('showText', addText, { ends: false })

方式2:分模块构建

​ 当遇到比较多组件的情况下,为了便于插件配置的统一管理,采用分模块的方式进行构建,在/lib/script/tag/下创建多个不同的js,随后借助module.export导出接口,在index.js中统一注册,则上述showText可以调整为如下所示:

写法1

/lib/script/tag/showText.js

// 定义函数
function addText (args, content) {
    const text = args[0] || 'non'
  
    console.log("showText Plugin");
    return `<h1>${text}</h1>`;
}

// 暴露接口定义
module.exports = function (args,content) {
  
  // ...... 业务逻辑操作 ......
  
  // 执行转换操作(返回结果)
  return addText(args,content);
}

在index.js中引用

hexo.extend.tag.register('showText', 
                         require('./lib/scripts/tag/showText'), 
                         { ends: false })

写法2

/lib/script/tag/showText.js

// 定义函数
function addText (args, content) {
    const text = args[0] || 'non'
  
    console.log("showText Plugin");
    return `<h1>${text}</h1>`;
}

// 暴露接口定义(可限定多个函数)
module.exports = {
  // 执行转换操作
  addText
  // ,fn1,fn2......
}

在index.js中引用

// 此处引用需指定调用的是哪个函数
hexo.extend.tag.register('showText', 
                         require('./lib/scripts/tag/showText').addText, 
                         { ends: false })

3.扩展

​ 上述内容是针对一些简单的应用场景,其构建出来的内容主要依托于标签引用是所携带的参数,但有些场景下需要借助项目中配置的一些参数(使得插件使用更为灵活,可扩展性强),可以将一些插件中需要引用的参数进行抽离,将其与hexo项目中的主config.yml文件或者主题配置文件进行联系。而index.js作为接入的核心入口,需要在index.js中将hexo引用进行传递,则其构建参考如下所示

/lib/script/tag/showText.js

// 定义函数
function addText (hexo,args) {
    const text = args[0] || 'non'
  
    // 处理hexo相关配置文件参数,例如下述内容(对应hexo的配置文件下的showTextConfig参数对象)
    var config = hexo.config.showTextConfig || {};
  
    console.log("showText Plugin");
    return `<h1>${text}</h1>`;
}

// 暴露接口定义(可限定多个函数)
module.exports = {
  // 执行转换操作
  addText
  // ,fn1,fn2......
}

在index.js中引用

// 此处引用需指定调用的是哪个函数
hexo.extend.tag.register('showText', 
      function(args){
        // 将hexo传入
        return require('./lib/scripts/tag/showText').addText(hexo,args);
      }
    , { ends: false })

// 分析:在index.js中可获取到全局变量hexo,因此可通过在注册的时候将hexo传入指定函数,使得函数中可以正常借助该对象获取到相应的参数配置,从而实现定制化

​ 由上述内容可知,无论是何种情况,都需遵循tag插件接入规则,按照这种模式进行扩展即可

hexo.extend.tag.register('tagName', 
      function(args,content){
      	// 调用模块函数(可结合开发需求扩展接口定义)
  			return fn(xxx,args,content);
      }
    , optons)
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.1.3