七牛存储设置

1.申请七牛账户
2.创建存储空间（七牛叫作”Bucket“），注意添加的空间为”对象存储“，访问控制选择”公开空间“：
3.点击页面右上角头像→进入”密钥管理“→复制当前使用中的AK和SK，待会设置插件时会用到

设置 hexo-qiniu-sync 插件

1.安装插件：

1
cnpm install hexo-qiniu-sync --save

2.添加插件配置信息到站点hexo根配置文件 _config.yml ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
qiniu:
   offline: false
   sync: true
   bucket: #七牛空间名称 
   access_key: #密钥AccessKey
   secret_key: #SecretKey
   dirPrefix:
   urlPrefix:  #外链前缀域名，创建会自动分配测试域名，最好是自己的域名，测试域名有时效
   local_dir: cdn
   update_exist: true
   image:
     folder: images
     extend:
   js:
     folder: js
   css:
     folder: css

配置参数的说明：

  • offline ：是否离线。设置为 true 将在本地预览时使用本地地址渲染，省流量； false 将使用同步到七牛空间的静态资源渲染，方便检查资源链接是否正确。
  • sync ：是否同步到七牛，一般都是设置 true 啦
  • dirPrefix ：资源将上传到七牛空间的此目录下，可像我一样设置为空。该参数会影响外链的地址，如果设置为非空值，例如默认值 static ，则 urlPrefix 为保持一致需加上目录后缀 /static ，改为 http://7xqb0u.com1.z0.glb.clouddn.com/static 。
  • local_dir ：本地资源储存目录。在本例中，待上传的资源都储存在hexo主目录中的 cdn 文件夹（也就是与 source 目录平级）中。
  • update_exist ：设置为 true ，则会在文件更新之后重新上传并更新七牛空间上中的原有文件。
  • image/js/css ：子参数folder为不同静态资源种类的目录名称，一般不需要改动
  • image.extend ：使用 qnimg 标签引用图片的默认图片处理操作。可以使用 基本图片处理（imageView2）、高级图片处理（imageMogr2）、图片水印处理（watermark） 这三个图片处理接口，多个接口内容之间用 | 间隔。

配置本地目录

本地目录名称需要与 local_dir 参数的值一致。所以在 hexo主目录 下新建与 source 平级的目录 cdn ，用于存放需要上传到七牛的资源
在 cdn 目录下创建子目录： css 、 images 、 js ，与 image/js/css 子参数 folder 保持一致，待上传的css、图片、js文件应该存储到相应子目录。也可新建其他子目录,我的Hexo主目录结构如下：

1
2
3
4
5
6
7
8
9
10
├─.deploy_git
├─cdn
│ ├─css
│ ├─images
│ └─js
├─node_modules
├─public
├─scaffolds
├─source
└─theme

引用七牛资源

引用图片

图片的引用是最典型的情况。让我们来看最简单的情况：如果你想引用储存在 cdn/images 下的图片 demo.jpg ，只需在文章中插入：

1
{% qnimg demo.jpg %}

生成站点时将被解析为：

1
<img src="http://7xqb0u.com1.z0.glb.clouddn.com/images/demo.jpg">  注意路径，要与得到的七牛外链路径相同

我们总结一下生成的图片外链地址规则。我们把引用实例概括为：

1
{% qnimg ImgFile %}

则生成的图片外链地址规则为 urlPrefix + / + image.folder + / + ImgFile 。
我们再定义文件在 cdn 目录下的相对路径为 FilePath ，即文件 cdn/demo.mp3 的 FilePath 为 demo.mp3 ， cdn/images/test/01.png 的 FilePath 为 images/test/01.png 。则实际上传到七牛的文件外链地址为 AK/SK所指向用户的绑定域名 + / + dirPrefix + / + FilePath 。只有当生成的图片外链地址与实际上传到七牛的文件外链地址一致时，引用的图片才能正确显示。根据配置文件，我们知道：

而如果按照上文所说，将图片文件存储在 cdn/images 目录下，则 images/ + ImgFile = FilePath ，二者相等。
要想正确的引用外链，一定要注意每一个步骤的设置。如果最后外链不能正常显示，首先对比一下网站博客引用的地址和七牛的外链地址是否一致，如果不一致，则对照外链地址的生成规律，检查文件存放路径、 urlPrefix 、 dirPrefix 、 image.folder 设置是否正确。

图片引用的高阶版

高级用法的通用模版：

1
{% qnimg imageFile [attr1:value1] ['attr2:value21 value22 ...'] [extend:... | normal:yes] %}
  • [] 表示可选项，按需添加，也可以不写
  • | 表示二选一
  • extend:… 图片处理参数，表示对图片进行某种特定处理5，多个处理之间用 | 间
  • normal:yes 表示使用原图，忽略 _config.yml 文件中的 image.extend 设置

实例 图片的本地路径为 cdn/images/test/demo.png ：

1
{% qnimg test/demo.png title:标题 alt:说明 'class:class1 class2' extend:?imageView2/2/w/600 %}

解析为：

1
<img title="标题" alt="说明" class="class1 class2" src="http://qdwuxlf4l.bkt.clouddn.com/images/test/demo.png?imageView2/2/w/600">

其中 ?imageView2/2/w/500 代表生成宽度最多500px的缩略图5。如果经常使用某种图片效果，可以在其七牛创建处理样式，以后直接将 extend 参数设置为 分隔符 + 样式名 就好。例如设置的分隔符为 - ，样式名为 new ，则 extend 参数为 -new 。

引用CSS和JS

只是引用的标签名不同：

1
2
{% qnjs jsFile attr1:value1 attr2:value2 'attr3:value31 value32 value3n' %}
{% qncss cssFile attr1:value1 attr2:value2 'attr3:value31 value32 value3n' %}