Hexo使用添加本地图片不用图床 的完美解决方案
1 问题
图床非常不稳定,现在新浪图床已经打不开了。所以最安全的方法还是放在自己的站点。
早期的方法是放在source/images
文件夹中。然后通过类似于 ![](/images/image.jpg)
的方法访问它们。这种缺点是无法在本地编辑器中查看。因为路径是相对source的,而在编辑md文章时候,md文章所在目录可没有/images。
在 hexo 2.x 时出现的插件,后来被吸纳进 hexo 3 core ,用法的介绍见 资源文件夹 | Hexo 。比较尴尬的是,这种方法直接放弃了 markdown 原来的语法。markdown 本来有插入图片的语法不好好支持,专门用一个新的语法来插入本地图片,让我这种强迫症不太能接受。
2 解决方案
首先确认 _config.yml 中有 post_asset_folder:true
在 hexo 目录,执行
npm install https://github.com/CodeFalling/hexo-asset-image --save
假设在
MacGesture2-Publish
├── apppicker.jpg
├── logo.jpg
└── rules.jpg
MacGesture2-Publish.md
这样的目录结构(目录名和文章名一致),只要使用 ![logo](logo.jpg)
就可以插入图片。
生成的结构为
public/2015/10/18/MacGesture2-Publish
├── apppicker.jpg
├── index.html
├── logo.jpg
└── rules.jpg
同时,生成的 html 是
<img src="/2015/10/18/MacGesture2-Publish/logo.jpg" alt="logo">
而不是愚蠢的
<img src="logo.jpg" alt="logo">
而且在主页,文章页都可以显示。
参考:
在 hexo 中无痛使用本地图片 - jianhuicode - 博客园
打赏