Hexo引入本地图片

Calyee2023-09-232024-11-18

实现步骤

第一步：修改项目根目录下的_config.yml文件参数post_asset_folder值为true。

1 2	# 开始使用本地静态资源 post_asset_folder: true

第二步：安装插件hexo-asset-image。

1 2	# 在项目根目录下执行 npm install https://github.com/xcodebuild/hexo-asset-image.git --save

完成上述配置后，在使用命令hexo new post新建文章时，将会在source/_posts目录下创建一个与文章同名的目录。

1	hexo new post "测试文章"

复制

|____scaffolds
|____source
| |_____posts
| | |____测试文章.md
| | |____测试文章 # 与文章同名的目录，用于保存在文章中引入的本地图片资源
|____themes

复制

如上，新建“测试文章.md”时，将会在_posts目录下创建同名文件夹“测试文章”，在“测试文章.md”文件中需要引入的图片文件只要放在目录“测试文章”下即可。图片引用方式：

1 2	# 引用图片的时候一定要带上目录名称作为路径 ![本地图片](测试文章/本地图片.jpg)

复制

使用该方式引用的图片既可以在本地预览，正式发布之后也能正常显示。

原理说明

显然，在hexo中引入图片的方式稍微有点繁琐，即：必须在_post目录下新建一个与文章同名的目录，然后将需要引用的图片文件都放在该目录中。还好使用插件hexo-asset-image能够帮助我们自动创建图片目录（每次都会自动创建，如果在文章中不需要引用图片资源，可以手动将该目录删除）。

那么，为什么需要将文章引用的图片放置在与文章同名的目录呢？原因是：在执行hexo g命令的时候会将文章转换为一个index.html文件，该文件路径为public/年/月/日/文章名称/index.html，同时也会将文章中引用的图片文件拷贝到与index.html文件相同的目录中。另外，转换后的index.html文件保存路径中有一个年/月/日，这是在项目配置文件_config.yml的permalink参数中配置的，默认值为：