python 实用库收集

插件编写思路

首先要编写hexo的插件需要浏览官方文档。

编写插件的初衷是因为hexo的代码块有以下几点不足：

1. 对代码块标题的显示不够好
2. 代码块的高亮只能是{% codeblock mark:2%}的写法才可以，并不是通用写法。
3. 缺少代码中间添加highlight-next-line等注释可以高亮的功能
4. 代码块的html结构不够清晰。

基于此，我们要做的要么是直接修改源码要么就是添加一个插件。

编写插件的准备工作

新创建一个hexo实例后，在node_modules文件夹下新建一个以hexo-开头的文件夹。我的为hexo-highlight-mark。
然后进入文件夹中执行npm init来初始化npm包，这里的问答可以直接一路回车，后面再在package.json中修改。

新建index.js文件作为入口文件。

在根目录中的package.json文件中添加插件的名称和版本号，此时插件就可以以最小单位运行了。

如何修改代码块结构

这个插件要修改代码块的结构，可以用到过滤器。

index.js

'use strict';


hexo.extend.filter.register('before_post_render', require('./lib/filter'), 8);

before_post_render是过滤器在文章渲染之前就介入执行。

./lib/filter.js

const rBacktick = /^((?:[^\S\r\n]*>){0,3}[^\S\r\n]*)(`{3,}|~{3,})[^\S\r\n]*((?:.*?[^`\s])?)[^\S\r\n]*\n((?:[\s\S]*?\n)?)(?:(?:[^\S\r\n]*>){0,3}[^\S\r\n]*)\2[^\S\r\n]?(\n+|$)/gm;


module.exports = function (data) {
    const dataContent = data.content;


    if ((!dataContent.includes('```') && !dataContent.includes('~~~')) || (!hljsCfg.enable && !prismCfg.enable)) return;


    data.content = dataContent.replace(rBacktick, ($0, start, $2, _args, _content, end) => {
        // do something
    }
}

上面的代码就是将data.content中的代码块部分进行匹配并且自定义渲染并返回替换原内容。

调试

配置调试文件如下：

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}\\node_modules\\hexo\\bin\\hexo",
            "args": [
                "g",
                "--debug"
            ],
            "preLaunchTask": "npm: clean"
        }
    ]
}

配置前置任务，清除原有的数据

.vscode/tasks.json

{
	"version": "2.0.0",
	"tasks": [
		{
			"type": "npm",
			"script": "clean",  // 名称必须相同，大小写敏感
			"problemMatcher": [],
			"label": "npm: clean",
			"detail": "hexo clean"
		}
	]
}

发布到npm

要发布npm，需要注册npm账号

然后在插件文件夹修改好package.json然后运行登录和发布命令即可

npm login  # 登录
npm publish  # 发布文件

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 365433079@qq.com