Hexo博客插入图片的实践

笔者在昨晚书写博客文章的时候，产生了在博客文章中插入图片的需求。经过了多番尝试，笔者最后成功使用了markdown语法向博客文章插入图片，并能够正常添加图片注释。本文将从hexo的资源文件夹机制谈起，并推荐一种笔者使用的方式。感谢WTN提供的相关帮助。

全局资源文件夹与文章资源文件夹

全局资源文件夹

资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。
但是，当制作教程博客等文章时，可能会使用大量图片。这种方式可能会造成文件管理的混乱，使得博客可维护性变差。笔者推荐使用文章资源文件夹来管理图片资源。

文章资源文件夹

Hexo提供了一种在使用hexo new [layout] <title>命令创建新博客文章时同时在source/_post目录下创建博客文章同名文件夹的功能。这个文件夹就是该文章的文件资源文件夹。
要开启此功能，您需要打开_config.yml，并进行如下修改。

yaml

post_asset_folder: true

推荐的一种图片插入方式

笔者在尝试官方给出的一些插入方式后，认为使用 Markdown 嵌入图片效果最佳，但由于hexo本身的特性，使用该功能需要一些设置。下面将详细介绍如何使用该方法插入图片。
首先需要对_config.yml进行配置：

yaml

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

配置完成之后，资源图片将会被自动解析为其对应文章的路径。
例如： image.jpg 位置为 /2020/01/02/foo/image.jpg ，这表示它是 /2020/01/02/foo/ 文章的一张资源图片， ![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg">。
这样配置之后，如果您要在文章某个位置引用图片，只需将图片复制到相应文章资源文件夹，然后在文章相应位置添加![图片注释](文件名)即可。这种方式使用了大众较为熟悉的markdown语法，而且添加图片注释较为容易，在某些主题中，插入的图片还会默认居中，较为美观，笔者比较推荐。缺点是由于使用了奇怪的相对路径，在使用VS CODE预览功能时可能不会解析出图片。