Hexo七牛图床使用

之前一直使用博客一直使用本地图片，这样不是很方便。现在域名的备案终于下来了，可以试着使用七牛作为博客的图床了。

为什么使用七牛

七牛在国内云存储上做的是很厉害的了。这些不是重点，重点是七牛的免费额度啊：

• 10GB 永久免费存储空间
• 每月10GB 下载流量
• 每月10 万次 Put 请求
• 每月100 万次 Get 请求

这对于一个博客来说，完全足够了。（除非你的博客很大，访问量也很高）

配置七牛做图床

使用七牛云存储来作为自己图片的存储空间，首先注册七牛账号（注册地址），按照流程注册就好了。之后登陆七牛账号，在添加资源中，添加一个新的对象存储，这个就是用于存储图片的存储空间。

七牛会提供一个测试域名，作为图片的访问地址。可以改成自己的域名，建议使用二级域名。这里，要求域名是备案的。

这样七牛空间的基本操作就完成了。接下来开始集成插件：

hexo-asset-image

之前使用本地图片的时候，使用了hexo-asset-image插件。

这个插件在使用本地图片的时候很是方便，图片只需要放在文章同名文件夹中即可，然后文章的引用路径就是简单的文章名（就是图片的文件夹名）/图片名。简化了很多（而且Mou也可以支持预览）

现在使用七牛做为存储空间，仍然不想放弃之前那种简单的图片路径引用方式，所以，这个插件还是要用。不过，在后面我们要对插件的代码做些修改。

hexo-qiniu-sync

hexo-qiniu-sync这是一个，不需要手动同步图片到七牛的插件，用起来也不错。具体用法参见官方的README

这里需要说下配置参数的相关内容：

plugins:
  - hexo-qiniu-sync
 #七牛云存储设置
 ##offline       是否离线. 离线状态将使用本地地址渲染
 ##sync          是否同步
 ##bucket        空间名称.
 ##access_key    上传密钥AccessKey
 ##secret_key    上传密钥SecretKey
 ##secret_file   秘钥文件路径，可以将上述两个属性配置到文件内，防止泄露，json格式。绝对路径相对路径均可
 ##dirPrefix     上传的资源子目录前缀.如设置，需与urlPrefix同步 
 ##urlPrefix     外链前缀.
 ##up_host      上传服务器路径,如选择华北区域的话配置为http://up-z1.qiniu.com
 ##local_dir     本地目录.
 ##update_exist  是否更新已经上传过的文件(仅文件大小不同或在上次上传后进行更新的才会重新上传)
 ##image/js/css  子参数folder为不同静态资源种类的目录名称，一般不需要改动
 ##image.extend  这是个特殊参数，用于生成缩略图或加水印等操作。具体请参考http://developer.qiniu.com/docs/v6/api/reference/fop/image/ 
 ##              可使用基本图片处理、高级图片处理、图片水印处理这3个接口。例如 ?imageView2/2/w/500 即生成宽度最多500px的缩略图
qiniu:
  offline: false
  sync: true
  bucket: bucket_name
  secret_file: sec/qn.json or C:
  access_key: AccessKey
  secret_key: SecretKey
  dirPrefix: hexoblog
  urlPrefix: http://blogsrc.error408.com/hexoblog
  up_host: http://upload.qiniu.com
  local_dir: yourlocal_dirname
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css

• bucket指的是七牛账户创建的七牛存储控件的名称
• access_key 与 secret_key是七牛账户的秘钥，可以在秘钥管理中查看（只有验证秘钥才能指定账户存储嘛）
• secret_file可有可无，貌似有了这个之后上面的两个参数就不需要配置了。我的在加了这个配置之后反而报错，索性去除了。这个路径是需要你自己建立一个json的文件存储上面的秘钥，然后把文件的路径写在这里就好
• dirPrefix这个是七牛的目录名，七牛存储空间没有显示的目录。所谓目录，就是在指定访问域名后面先加上你的目录名，再加上你上传的图片名，这样就相当于目录了，来区分图片的分类
• up_host这个是访问图片的域名地址，比如我的是http://error408.com，前提是已经绑定了自己的域名（绑定之前可以用测试域名）。这些操作，完全可以在七牛的内容管理上自己上传一张图片，然后查看外链，就会一目了然了
• local_dir这个是本地的图片文件夹，这个就是插件同步七牛的图片来源。你所有的图片等资源都放在这里。名字可以任意，需要在博客根目录下创建这个文件夹，如我的是qnsource
• image、js、css 这三个参数是文件夹的名字，这三个文件夹会在hexo运行后，插件自动会在上一步你指定的那个local_dir下创建这三个文件，名字分别是folder参数值，分别可以放相应的资源

这样你在local_dir的image命名的文件夹中添加一张图片，之后运行hexo（如hexo s），图片就可以在你的七牛存储空间的内容管理中看见了。

你会看到图片的外链URL就是http://your_site/your_static(你的目录-dirPrefix参数的配置)/images/yourimage.png。就是你的域名+自定义的目录名+images（配置文件中image中folder指定的文件）+ 你的图片名

配置好的图片结构路径如下：

插件支持自定义子文件夹

这样同步七牛就搞定了，最后就剩下文章图片链接引用了

简化图片路径引用

这里要配合第一步中的插件hexo-asset-image使用，首先在博客的根目录下进入node_modules插件所在目录，找到这个插件，进入index.js文件。接下来就可以自定义编辑了

上面便是这个插件的核心代码，其中link就是获取静态博客文章目录所在的路径，而最后的src指定替换函数就是拼接文章所在目录与文章中图片的引用，生成新的图片访问地址。由于，不懂JS，就只能在逻辑上判断他的逻辑。所以，萌生了一个想法，我是不是可以把link换成我的七牛固定地址，然后最后拼接上文章中的图片名？那么我不就可以在文章中只是引用图片名就行了吗？好了，尝试之后，果然奏效。修改代码如下

var link = data.permalink;
// link = link.substring(getPosition(link, '/', 3) + 1);
link = config.qiniu.urlPrefix + '/' + config.qiniu.image.folder;

// src = src.split("/").pop();
// $(this).attr('src', '/' + link + src);
$(this).attr('src', link + '/' + src);

• 这里我修改了link地址，这里可以写一个死的地址比如link = "http://七牛访问图片固定前缀"，而我为了方便配置，采用了直接获取config配置文件中qiniu的配置，拼接成固定的图片访问前缀。这个访问前缀，可以在查看七牛存储空间中图片的外链，来确定通用的访问前缀
• 第二步中，首先去除对于src字符串截取函数split()、pop()，这样可以完全读取文章中图片的引用路径；然后对于src的替换函数也要处理下，这里直接用我写的七牛固定路径link + / + 文章中的图片引用路径src。这里也可以在配置文件config中自定义一个字段，如上面注释的baseUrl，把固定路径前缀写好，link的修改就可以直接是link = config.qiniu.baseUrl了

注意：在添加图片的时候，放在images文件夹下的图片，是可以创建子文件夹的。所以，为了方便以及同时兼容之前使用本地图片插件的方式，每一篇文章或者一个功能对应的图片最好放在一个子文件夹下，这样在日志文章中对图片进行引用的时候就可以直接设置成文件夹名/图片名.png的格式。这里建议文件夹名与文章名相同，便于管理

日志文章中引用图片的示例：

![图片](图片所在文件夹/图片名字.png)

或者

![图片](图片名字.png)

这样，就可以很方便的使用七牛作为自己的图床了。

• ← Previous Post
• Next Post →