使用七牛在 Hexo 文档中嵌入图片

传说七牛做图床很牛逼，占个坑试试看。

挖坑填坑归来，写一写。

先上图，杭州出发骑行去千岛湖途中的美景。

起因

MarkDown 里的图片需要这样写的：

![图片标题](图片链接)

文章配图就要考虑到图片的链接地址呀。试试七牛怎么样吧。

经过

七牛设置

注册什么的比较简单，在跳过之前安利一下我的邀请链接，互利互惠。

创建一个空间，用来存图片。记住这个空间的名字，等会有用。

对应空间内，进到 空间设置-域名设置 页面，复制默认域名，等会有用。（当然也是可以改的。）

在到 账号-密钥 页面，复制密钥 AccessKey 和SecretKey，等会也有用。

Hexo 设置

作为程序猿，可以自动完成的，肯定不会手动去做，除非不知道，哈哈。

大 WordPress 里有七牛的官方插件，而 Hexo 有民间大神的插件。

一查 npm 上 hexo-qiniu 的插件还不少，有 4 款，分别是

1. hexo-qiniu-sync

2. hexo-qiniu-images

3. hexo-qiniu

4. hexo-deployer-qiniu

其中，名声最大的 hexo-qiniu-sync。

据我踩坑的经验，我这边只有 hexo-deployer-qiniu 是可行的。

hexo-deployer-qiniu 其实是基于 hexo-qiniu-sync 修改的。

在命令行中，执行以下命令来安装：

npm install hexo-deployer-qiniu --save

修改 hexo 根目录下 _config.yml 中的配置：

deploy: 
- type: git
  repo: git@github.com:LinusLing/LinusLing.github.io.git
  branch: master
- type: qiniu
  bucket: 前面提到的空间名
  access_key: 前面提到的 AccessKey
  secret_key: 前面提到的 SecretKey
  ##sync_dir      上传目录，默认上传: public/*，填写后上传: public/qiniu_dir(包含qiniu_dir目录本身)
  sync_dir: images

  ##extend 这是个特殊参数，用于生成缩略图或加水印等操作。具体请参考http://developer.qiniu.com/docs/v6/api/reference/fop/image/
qiniu:
  prefix: http://[前面提到的默认域名]/images/
  extend:

MarkDown 中图片的使用

按照 hexo-qiniu-sync README 中的写法：

{% qnimg 文件名.png title:标题 alt:注释 %}

测试

一通设置后，可以来一遍标准的动作了：

$ hexo clean
$ hexo g
$ hexo d

然后，就会发现根本没有图片，没加图片鬼知道图片在哪里啊，将你要显示的图片添加到 _config.yml 中配置的 sync_dir 路径（照我上面写的话，就放到 source/images/）文件夹里。再来一遍，搞定！

没结果了

嗯。