为 Hexo 实现快速图片和统一全局图片目录的解决方案

问题

想在 Hexo 中设置一个统一的图片文件夹，又希望能够用markdown格式轻松引用图片文件夹中的链接？不行。因为 Hexo 默认的图片处理机制要求每篇文章有独立的资源文件夹，使用 {% asset_img %} 标签引用。我需要的是全局图片目录，直接用 ![pic] (pic1.jpg) 语法，但是我又想把图片本身都放在同一个目录里。

解决方案

创建一个自定义过滤器，在渲染前自动转换图片路径。完成后，可以轻松地使用![普通图片] (pic1.jpg)方法插入图片，同时还可以指定图片的显示大小。

1. 创建脚本文件

在项目根目录创建 scripts/image-filter.js：

hexo.extend.filter.register("before_post_render", function (data) {
  // 处理带尺寸的图片语法：![alt|width](image.jpg) 或 ![alt|width|height](image.jpg)
  data.content = data.content.replace(
    /!\[([^|\]]*)\|(\d+)(?:\|(\d+))?\]\((?!http|\/|#)([^)]+)\)/g,
    function (match, alt, width, height, src) {
      let imgTag = `<img src="/images/${src}" alt="${alt}"`;
      if (width) imgTag += ` width="${width}"`;
      if (height) imgTag += ` height="${height}"`;
      imgTag += ">";
      return imgTag;
    },
  );

  // 处理带引号的图片路径：![alt]("image with spaces.jpg")
  data.content = data.content.replace(
    /!\[([^\]]*)\]\("([^"]+)"\)/g,
    "![$1](/images/$2)",
  );

  // 处理普通的图片路径：![alt](image.jpg)
  data.content = data.content.replace(
    /!\[([^\]]*)\]\((?!http|\/|#|"|\s)([^\s)]+)\)/g,
    "![$1](/images/$2)",
  );

  return data;
});

2. 创建图片目录

在 source/ 下创建 images/ 目录（不用下划线，避免被过滤）。

3. 使用语法

![普通图片](pic1.jpg)
![带尺寸|300](pic2.jpg)
![宽高都有|300|200](pic3.jpg)
![含空格]("my pic.jpg")

原理

过滤器利用 Hexo 的 before_post_render 钩子，参考内置 img 标签的尺寸处理逻辑，在 Markdown 转 HTML 前替换路径。

注意事项

图片目录不要用下划线开头
含空格的文件名需要用引号包围
过滤器按优先级处理：尺寸语法 → 引号路径 → 普通路径

完成。

Notes

这个方案基于 Hexo 的过滤器系统实现，直接生成 HTML 标签确保尺寸属性正确应用。相比修改核心代码或使用插件，这种方式更轻量且不影响现有功能。

站内搜索