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

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

挖坑填坑归来,写一写。

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

千岛湖晚霞

起因

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

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

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

经过

七牛设置

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

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

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

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

Hexo 设置

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

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

一查 npmhexo-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 修改的。

在命令行中,执行以下命令来安装:

1
npm install hexo-deployer-qiniu --save

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 中的写法:

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

测试

一通设置后,可以来一遍标准的动作了:

1
2
3
$ hexo clean
$ hexo g
$ hexo d

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

没结果了

嗯。

文章目录
  1. 1. 起因
  2. 2. 经过
    1. 2.1. 七牛设置
    2. 2.2. Hexo 设置
    3. 2.3. MarkDown 中图片的使用
    4. 2.4. 测试
  3. 3. 没结果了
|