Typora与Hexo的图片根目录设置

前言

用了Hexo很长一段时间,一直使用post_asset_folder: true以及插件hexo-asset-image,但每次需要单独保存图片还是很麻烦,研究了很久,终于实现复制图片自动保存到对应文件夹且不需要修改图片路径的方法。

参考资料:https://blog.csdn.net/m0_43401436/article/details/107191688

设置步骤

Typora偏好设置

image-20221230182231829

这个设置会使复制到md文件中的图片自动保存至同一目录下的同名文件夹下,与Hexo内的post_asset_folder一致。

post_asset_folder属性设置

将Hexo博客根目录内_config.yml文件内post_asset_folder设置为true

image-20221230182535710

这一步的设置会在hexo new “post”时创建一个同名文件夹,复制到typora中的图片会自动以相对路径的形式保存在该文件夹内。

插件下载

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

插件的作用在于hexo generate生成静态网页资源时自动由相对路径生成绝对路径,但要求md文件中必须使用相对路径,此时的md中复制的图片目录为/同名文件夹/图片名,多了个文件夹路径。

图片文件根目录设置

打开/blog/scaffolds/post.md,该文件为每次hexo新建md文件时的格式,包括title、date等属性,在该属性中加入typora-root-url: {{ title }},使hexo新建的md文件自动以同路径下的同名文件夹为图片根目录。

image-20221230205545625

小结

经过以上设置,在每次使用hexo生成新文章时,typora会自动将md文件的图片文件根目录设置为同名文件夹,此时复制到md文件内的图片会自动以相对路径/图片名的形式存储进同名文件夹内,此时使用hexo进行资源的整理、部署时,asset-image插件会自动根据文件路径生成静态页面,不需要对图片路径再度进行修改。


Typora与Hexo的图片根目录设置
http://example.com/2022/12/30/Typora与Hexo的图片根目录设置/
作者
Magnesium
发布于
2022年12月30日
许可协议