最近搞了一个hexo博客，但是图片外链失败，所以写个插件解决掉该问题，插件编写很简单
开始编写代码
1、首先进入hexo博客目录，在node_modules目录下，新建插件目录
如下图，我的插件名字：hexo-add-img-attr
2、打开终端，进入到该目录下，执行npm init命令来引导创建package.json文件
a. 输入完命令后，会让你输入名字：我这里输入hexo-add-img-attr
b. 回车后，输入版本号，这里我输入：1.0.0
c. 回车后，输入描述
d. 输入入口文件，这里默认index.js 回车即可
e. test命令，忽略，回车即可
f. git仓库的地址，有就填上，没有就忽略，回车即可
g. 关键词，按实际填写
h. 作者，按实际填写
i. 许可证，我填写的是MIT
按回车后，会打印出填写的信息，让确认是否无误
k. 确认信息，输入yes，就会在当前目录生成package.json文件
创建完package.json文件后，创建js代码入口文件，这里是index.js
3、编写index.js的代码
//hexo的钩子函数
hexo.extend.filter.register('after_post_render',(data)=>{
console.log("this is from hexo-add-img-attr:");
return action(data)
}, 0);
//从html数据中找到所有img标签，添加referrerPolicy的值为no-referrer
const htmlparser2 = require("htmlparser2");
function action(data) {
let modifiedHtml = '';
let inImgTag = false;
const parser = new htmlparser2.Parser({
onopentag(name, attribs) {
if (name === 'img') {
// 添加或修改referrerPolicy属性
if (!attribs.hasOwnProperty('referrerPolicy')) {
attribs.referrerPolicy = 'no-referrer';
}
modifiedHtml += `<${name} ${Object.keys(attribs).map(k => `${k}="${attribs[k]}"`).join(' ')}>`;
inImgTag = true;
} else {
modifiedHtml += `<${name} ${Object.keys(attribs).map(k => `${k}="${attribs[k]}"`).join(' ')}>`;
}
},
ontext(text) {
if (!inImgTag) {
modifiedHtml += text;
}
},
onclosetag(tagname) {
if (tagname === 'img') {
inImgTag = false;
}
modifiedHtml += `</${tagname}>`;
},
onend() {
// 这里不需要特别处理，因为我们会在外部返回modifiedHtml
}
});
parser.write(data.content); // 假设data.content包含HTML内容
parser.end();
data.content = modifiedHtml;
return data;
}
至此代码就完成了，下面开始使用下
4、使用插件
在hexo博客目录下找到packge.json文件，在末尾添加新的依赖
"hexo-add-img-attr": "^1.0.0"
添加的时候注意上一行的末尾价格逗号，不然json格式就错误了。
5、重新运行hexo博客
终端，进入到hexo博客目录，也就是packge.json文件所在的目录
依次执行如下命令
//分别是清理缓存、生成静态文件、启动服务
hexo clean
hexo g
hexo s
在我们的插件代码中，打印了日志：console.log("this is from hexo-add-img-attr:"); 执行代码时，可以在终端上看到输出this is from hexo-add-img-attr
在浏览器访问 http://localhost:4000 打开带有图片的文章，就可以看到图片加载出来了
插件就写完了，还有一件事没做，写README.md文件。
6、在插件目录下，新建README.md文件
填写使用说明等信息。主要是给用户看的。
这个文件会显示在 npmjs 你的模块界面，对用户更友好
接下来就可以发布插件了
发布插件到npm官方
一、首先注册npm账号
注册很简单，准备邮箱，注册后会要求你输入邮件的一次性密码，登录的时候也要求邮箱中收到的一次性密码
注册地址（https://www.npmjs.com/signup）
温馨提示：如果打不开网站，切换到手机4g试试
注册参考
https://npm.nodejs.cn/creating-a-new-npm-user-account
二、终端登录npm
在登录之前，先查看当前源，是否是官方的，若不是需要恢复
查看当前源命令：npm config list
我的是官方的。
恢复官方源命令：注意源链接一定是 https 的。
npm config set registry 'https://registry.npmjs.org'
确认官方源之后，输入: npm login
输入命令后，会让你通过浏览器登录，按回车直接打开浏览器，或者复制终端上的登录链接，自行去登录。登录成功后，终端上就会有反应。
三、发布插件
执行命令：npm publish
网好的话，很快就成功了，不然就用梯子吧。
