typora+hexo图片路径转换插件

参考文章

https://cloud.tencent.com/developer/article/1970544

Typroa配置

下载安装 Typora

https://typora.io/

配置 Typora 图片路径

image-20260514155843631

image-20260514160002081

图片文件保存路径:./${filename}即保存到与 当前正在编辑的文件名 相同的同级文件夹下

下面三项依次为

  • 对本地位置的图片应用上述规则
  • 对网络位置的图片应用上述规则
  • 优先使用相对路径 建议都勾选上，至少要勾选上第一项

配置 Hexo 图片文件夹

在 Hexo 根目录打开配置文件 _config.yml

搜索 post_asset_folder，false 改为 true

img

这样修改后，每次 ‘hexo new page’ 生成新文章，都会在文章文件同级目录创建一个与文章文件名同名的文件夹，我们就在这里存放此文章的图片。

img

PS: 这被称为文章资源文件夹, 参考官方文档： https://hexo.io/zh-cn/docs/asset-folders

开发 Hexo 转换图片路径 插件

现在，我们在 Typora下使用 ![example](postname/example.jpg)引用图片，享受实时预览，但需发布到 Hexo，使之发布后能正确加载我们的图片，还需要做以下转换:

1
![example](postname/example.jpg) --> {% asset_img example.jpg example %}

而这个转换我们需要在文章编译为html之前，在编译过程中转换为 这样的标签{% asset_img example.jpg example %}

PS: Hexo官方文档 - 相对路径引用的标签插件

创建文件夹hexo-asset-img，初始化npm包

1
2
3
mkdir hexo-asset-img
cd hexo-asset-img
npm init

img

编写插件 index.js

创建 index.js，编写代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const HexoLog = require('hexo-log');
const log = new HexoLog({ debug: false, silent: false });

function ignore(data) {
    var source = data.source;
    // 建议使用更稳健的判断后缀方法
    return source.endsWith('.md');
}

function action(data) {
    // 提取文件名的逻辑优化：直接用正则匹配或路径处理
    // 假设路径是 'postname/index.md' 或 'postname.md'
    var pathArr = data.source.split('/');
    var fileNameWithExt = pathArr[pathArr.length - 1];
    var fileName = fileNameWithExt.substring(0, fileNameWithExt.lastIndexOf('.'));

    // 修复正则：将 "g" 放在 RegExp 构造函数中
    // 修复逻辑：asset_img 标签通常只需要文件名
    var regExp = new RegExp("!\\[(.*?)\\]\\(" + fileName + '/(.+?)\\)', "g");
    
    data.content = data.content.replace(regExp, "{% asset_img $2 $1 %}");

    return data;
}

hexo.extend.filter.register('before_post_render', (data) => {
    // 原逻辑：ignore 返回 true (是md文件) 时取反，导致 md 文件反而不执行 action
    // 既然你是处理图片，应该在是 md 文件时才执行
    if (ignore(data)) { 
        action(data);
    }
}, 0);

本地测试插件

  • Hexo根目录下 package.json 中 dependencies添加一行 "hexo-asset-img": "^1.0.0",
  • 将 hexo-asset-img文件夹复制到 Hexo根目录下 node_modules文件夹下

注意：二者缺一不可，笔者试过不修改 package.json ，但没成功加载插件

重新生成文章

1
2
3
hexo clean
hexo g
hexo s # 本地预览