使用Hexo的同学都知道,Hexo的博客使用本地图片真的是非常麻烦,经常显示不出来,虽然本站最开始都固定死位置的,即本地位置和上传到服务器后位置不一样,文档里面地址适配具体位置,时间长了根目录下面的图片文件夹图片越来越多,也不好管理。鉴于博客本身生成后产生了一个目录,应该是可以使用的。
使用的问题
先简单说下Hexo博客图片的问题,当我们写博客的时候,如果不是绝对的网址方式,如图床等方式,那么我们在引用本地图片的时候,对应的代码大概如此
![comment](xxx.png) |
但是这个图片经过Hexo生成之后,并不会将图片拷贝到最终目录,而且如果图片没有一定的存放规则,最终会非常难管理。
解决方案
首先参考了官网 https://hexo.io/zh-cn/docs/asset-folders.html
里面有解决方案,但是这种不是markdown的语法的东西非常恶心,弃之。
继续搜索,发现 hexo-asset-image
这个插件是实现这个功能的,那么直接通过NPM安装这个插件,总结一下,首先启用资源拷贝功能,在 _config.yml
中,修改
post_asset_folder: true |
然后在使用的时候,首先需要通过 hexo n xxx
创建新博客的时候,会创建同名 xxx
的目录,相关的资源文件放里面即可,当然这个目录也可以手动创建,最终大概目录结构如下
./test.md |
在博客中引用的时候,就按正常的引用方式引用即可,如
![](test/bg.png) |
但是直接这么实现,我发现并没有成功,然后参考 https://www.jianshu.com/p/3db6a61d3782
原来是兼容性问题,卸载刚安装的插件,安装参考中作者的修改版本
npm uninstall hexo-asset-image |
然后基本OK了,然后F12查看了地址,虽然可以访问了,但是地址却是带域名方式的,通用性不好,查看了作者的实现逻辑,确认是字符串切割问题,然后在 _config.yml
中修改网站地址从 https://xilixili.net
修改为 xilixili.net
,不带 http(s) 头,重新生成就好了。
本站遗留问题
前面博客 网页自适应显示WebP图片 https://xilixili.net/2017/02/07/webp/ 中对WebP的支持实现了特殊的处理,因此这个插件还需要再特殊处理一下,在 Github 上 fork 源码修改一下,在原代码处理 img
标签的后面复制一份相同的处理方法,进行对应的修改,如下
$('source').each(function() { |
也可以直接安装我修改后的版本,支持 img
和 source
标签等
npm install https://github.com/rangerlee/hexo-asset-image --save |