Hexo上markdown图片路径与Typora保持一致


Typora是一款很好用的markdown语法编辑器,我希望使用Typora写好博客后,直接通过hexo部署到个人博客主页上面去。但有个问题是,如果markdown文件里面有图片路径时,在部署到hexo上时需要重新修改图片路径,否则会有问题。每次手动修改显然很麻烦,因此需要看看hexo是否有比较友好的支持。

Typora本地插入图片的路径有两种方式:一个是绝对路径,一个是相对路径(相对于当前文件所在的路径)。

Hexo通过hexo-renderer-marked插件实现了对markdown语法的支持,其中默认插入图片的方式为 ![](/images/image.jpg) ,它是一个相对路径(相对于Hexo工作目录下的 source 文件夹)的方式。

首先,如果Typora使用本地的绝对路径插入图片,那么在执行 hexo g 时需要将本地的绝对路径转换成对应的相对路径,这个目前暂未看到有相关的插件实现。

其次,如果Typora使用相对路径插入图片,问题在于Typora和Hexo所相对的路径是不一致的。对此,Hexo提供了一个更组织化的方式来管理资源,可以通过将 _config.yml 配置文件中的 post_asset_folder 选项设置为 true 来打开。

# _config.yml
post_asset_folder: true

该功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹名与这个文章文件名相同。将所有与你的文章有关的资源(如图片)放在这个关联文件夹中之后,你可以通过相对路径来引用它们。如,我使用 hexo new mytitle 创建了一篇文章 mytitle.md ,会同时在该文章文件所在的路径上创建文件夹 mytitle/,我们在该文件夹里面添加图片 mytitle/my.png,这时我们在 mytitle.md 文件中插入该图片的方式为 ![](my.png) 就可以了。

跟Typora很接近了,但Typora需要的是 {% asset_img my.png %} (此处显示有个bug,Hexo自动将满足 mytitle/my.png 格式的图片路径转换成Hexo图片标签插件了,而实际上这里我用了反引号,按理说不应该转义的。。。),即

![](mytitle/my.png)

因此还需要一步转换:mytitle/my.png -> my.png 。幸运的是,Hexo提供了一款插件 hexo-image-link 来实现这一步转换,在Hexo根目录下执行 npm install hexo-image-link --save 安装该插件即可,无需额外的配置。

至此,问题解决!总结下来操作上只需要做两个步骤即可:

  1. 安装插件 hexo-image-link

    npm install hexo-image-link --save
  2. 打开Hexo资源管理配置开关

    # _config.yml
    post_asset_folder: true

最后,上一个例子,在本篇博客最后编辑一行,

// source/_posts/2021/05/05/Hexo上markdown图片路径与Typora保持一致.md
![](Hexo上markdown图片路径与Typora保持一致/古剑3.jpg)

接下来你可以看到本篇博客显示如下图片,


文章作者: algorithmofdish
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 algorithmofdish !