Hexo 和 Typora 的完美图片工作流

我写作是用 Typora 编辑器来写 Markdown，再让 Hexo 框架的 Markdown 渲染器渲染成 HTML。

Hexo 对于图片的存放要求是这样的：在 Markdown 文件的同级下创建一个同名的目录，并在该目录下存放图片。这样写很方便，只需要在 Markdown 文件里写 ![](图片名.类型)，程序就会自动从同名目录里找到指定的图片。

但如果我想要在 Typora 里直接粘贴图片，它通常会被拷贝到其他位置，我再灰溜溜去手动挪动图片的位置。

幸运的是，我最近发现一个法子可以解决这个问题，让我的写作体验更上一层楼~ 这个方案的核心是把 Typora 的图片保存逻辑（它实际把文件复制到哪里）和路径预览逻辑（它如何理解 ![](image.png) 这行代码）分离开。

1. 在 Typora 中，进入 设置 > 图像。

2. 在 插入图片时…… 下拉菜单中，选择 复制图片到指定路径。

3. 在 路径 输入框中，填入以下这行代码：

   plaintext复制

   ./${filename}/

4. 勾选 优先使用相对路径。

现在，当你在一篇名为 hello-world.md 的文章中粘贴图片时，Typora 会自动将该图片复制到 hello-world/ 文件夹中。不过插入的路径还是 ![](hello-world/image.png)。要解决这个问题，我们只需要在文章最顶部的 YAML Front Matter 区域里添加一行：

yaml复制

---
typora-root-url: ./hello-world
---

这个路径必须和这篇文章的文件名完全一致。而在 Hexo，你只需要在 scaffolds 里添加一个：

yaml复制

---
typora-root-url: ./{{ title }}
---

就可以每次用 hexo new 命令创建 Markdown 文件时，自动添加这个键值对。