Wonder4 Life

在 Hexo 中使用本地图片

博客配图采用图床是个不错的解决办法,不过还要注册账号,免费的又担心遇到问题。所以这里想尝试在 Hexo 中使用本地图片。

使用本地图片最舒服的方式还是编辑器引用相对路径,同时可以在生成网页时自动匹配。上网搜到了解决方案:

CodeFalling/hexo-asset-image

修改站点配置文件

全局 _config.yml 中打开 post_asset_folder:true 选项

安装 node 模块

在 hexo 目录,执行:

1
$ npm install https://github.com/CodeFalling/hexo-asset-image --save

使用

以此篇文章为例,创建文章:

1
$ hexo n post "Using Local Image in Hexo"

会在 _post 目录下生成 md 文件和同名目录,将图片拷贝到目录下:

1
2
3
4
.
├── Using-Local-Image-in-Hexo
│   └── nasa.jpg
└── Using-Local-Image-in-Hexo.md

只要使用 ![nasa](Using-Local-Image-in-Hexo/nasa.jpg) 就可以插入图片

nasa

生成的网页结构为:

1
2
3
public/2017/02/20/Using-Local-Image-in-Hexo
├── index.html
├── nasa.jpg

html 链接为:

1
<img src="/2017/02/20/Using-Local-Image-in-Hexo/nasa.jpg" alt="nasa">

Reference

在 hexo 中无痛使用本地图片

SmugMug Films: Astronaut Photography with Don Pettit