hexo与Typora插入图片的解决方法
hexo与Typora插入图片的解决方法
小包子问题描述
众所周知，在md文件中插入图片的语法为 ![]()。
其中方括号是图片描述，圆括号是图片路径。
一般来说有三种图片路径，分别是相对路径，绝对路径和网络路径。
网络路径（图床）
所谓的网络路径就是直接引用网上的图片，直接复制图片的网络地址，放在圆括号中就完事了。
这种方式十分的方便，但是也存在一定的问题：
- 图片失效导致无法加载；
- 打开网页后要再请求加载图片；
- 原网站限制，如微信公众号的图片会变得不可见等。
绝对路径
绝对路径是图片在计算机中的绝对位置。
相对路径
相对路径是相对于当前文件的路径。
当采用相对路径时，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 /source/images 文件夹中。然后通过类似于  的方法访问它们。
对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组织化的方式来管理资源。你需要将 _config.yml 文件中的 post_asset_folder 选项设为 true 来打开文章资源文件夹。
1 | post_asset_folder: true |
当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹在 /source/_posts文件夹中。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。
例如新建一个博客名为 1.md，相应的会生成一个 1文件夹，在该文件夹中存放图片 image.jpg。
在Typora编辑器中打开 1.md，使用 能在编辑器中正常引用该图片。
在hexo网页中，却无法使用 ![]()的相对路径的方法进行引用，本人尝试了很多种相对路径的写法都无法实现。
原因可能是 _posts文件夹中的文件在构建html时，其中的图片地址会发生改变，如果图片放在 /source/其他文件夹中，图片正常显示。
解决方法
此时如果要插入该图片，可以用以下几种方法：
使用相对路径引用的标签插件
1 | {% asset_path slug %} |
正确的引用该图片方式是使用下列的标签插件：
{% asset_img image.jpg This is an image %}
使用 hexo-asset-image/hexo-asset-img插件
（较为复杂，本人尝试未成功，可自行搜索）
使用hexo-renderer-marked插件（推荐）
安装方法
用 npm install hexo-renderer-marked命令安装（新版hexo已集成，无需安装）
使用方法
在 _config.yml中更改配置如下：
1 | post_asset_folder: true |
第一行在前文已修改，后三行需要自行添加到第一行后。
此时在hexo网页中，使用 的相对路径的方法可成功进行引用。
（注意：路径中不能有空格）
方法完善
注意到，如果使用 的相对路径在typora本地无法正确引用图片（typora需要使用 ）
在文章的front-matter中添加一行 typora-root-url: 文章标题。那么在typora中所有的路径前都会加上 文章标题/。（image.jpg->1/image.jpg）
进一步可以在 scaffolds文件夹中的文章模板中添加 typora-root-url: {{title}}这样每次执行 hexo new命令新建文章的时候，会在front-matter中自动添加该配置。
hexo与Typora的进一步联动
文章资源文件夹中引用图片，前提是先将图片放入到文章资源文件夹，如果图片数量众多的话，一张一张的放很影响效率。
使用Typora可以在复制图片到文章中时，自动将图片复制到指定文件夹，并修改成对应的路径。
设置方法
找到Typora的偏好设置->图像，进行如下设置
./${filename}设置与hexo的文章资源文件夹设置相对应，至此写博客时插入图片只需将图片复制（拖动）到文章中即可。
实际工作流
方法一：使用 hexo new <layout> "filename"指令生成md文件（同时生成资源文件夹），然后使用typora打开md文件进行书写。
方法二：在 /source/_posts新建md文件，然后使用typora打开md文件进行书写，在插入图片时会自动生成资源文件夹。
