1.9 hexo 实现本地图片加载

摘要

本文记录了1.9 hexo 实现本地图片加载,要知道原作官方提供的hexo-asset-image,根本不能满足自己的需要,所以这里是基于原作的代码进行修改实现,原作并未其提供的代码做出解释说明,本文将对更改后能实现本地图片加载的代码进行解释,并有针对性的对后来遇到问题的,或者可以给你们提供二次修改说明的解释并提醒。

文章同步于: 我的gitbook

hexo-asset-image,这是原作者提供的代码,有一个特别致命的问题,是每次hexo g,后,需要手动将图片一张张对应复制到public文件夹中对应你的博文对应生成的文件夹的路径下才可以实现,本地图片显示。那么问题来了,我如果写了很多博文,需要每次复制如此多的图片到不同博文对应生成的文件夹中去。太麻烦了

  • 若,我是写的书的格式,分章分节,一章我有10几节,那一个文件一个文件复制太麻烦了。

一、要解决的问题

  • 我们要解决既要加载本地图库在我们的站点显示

  • 又不想一个博文一个博文区分开了分别拷贝对应图片到public文件夹中

假设:如果我们能够把每章节的很多文章的不同图片放到该章节的图库文件夹中,这样每章就一个图库文件,我们把图库(image1文件夹)直接复制到(source文件夹下),然后直接hexo clean && hexo g 就可以,这样不用手动添加文件到问文件夹中。

二、操作

2.1 下载原作者的文件,然后修改原文件代码

npm install hexo-asset-image --save

2,2 原始作者的代码如下(还未经过博主修改前的代码)

2.3 修改原作代码

2.3 修改你站点文件根目录的_config.yml文件的配置信息

找到如下条,将默认的false改为true,注意_config.yml不是你的主题文件家中的文件

2.4 我的博文目录格式如下图片所示:

hexo_我的目录

2.5 将你的的博文直接放到你站点根目录下的:source->_post文件夹下,如下图

hexo_我的目录

2.6 将你的所有章节的图库文件夹直接放到source文件夹中即可

如图:

hexo_我的目录

三、Hexo手机页面优化

文件路径

修改mobile-slider.styl文件内容:

Last updated

Was this helpful?