关于hexo中图片的插入与引用

• 各个文件夹的作用：

  1. node_modules文件夹中的内容是整个hexo的依赖包，这个一般情况下不需要去做任何增删改。
  2. public文件夹其实是当我们执行hexo generate命令之后由hexo根据我们的主题以及文章内容生成的一个文件。打开之后可以看到对应的时间我们写的博客内容。
  3. scaffolds其实就是脚手架的意思，有些人也称之为模板，其实就是我们新生成一篇文章时从哪个模板来生成。这里面默认只有三个模板，draft, page, post，我们生成文章是可以指定采用哪个模板。
  4. source是资源文件夹包含所有建立的文件和themes子文件夹是主题文件夹。
  5. _config.yml文件，这个其实是我们整个主目录的配置，只需要更改少量的键值对内容就可以对整个主目录和网页进行变更了。

• hexo generate执行过程

  执行后hexo根据source中的_post文件夹中的markdown文件生成html文件放入public中以时间命名的文件夹里（例如：2018/10/17）其余文件被copy到public文件夹中。

• _config.yml文件中post_asset_folder 是什么？

  资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

  对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml文件中的 post_asset_folder 选项设为 true 来打开。

  _config.ymlpost_asset_folder: true

  当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，当输入hexo generate后，hexo会将该资源文件夹中的所有内容都放入public中以时间命名的文件夹里（例如：2018/10/17），与index.html文件在一起，可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

  图片插入方法

  图片插入方法有两种，一是通过标签插件，例如：

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

  二是直接通过markdown语法来插入。

  其中通过标签插件插入图片可直接用绝对路径，具体方法参见标签插件

  在此不赘述，下面重点讲通过markdown语法来插入。

  方法有两种：

  其一：post_asset_folder 设置为false代表资源文件夹功能未开，此时可以将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。这种方法的原理是，执行 hexo g 之后，hexo会将source文件夹中的所有文件copy到public中（除了_post文件夹）而相对地址的root目录默认为public ，主页的index与文章页的index生成时都不会改变相对地址，所以此时主页和文章详情页都可以看到图片。

  其二：post_asset_folder 设置为true 时，此时代表资源文件夹功能已开，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。此时将所有与你的文章有关的资源放在这个关联文件夹中之后，当输入hexo generate后，hexo会将该资源文件夹中的所有内容都放入public中以时间命名的文件夹里（例如：2018/10/17），与index.html文件在一起。

  做法：可以直接通过图片名来插入图片。

  原理：此时hexo根据markdown生成HTML文件时，会自动在HTML文件中你定义的图片路径之前加入 /时间/name/ （例如：/2018/10/17/关于在hexo中图片的插入与引用/），此时即可直接访问图片。