如何在Hexo中无痛地使用本地图片

在Hexo中使用本地图片是件非常让人痛苦的事情,因为在Markdown里面图片地址永远不能和最后生成的网页保持一致。一开始,我打算Bmob来进行图片管理,但是发现这样是不是太麻烦呢?

搜索了下,发现Hexo使用本地图片有以下几种方法:

  • 放在根目录

    这种方法是把图片放在source/img下,然后在Markdown里写![img](/source/img/anything.png)然而这种方法在本地的编辑器里不能正确识别图片的位置。

  • asset-image
    这是一个在Hexo 2.x时出现的插件,后来被纳进Hexo 3 core。但是很尴尬的是,这种方法直接放弃了Markdown原来的语法,使用类似的语法。这让人有点难以接受咯~
  • 解决方法

    hexo-asset-image

    首先确认_config.yml中有post_asset_folder:true

    在Hexo目录,执行

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

    文章名
    ├── 图片1.jpg
    ├── 图片2.jpg
    └── 图片3.jpg
    文章名.md

这样的目录结构,只要使用`![图片描述](文章名/图片名称.jpg)`就可以插入图片了。

最终生成的结构

    public/2016/07/08/文章名
    ├── index.html
    ├── 图片1.jpg
    └── 图片2.jpg

同时生成HTML是

1
<img src="/2016/07/08/文章名/图片名称.jpg" alt="图片描述">
而不是愚蠢的
1
<img src="文章名/图片名称.jpg" alt="图片描述">

至此,我们就可以很方便地插入本地图片了!!!

0%