实现步骤
第一步:修改项目根目录下的_config.yml
文件参数post_asset_folder
值为true
。
# 开始使用本地静态资源
post_asset_folder: true
第二步:安装插件hexo-asset-image
。
# 在项目根目录下执行
npm install https://github.com/xcodebuild/hexo-asset-image.git --save
完成上述配置后,在使用命令hexo new post
新建文章时,将会在source/_posts
目录下创建一个与文章同名的目录。
hexo new post "测试文章"
代码语言:javascript复制|____scaffolds
|____source
| |_____posts
| | |____测试文章.md
| | |____测试文章 # 与文章同名的目录,用于保存在文章中引入的本地图片资源
|____themes
如上,新建“测试文章.md”时,将会在_posts
目录下创建同名文件夹“测试文章”,在“测试文章.md”文件中需要引入的图片文件只要放在目录“测试文章”下即可。
图片引用方式:
# 引用图片的时候一定要带上目录名称作为路径
![本地图片](测试文章/本地图片.jpg)
使用该方式引用的图片既可以在本地预览,正式发布之后也能正常显示。
原理说明
显然,在hexo中引入图片的方式稍微有点繁琐,即:必须在_post
目录下新建一个与文章同名的目录,然后将需要引用的图片文件都放在该目录中。
还好使用插件hexo-asset-image
能够帮助我们自动创建图片目录(每次都会自动创建,如果在文章中不需要引用图片资源,可以手动将该目录删除)。
那么,为什么需要将文章引用的图片放置在与文章同名的目录呢?
原因是:在执行hexo g
命令的时候会将文章转换为一个index.html
文件,该文件路径为public/年/月/日/文章名称/index.html
,同时也会将文章中引用的图片文件拷贝到与index.html
文件相同的目录中。
另外,转换后的index.html
文件保存路径中有一个年/月/日
,这是在项目配置文件_config.yml
的permalink
参数中配置的,默认值为:
permalink: :year/:month/:day/:title/
【参考】 https://leay.net/2019/12/25/hexo/ Hexo 引用本地图片以及引用本地任意位置图片的一点思路 https://blog.csdn.net/LiuChengYu520/article/details/82657407 hexo-asset-image使用方法 https://blog.glwsq.cn/2019/10/22/41cc6f18/ hexo-asset-image【让本地和网页都正常显示图片】 http://www.itomtan.com/2017/09/29/the-problem-when-use-post-asset-folder/ Hexo开启post_asset_folder后, 安装hexo-asset-image,不起作用的问题