hexo插件开发与npm包发布

发表于 更新于 分类于 阅读次数： 本文字数： 673 阅读时长 ≈ 2 分钟
hexo中，在`source/images`里放图片，markdown引用路径为`../images/*.png`或者`/source/images/*.png`，但是这样编译出来，图片路径是不对的，这个插件自动修改一下

npm项目

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

整个项目地址

使用方法

sudo npm install hexo-md-imgs

问题

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

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

或

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

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

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

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

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

原理

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

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

hexo插件开发

其实也就是 npm库 开发

  1. 新建目录 hexo-test

    为了使用hexo的语法，插件名必须 hexo- 开头

    1
    mkdir hexo-test && cd hexo-test

  2. 初始化

    1
    npm init

    根据提示输入包名等信息

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

  3. 创建js文件

    1
    touch index.js

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

    1
    2
    3
    4
    5
    6
    7
    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;
    });

  4. 测试

    在 hexo-test 里面运行

    1
    npm ln

    在hexo的博客项目 yuhldr 文件夹里运行

    1
    npm ln hexo-test

    在博客项目里，找到 package.json 的 dependencies 中添加依赖 "hexo-md-imgs": "^1.0.0",

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

npm库发布

  1. 在这里注册一个账号 网站

    注意，在浏览器里激活邮箱，直接在qq邮箱点激活，有问题，如果不激活，发布时会报错

    1
    2
    a package version that is forbidden by your security policy, or
    npm ERR! 403 on a server you do not have access to.

  2. npm源保证是官方的

    1
    npm config get registry

    应该查看到

    1
    https://registry.npmjs.org/

    如果不是，更换一下

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

  3. npm添加账户信息

    1
    npm adduser

    按照提示输入刚才注册的账号密码和邮箱

  4. 发布

    1
    npm publish

    邮箱必须验证，不然发布会报错，而且保证包名唯一，可以先去 官网 搜一下

  5. 忽略

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

本文作者：yuhldr
本文地址： [https://yuhldr.github.io/posts/25445.html](https://yuhldr.github.io/posts/25445.html)
版权声明：转载请注明出处！