Hexo 使用七牛云作为图床保存图片(四)

图片使用

 有时候将一个问题分析的清楚到位，图片解释是避免不了的。从博客搭建开始，用的都是本地的图片。不利于以后的扩展，看到很多博主都是使用了七牛云作为博客的图床，效果不错，于是决定使用七牛云。

注册七牛云

 注册七牛云账号，并需要实名认证，认证之后会免费获得10G存储空间、20G下载流量、10万次PUT请求、100万次GET请求。对于个人博客来说够用了。七牛云的好处就不用多说了，老牌服务商，口碑还是很不错的；当然缺点也是有的: 服务端是不支持同步删除的。

创建七牛云存储空间

注册，实名认证后创建存储空间 ( 对象存储 ):

填写相关参数:

自动上传图片插件hexo-qiniu-sync

安装插件，在Hexo主目录下执行:

1.npm install hexo-qiniu-sync --save

添加插件的配置信息到blog目录中配置文件 _config.yml:

#七牛云存储设置
##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: static
  urlPrefix: http://bucket_name.qiniudn.com/static
  up_host: http://upload.qiniu.com
  local_dir: static
  update_exist: true
  image:
    folder: images
    extend:
  js:
    folder: js
  css:
    folder: css

注意:plugins下的配置项，不在需要添加hexo-qiniu-sync，不然会编译报错:

(不需要配置如下)
plugins:
- hexo-qiniu-sync

可以戳这里查看详情

参数说明

1.offline:

如果要使用同步到七牛空间的静态资源，请设置为 false。如果只想浏览在本地的静态资源文件，则设置为 true。

2.sync:

如果你想关掉七牛同步，将此参数设置为false即可，不过一般用不到修改这个参数。

3.dirPrefix:

将资源上传到七牛空间内这个目录下(说是目录会容易理解点)，默认为 static 目录。

4.urlPrefix:

七牛空间地址的前缀，当你设置了 dirPrefix 参数后，如static。则此url地址必须加上目录后缀 /static ，即 (http://bucket_name.qiniudn.com/static)，否则静态资源将无法访问。打开七牛云的管理台找到前缀地址如下图:

如果`dirPrefix`为`static` 以默认图片`img.jpg`为例，则外链完整的地址为 (http://前缀/static/images/img.jpg)

5.local_dir:

只填写一个目录名称即可，建立在hexo博客的主目录，不需要使用子目录。
当你在配置中填写好文件夹后，运行hexo时，会自动建立对应的目录。
如果你了解hexo文件夹的关系，担心这样会导致离线模式不能查看到图片，我可以告诉你你不需要担心这个问题。
在你以离线模式运行时，会自动使用软连接/联接方式帮你建立文件夹的引用，可以让你的离线浏览节省一倍的空间。

Tips:可以先创建文件夹名称，然后填入参数，效果是一样的；方便自己定义目录结构。

6.update_exist:

如果你的静态文件会进行修改或替换，并需要更新七牛空间上原先上传的文件，则设置为 true 。
是否更新空间上已上传的文件，是按照对比文件大小是否相同或者本地文件在上传到七牛空间之后进行过修改的规则进行判断的。

7.image : extend:

这是个特殊参数，是文章内使用 qnimg 标签引用图片的默认图片处理操作。请参考 七牛开发者中心。
可以使用 基本图片处理（imageView2）、高级图片处理（imageMogr2）、图片水印处理（watermark） 这三个图片处理接口，多个接口内容之间用 | 间隔。
例如 ?imageView2/2/w/500 即生成宽度最多500px的缩略图。

8.access_key与secret_key对应七牛个人中心的AK与SK如下图:



完整的 hexo-qiniu-sync 文档

我的配置参数如下:

#七牛云存储设置
qiniu:
  offline: false
  sync: true
  bucket: 七牛云存储空间name
  #secret_file: sec/qn.json or C:(这一行必须注释掉，不然报错)
  access_key: access_key
  secret_key: secret_key
  dirPrefix: static
  urlPrefix: http://七牛云中存储空间的前缀/static
  up_host: http://upload.qiniu.com
  local_dir: qiniudn
  update_exist: true
  image:
    folder: images
    extend:
  js:
    folder: js
  css:
    folder: css
  audio:
    folder: audio

引用图片hexo-qiniu-sync

1. {% qnimg img.jpg %} (基本的用法，可以查看文档一些高阶用法，以后需要的时候在了解)

---