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
安装该插件即可,无需额外的配置。
至此,问题解决!总结下来操作上只需要做两个步骤即可:
安装插件
hexo-image-link
npm install hexo-image-link --save
打开Hexo资源管理配置开关
# _config.yml post_asset_folder: true
最后,上一个例子,在本篇博客最后编辑一行,
// source/_posts/2021/05/05/Hexo上markdown图片路径与Typora保持一致.md
![](Hexo上markdown图片路径与Typora保持一致/古剑3.jpg)
接下来你可以看到本篇博客显示如下图片,