前言： 做技术的都知道，依赖越少，系统越稳。之前为了让 Markdown 图片在本地和线上都能显示，我尝试了各种第三方插件，结果却陷入了“版本冲突”和“路径诡异”的泥潭。 既然我们已经升级到了 Hexo 7，为什么不利用它强大的原生能力呢？今天，我们彻底卸载冗余插件，回归官方原生的图片渲染方案。

一、 环境准备：清理与配置

在开始写作之前，我们需要先调整好 Hexo 的“底层逻辑”，让它学会自己找图片。

1.1 第一步：卸载旧插件

必须把那个坏掉的、或者引起冲突的老插件删掉，防止它干扰官方渲染器。

在博客根目录终端执行：

1
npm uninstall hexo-asset-image

1.2 第二步：修改 _config.yml

打开博客根目录下的 _config.yml，在相应位置修改或加入以下配置，开启官方渲染器的“资源文件夹”支持：

1
2
3
4
5
6
7
# 1. 基础开关：让 Hexo 创建文章时自动生成同名文件夹
post_asset_folder: true

# 2. 渲染增强：告诉官方渲染器去同名文件夹找图
marked:
  prependRoot: true
  postAsset: true

二、 完整工作流演示 (Workflow)

配置好后，我们来模拟一次从零开始的真实写作过程。

2.1 第三步：创建新文章

我们在终端执行创建命令：

1
hexo new "魔改hexo:按钮及github代码小组件"

系统反馈： Hexo 会在 source/_posts/ 下生成两个内容：

  1. 文件：魔改hexo-按钮及github代码小组件.md
  2. 文件夹：魔改hexo-按钮及github代码小组件/（这就是该文章专属的资源文件夹）

2.2 第四步：放置图片

找到刚才生成的文件夹，将你的截图（例如 2.png）直接拖进去。 此时目录结构如下：

1
2
3
4
source/_posts/
├── 魔改hexo-按钮及github代码小组件.md
└── 魔改hexo-按钮及github代码小组件/
    └── 2.png

2.3 第五步：Markdown 写作

打开 .md 文件插入图片。

  • ❌ 绝对禁止的写法： ![](F:\myblog\source\...) (本地绝对路径，上传必挂) ![](魔改hexo-按钮及github代码小组件/2.png) (原生模式下，不需要带文件夹名)

  • ✅ 正确的原生写法：

    1
    ![图片描述](2.png)

    (解释：因为开启了 postAsset: true，Hexo 渲染时会自动去同名资源文件夹里寻找 2.png)

2.4 第六步：清理与发布

最后，执行三连击确保配置生效：

1
hexo clean && hexo g && hexo s

访问 http://localhost:4000，图片即可完美显示。

三、 总结

通过这次改造，我们实现了以下效果：

  1. 零插件依赖：不再担心插件作者弃坑或版本不兼容。
  2. 结构清晰：文章与图片“同生共死”，删掉文章 md 时，对应的图片文件夹也易于清理。
  3. 兼容性强：这是 Hexo 官方推荐的标准方式，未来升级无缝衔接。

Less is More.