51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Hexo引入本地图片

实现步骤 {#实现步骤}

第一步:修改项目根目录下的 _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 "测试文章" |

复制

|---------------------|--------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | |____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.ymlpermalink 参数中配置的,默认值为:

|-----------|----------------------------------------------| | 1 | permalink: :year/:month/:day/:title/ |


本文转载博主「编程随笔」文章:
原文链接: 在Hexo中引入本地图片的实现-腾讯云开发者社区-腾讯云 (tencent.com)

赞(0)
未经允许不得转载:工具盒子 » Hexo引入本地图片