NPM插件的开发

2021-07-06 14:59:41 浏览数 (1)

点击查看更新记录

更新记录

2021-06-30:初步讲解可能用到的api

  1. hexo过滤器(Filter)API用法
  2. hexo生成器(Generator)API用法
  3. hexo注入器(Injector)API用法
  4. hexo辅助函数(Helper)API简单用法

点击查看参考教程

参考方向

教程原贴

高情商:有效治疗低血压患者

Hexo API文档

参考了页面生成插件的写法

参考了页面植入式插件的写法,以及hexo api的具体应用

编译stylus文件

stylus官方文档

编译pug文件

PUG官方文档

店长的碎碎念

本文讨论的npm插件化,针对的是那种可以放在单独的页面魔改,或者代码可以剥离出来,通过某个特定的页面容器进行挂载的植入式魔改方案。

例如糖果屋的gitcalendar,页面轮播图,以及所有的侧栏魔改就是植入式插件。而信封式留言板,朋友圈前端页面则是页面式插件。糖果屋微调合集基本上是不可能写成插件了。倒不是说理论上不可行。而是时间成本不对等。毕竟改10行代码的事情非要去写几十行的插件,得不偿失。

它们的共同特点就是高内聚低耦合。除了必要的挂载容器以及适配样式和主题相关以外,理论上可以把它们迁移到任何其他主题。 这就给魔改方案普及化提供了可能性。只需要更换挂载容器或者附加一些样式补丁,我们就能很轻易的在其他主题也用上这些方案。 本文提供的详细的教程拆解和具体示例。

NPM插件的发布

此部分内容已经在NPM图床的使用技巧中进行过详细描述。关于账户注册和插件发布的部分本帖不会再详细展开。以下仅针对本地开发流程进行阐述。

教程拆解

逐步拆解新建过程。会大量用到diff代码块。

具体示例

拟以hexo-butterfly-artitalk-pro为示例,结合了页面生成和侧栏插件注入的内容。插件待编写。敬请期待。

更多已开发插件

以下是一些已经完成的插件源码。权且作为参考。开发模式基本同本帖所讨论的模板方案。在涉及一些辅助函数的时候也有详细注释。各位开发者可以选择适当的内容作为参照。

插件仓库

类型

参考方向推荐

容器植入式

侧栏魔改方案插件化

容器植入式

依赖添加,补丁添加,通过配置项给页面dom动态添加class,外挂标签插件植入

页面生成式

单独页面生成模板。动态生成css

页面生成式

单独页面生成模板

容器植入式

结合文章front-matter进行筛选,实现与post的front-matter联动

容器植入式

多主题适配,读取主题,自动加载容器

TO DO

讲解可能用到的一些api

具体案例

已开发插件源码示例

0 人点赞