一个方便的在hexo博客中插入图片的方法

发表于 更新于 分类于 阅读次数： 本文字数： 1.2k
配置 Typora 自动保存图片，并让本地预览与 Hexo 部署同时正常显示。

这套博客约定把所有文章图片放在 source/images，文章保存在 source/_posts。Typora 使用相对路径预览，Hexo 构建时自动转换为站点根路径。

不需要为每篇文章建立单独的资源目录，也不需要手工修改每张图片的路径。

Typora 设置

新文章模板已经包含下面这项配置：

1
typora-copy-images-to: ../images

首次使用时，在 Typora 的“设置 -> 编辑器 -> 图像插入”中：

  1. 开启“允许复制图片到指定文件夹”。
  2. 插入本地图片时选择“复制图片到指定文件夹”。
  3. 开启“优先使用相对路径”。
  4. 关闭“添加 ./ 前缀”。

之后直接粘贴截图或拖入图片即可。Typora 会把文件复制到 source/images，并插入类似下面的 Markdown：

1
![说明](../images/image-20250328124001848.png)
image-20250328124001848

Hexo 设置

Typora 中的 ../images/xxx.png 是相对于 source/_posts 的正确本地路径，但文章部署到 /posts/:abbrlink/ 后需要使用 /images/xxx.png。

项目中的 scripts/normalize-image-paths.js 会在内存中自动完成转换，源 Markdown 仍保持 Typora 可预览的相对路径。

Hexo 配置保持如下：

1
2
3
4
5
6
7
8
9
10
url: https://www.incrediblej.cool
root: /

# 修正资源路径
marked:
  prependRoot: true  # 自动为相对路径添加根目录
  postAsset: true    # 处理资源文件

# 关闭自动资源文件夹（避免冲突）
post_asset_folder: false

转换脚本位于站点自己的 scripts 目录，不修改 NexT 主题：

1
2
3
4
5
6
7
hexo.extend.filter.register('before_post_render', data => {
  data.content = data.content.replace(
    /(["'(])\.\.\/images\//g,
    '$1/images/'
  );
  return data;
});

它同时兼容图片懒加载、Fancybox 和 Open Graph 图片地址。

此时我们尝试新建一个博客并插入图片

1
npm run new -- "test"

如果看到图片路径为 ../images/...，证明 Typora 配置成功：

image-20250328125559774

然后在本地服务器测试效果：

1
2
3
npm run clean
npm run build
npm run server

打开 http://localhost:4000/，确认正文、图片、目录和代码块都正常后，再运行 npm run release 部署。