hexo图片

当前hexo版本为 5.4.0，NexT版本 8.8.0

使用方法

sudo npm install hexo-md-imgs

问题

hexo编写markdown文件时，插入图片，图片可以放在 source/images 目录里（NexT主题的赞赏码也是放在这里），但问题是，在markdown里如果要预览图片，代码应该是

![图](/source/images/图片文件名)

或

![图](../images/图片文件名)

这样markdown里可以预览了，但是这样编译出来的是

<img src="/source/images/图片文件名" alt="图">

<img src="../images/图片文件名" alt="图">

这在网页里是无法显示图片的，因为 html 里路径应该是

<img src="/images/2021-04/gitalk.png" alt="图">

原理

这个插件就是在 hexo s 编译以后，更换图片的url，从而保证 markdown 图片预览与网页中图片一致

其他

很简单就几行代码，主要是学习一下 hexo插件开发 和 npm库发布

hexo插件开发

其实也就是 npm库开发

新建目录 hexo-test

为了使用hexo的语法，插件名必须 hexo- 开头
```
mkdir hexo-test && cd hexo-test
```
初始化
```
npm init
```
根据提示输入包名等信息

这个只是创建了一个package.json，里面包含包名、作者、描述、版本等信息

创建js文件

touch index.js

代码写在这里，我是为了在 hexo s 以后替换，所以看官网文档，用的 after_post_render

hexo.extend.filter.register('after_post_render', function(data) {
    data.content = data.content.replace(/<img src="(..|\/source)\/images\/.*?>/g, function(match, capture) {
        return match.replace("/source/images", "/images").replace("../images", "/images")
    });

    return data;
});

测试

在 hexo-test 里面运行
```
npm ln
```
在hexo的博客项目 yuhldr 文件夹里运行
```
npm ln hexo-test
```
在博客项目里，找到 package.json 的 dependencies 中添加依赖 "hexo-md-imgs": "^1.0.0",

其实这也就类似于 npm install hexo-md-imgs，且此时对 hexo-md-imgs 的修改会直接反映到博客中。

npm库发布

在这里注册一个账号网站

注意，在浏览器里激活邮箱，直接在qq邮箱点激活，有问题，如果不激活，发布时会报错
```
a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.
```

npm源保证是官方的

npm config get registry

应该查看到

https://registry.npmjs.org/

如果不是，更换一下

npm config set registry https://registry.npmjs.org

npm添加账户信息
```
npm adduser
```
按照提示输入刚才注册的账号密码和邮箱
发布
```
npm publish
```
邮箱必须验证，不然发布会报错，而且保证包名唯一，可以先去官网搜一下
忽略

某个文件只是说明不需要发布的话，当前目录新建 .npmignore 文件，添加忽略，与 git 类似

yuhldr/hexo-md-imgs

hexo图片

使用方法

问题

原理

其他

hexo插件开发

npm库发布