Hexo历险记之十二开发hexo-abbrlink3插件

前言

源自上一篇，我自定义了模板，导致hexo-abbrlink这个插件无法扫描到我的文章，而这个插件是对我来说很必要的，没有其他可以替代的。

于是，求人不如求己，萌生了基于该插件进行二次开发的念头。

时隔四年，重启Hexo历险计划！

Hexo历险记之十二开发hexo-abbrlink3插件

---

问题复述

如果一篇文章不显式标明layout的话，在渲染的时候，是会自动定义成为layout: post的，而一般类似tags，cacategories等则是会定义为layout: page。于是，插件hexo-abbrlink会依据这个字段信息选择性地发挥作用。

然而，我自定义的模板是显式标明layout了，且与默认的内容完全无关，导致该插件不能够正常扫描我写的文章。

我想要改进这个插件，进一步开发功能，可以对不同的layout的文章生效。

插件开发

首先我需要了解到现有的几个相似功能的插件，否则重复造轮子没有意义。

1. hexo-abbrlink，这个是我现在能够看到的功能最全的插件了，包括两个计算方式以及多个尾端长度，可以基于他进一步开发。

2. hexo-abbrlink2，相较于第一个插件，是能够从1开始依次增长的，不过这个功能我没有需求，于是放弃了集成该功能。

项目命名

新的包名不能跟现有的冲突，如果冲突会无法发布。

访问https://www.npmjs.com/package/ + [包名]，例如访问链接https://www.npmjs.com/package/testpabc，如果该包不存在，会提示404 not found，否则会展示该包的信息。

继续沿用这个命名逻辑，我将新的插件命名为hexo-abbrlink3。

生成JSON

在创建一个项目时，可以使用命令跟随引导生成Json文件。

npm init

也可以直接编写这个Json文件的，这里附上我已经编辑好了的。

{
  "name": "hexo-abbrlink3"，
  "version": "1.0.1"，
  "description": "create one and only link for every different layouts for hexo"，
  "main": "index.js"，
  "scripts": {
    "test": "node test.js"
  }，
  "keywords": [
    "hexo"，
    "link"，
    "permalink"，
    "abbrlink3"
  ]，
  "repository": {
    "type": "git"，
    "url": "git+https://github.com/Keen-King/hexo-abbrlink.git"
  }，
  "author": "君匡"，
  "license": "ISC"，
  "homepage": "https://github.com/Keen-King/hexo-abbrlink3/blob/master/README.md"，
  "dependencies": {
    "hexo-front-matter": "^1.0.0"，
    "hexo-fs": "^3.1.0"
  }
}

编写插件逻辑

首先，我需要从博客站点配置文件中，读取到我哪些布局是需要应用该插件的，而哪些又是需要标明不需要的。截取配置文件内容如下。

permalink: :year/:category/:abbrlink/ # 生成效果链接

abbrlink:
  alg: crc32  # 算法：crc16(default) and crc32
  rep: hex    # 进制：dec(default) and hex
  allow: ['post'，'school'，'cpp'，"java"，"blog"] #允许的模板类型.默认为["post"]
  disallow: [] #不允许的模板类型，默认为空列表

新增一个函数，用来循环遍历判断，当前正在应用插件的博客文章是哪种布局。

function judge(data， config) {
    let allowList = config.allow || ["post"] //默认是对post进行应用
    let disallowList = config.disallow || [] //默认没有其他布局需要跳过
    for (let i = 0; i < disallowList.length; i++) {
        if (disallowList[i] == data) {
            return false;
        }
    }
    for (let i = 0; i < allowList.length; i++) {
        if (allowList[i] == data) {
            return true;
        }
    }
    return false;
}

将该函数放到hexo-abbrlink的核心判断位置，在本地多次测试没有问题之后，就可以发布了。

插件发布

发布到npm

在发布到npm之前，先去npmjs.com注册账号并激活邮箱。

image-20210209225821715

然后在本地执行命令，切换为官方源，登陆自己的账号。

: 切换源为npm官方源
npm config set registry https://registry.npmjs.org

: 登陆账号
npm login

注意：如果不是官方源，就会报错。

image-20210209230155206

登录成功后结果如下图。

image-20210209230540786

此时切换到插件路径，运行如下命令，就可以发布到npm了。

$ npm publish

如果你的邮箱没有激活，会出现E403的错误。

image-20210209231446455

等你激活邮箱后，再次运行名利，即可发布成功！

image-20210209231611610

此时就可以让别的小伙伴用这个命令来下载你的插件了。

npm init -y

npm install hexo-abbrlink3

发布到github

首先从github上面fork这个主要仓库到自己的仓库，然后clone到本地，修改文件site/source/_data/plugins.yml，在最上面新加一段插件的介绍信息和链接。

- name: hexo-abbrlink3
  description: create one and only link for every different layouts for hexo
  link: https://github.com/Keen-King/hexo-abbrlink3
  tags:
    - permalink
    - link
    - 固定链接
    - abbrlink3

保存后开启命令行，用git命令提交上传，推送成功如图所示。

git commit -m "添加插件 hexo-abbrlink3"

git push

image-20210210124122213

依次点击按钮，发起仓库合并请求、创建一个新的拉取，确认过没有冲突就可以合并了。等到通过审查，就算成功了！

image-20210210124840404

image-20210210125301538

image-20210210125350846

image-20210210135438626

感谢

感谢hexo-abbrlink插件的开发者。

感谢过去努力的自己，感谢现在的好奇，为了能成为更好的自己。

hexo api

npm 发布 packages

hexo 插件