Hexo博客图片引入指北

突然发现博客的图片不能正常显示，于是去查查看是什么原因。在Google一番后，发现官方文档里就有现成的解决方案：查看官方文档
在此也记录一下我的实现经过：
官方给了三种可供选择的方案，第一种就是给不怎么使用图片等资源的用户的：

最简单的方法就是将图片等资源文件放在 source/images 文件夹中。
然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

但博客里怎么能没有花花绿绿（sao）的图片呢？特别是对于我这样的图片使用重度患者来说这显然是不现实的。所以接下来还有第二种方法：
首先，可以将根目录下的 config.yml 文件中的 post_asset_folder 选项设为 true 来打开：

//_config.yml
post_asset_folder: true

当资源文件管理功能打开(也就是设置post_asset_folder: true)后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时就会自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。那又如何进行相对路径引用呢，官方也介绍了方法：

相对路径引用的标签插件

随着Hexo 3 的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源：

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

其他的都不重要，关键就是图片的引入。注意：当打开文章资源文件夹功能后，若我们把一个 example.jpg 图片放在了我们对应的资源文件夹中，然后通过使用相对路径的常规 markdown 语法 ![](example.jpg) ，它将 不会 出现在首页上。
正确的引用图片方式是使用下列的标签插件而不是 markdown ：

{% asset_img example.jpg This is an example image %}
/*
    上面的引入方式类似于：![This is an example image](example.jpg)
*/

通过这种方式，图片将会同时出现在文章和主页以及归档页中。
上面的方法可行且也挺方便的，但就是不美观，毕竟Markdown不会解析{% asset_img example.jpg This is an example image %}为图片形式而是直接解析为文字，所以官方也提供了第三种方案，就是：

利用插件来实现用markdown图片引入的形式引入图片：

该插件的github链接：hexo-renderer-marked。
使用起来也挺方便的，首先先去安装一下该插件：
可用npm安装：

npm install hexo-renderer-marked --save

或者用yarn：

yarn add hexo-renderer-marked

安装完成之后在根目录下的 config.yml 文件中进行相关配置：

//_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以用![This is an example image](example.jpg)的形式来愉快地引入图片了。
不过还是要注意，通过这种方式引入的图片在编写markdown文件时是不会显示的，但我们可以在编写时通过：![This is an example image](./资源文件夹/example.jpg)，先加入资源文件夹目录让图片正确显示，等编写完后再用替换将./资源文件夹/替换为空字符串’’。