Typora是一款很好用的markdown语法编辑器，我希望使用Typora写好博客后，直接通过hexo部署到个人博客主页上面去。但有个问题是，如果markdown文件里面有图片路径时，在部署到hexo上时需要重新修改图片路径，否则会有问题。每次手动修改显然很麻烦，因此需要看看hexo是否有比较友好的支持。
Typora本地插入图片的路径有两种方式：一个是绝对路径，一个是相对路径（相对于当前文件所在的路径）。
Hexo通过hexo-renderer-marked插件实现了对markdown语法的支持，其中默认插入图片的方式为  ，它是一个相对路径（相对于Hexo工作目录下的 source 文件夹）的方式。
首先，如果Typora使用本地的绝对路径插入图片，那么在执行 hexo g 时需要将本地的绝对路径转换成对应的相对路径，这个目前暂未看到有相关的插件实现。
其次，如果Typora使用相对路径插入图片，问题在于Typora和Hexo所相对的路径是不一致的。对此，Hexo提供了一个更组织化的方式来管理资源，可以通过将 _config.yml 配置文件中的 post_asset_folder 选项设置为 true 来打开。
1 | # _config.yml |
该功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹名与这个文章文件名相同。将所有与你的文章有关的资源（如图片）放在这个关联文件夹中之后，你可以通过相对路径来引用它们。如，我使用 hexo new mytitle 创建了一篇文章 mytitle.md ，会同时在该文章文件所在的路径上创建文件夹 mytitle/，我们在该文件夹里面添加图片 mytitle/my.png，这时我们在 mytitle.md 文件中插入该图片的方式为  就可以了。
跟Typora很接近了，但Typora需要的是 {% asset_img my.png %} （此处显示有个bug，Hexo自动将满足 mytitle/my.png 格式的图片路径转换成Hexo图片标签插件了，而实际上这里我用了反引号，按理说不应该转义的。。。），即
1 | {% asset_img "my.png" "" %} |
因此还需要一步转换：mytitle/my.png -> my.png 。幸运的是，Hexo提供了一款插件 hexo-image-link 来实现这一步转换，在Hexo根目录下执行 npm install hexo-image-link --save 安装该插件即可，无需额外的配置。
至此，问题解决！总结下来操作上只需要做两个步骤即可：
- 安装插件
hexo-image-link
1 | npm install hexo-image-link --save |
- 打开Hexo资源管理配置开关
1 | # _config.yml |
归纳总结
修改
_config.yml中的post_asset_folder: true$ npm install hexo-image-link –save
如果 npm下载比较慢的话，尝试 cnpm下载
- $ npm install -g cnpm –registry=https://registry.npm.taobao.org
- $ cnpm install hexo-image-link –save
修改md文件中的图片路径
1
