使用七牛为Hexo存储图片等资源

1. 七牛是什么

七牛是一个云存储服务商，注册并实名认证之后¹后，你将免费享有 10GB 存储空间，每月 10GB 下载流量、100 万次 GET 请求、 10 万次 PUT/DELETE 请求。七牛的定位不是像百度云一样的网盘，也不是同坚果云一般的 同步云 ，而是 CDN ² ，让你在浏览网页的时候最快的接收到页面中的图片、音频等文件，所以非常适合个人、企业用户用来储存站点资源。对于个人博主来说，你可以把博客中的图片、音频、视频等媒体上传到七牛，在博客中引用；也可以将站点需要加载的CSS、JS等文件上传到七牛，以加速网站。

2. 为什么选用七牛

与直接部署到站点相比：
- 访问速度更快（特别是对比部署到github的情况）
- 对个人用户而言空间和流量都十分阔绰。 Gitcafe有 512Mb 的总空间限制，Github虽没有找到类似的说明，但是在其上托管过多媒体资源也不是太合适的做法。而在七牛，你甚至可以通过邀请好友来增加每月下载流量（我的邀请链接），每成功邀请一名朋友将增加5GB的下载流量，最高上限可达40GB。
- 如果你爱折腾，还可以玩出更多花样³：
  - 防盗链；
  - 对图片、音视频等在线处理，不必自己做重复工作。通过调用接口，七牛可以帮你：加水印、自定义裁剪区域、旋转、调整图片质量、转换格式；
  - 分析下载量等详细数据，挖掘用户行为。
与其他上传站点相比：
- 更稳定：七牛毕竟是老牌服务商，数据的安全性和稳定性都较有保证。如果上传到什么小网站，哪天发现图片都打不开了才是人间惨剧~
- 更灵活：配合 hexo-qiniu-sync 插件⁴，就算是七牛以后更改了空间域名，也不用一篇一篇地去改外链地址，只要在配置文件中修改外链前缀即可。
- 更方便：配合 hexo-qiniu-sync 插件，不必”上传→复制链接→引用外链“，直接按照本地路径引用，然后键入一条命令同步到七牛就好。会自动识别哪些是新增、修改的文件需要上传，哪些是原有的文件不需改动，十分方便。

当然，七牛并非尽善尽美：

在线文件管理不支持目录
本地删除文件，云端不能同步删除文件

尽管仍有欠缺，私以为七牛依旧是现在个人博客最佳的资源储存服务。

接下来，我们来看下怎么用七牛为Hexo存储文件吧~

<!– more –>

3. 七牛空间的设置

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

4. 设置 `hexo-qiniu-sync` 插件

安装插件：在hexo主目录下运行以下命令：
npm install hexo-qiniu-sync --save
添加插件配置信息到站点配置文件 _config.yml ：

plugins:
  - hexo-qiniu-sync

qiniu:
  offline: false
  sync: true
  bucket: bucket_name
  access_key: AccessKey
  secret_key: SecretKey
  dirPrefix:
  urlPrefix: http://7xqb0u.com1.z0.glb.clouddn.com
  local_dir: cdn
  update_exist: true
  image:
    folder: images
    extend:
  js:
    folder: js
  css:
    folder: css

几个需要修改的地方：
- bucket ：修改为你刚才申请的七牛空间名称
- access_key 、 secret_key : 上传密钥AccessKey、SecretKey。即3 第3步复制的AK和SK。
- urlPrefix : 七牛空间地址的前缀。 重要！必填！ 因为现在七牛已经取消了二级域名，外链前缀类似设置中的 http://7xqb0u.com1.z0.glb.clouddn.com ，插件不能根据 bucket 自动生成外链前缀了。你可以进入自己创建的空间在域名设置中看到自己的七牛测试域名，也可以查看一个已上传的文件外链地址，确认前缀无误。这个参数的设置是保证解析成网页文件时，外链地址正确的关键之一！
配置参数的说明：
- 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）这三个图片处理接口，多个接口内容之间用 | 间隔。详见七牛开发者中心-图片处理。

5. 配置本地目录

下文实例都是基于前文的设置基础，不予赘述。

本地目录名称需要与 local_dir 参数的值一致。所以在 hexo主目录下新建与 source 平级的目录 cdn ，用于存放需要上传到七牛的资源。

在 cdn 目录下创建子目录： css 、 images 、 js ，与 image/js/css 子参数 folder 保持一致，待上传的css、图片、js文件应该存储到相应子目录。也可新建其他子目录，例如我还新建了 audio 文件用以存放一些音频文件。我的Hexo主目录结构如下：

├─.deploy_git
├─cdn
│ ├─audio
│ ├─css
│ ├─images
│ └─js
├─node_modules
├─public
├─scaffolds
├─source
└─theme

6. 引用七牛资源

前文说过，七牛配合插件，可以比较方便地根据本地路径来引用文件，这一功能是利用Hexo的标签插件实现，我们来看看具体操作是怎样的。

6.1. 引用图片

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

{% qnimg demo.jpg %}

生成站点时将被解析为：

<img src="http://7xqb0u.com1.z0.glb.clouddn.com/images/demo.jpg">

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

{% 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 。只有当生成的图片外链地址与实际上传到七牛的文件外链地址一致时，引用的图片才能正确显示。根据配置文件，我们知道：

urlPrefix = http://7xqb0u.com1.z0.glb.clouddn.com
image.folder = images
AK/SK所指向用户的绑定域名 = http://7xqb0u.com1.z0.glb.clouddn.com
dirPrefix 为空值

代入，可得：

生成的图片外链地址规则 = http://7xqb0u.com1.z0.glb.clouddn.com/images/ImgFile
上传到七牛的文件外链地址 = http://7xqb0u.com1.z0.glb.clouddn.com/FilePath

而如果按照上文所说，将图片文件存储在 cdn/images 目录下，则 images/ + ImgFile = FilePath ，二者相等。

因此，要想正确的引用外链，一定要注意每一个步骤的设置。如果最后外链不能正常显示，首先对比一下网站博客引用的地址和七牛的外链地址是否一致，如果不一致，则对照外链地址的生成规律，检查文件存放路径、 urlPrefix 、 dirPrefix 、 image.folder 设置是否正确。

6.1.1. 图片引用的高阶版

高级用法的通用模版：

{% qnimg imageFile [attr1:value1] ["attr2:value21 value22 ..."] [extend:... | normal:yes] %}

[] 表示可选项，按需添加，也可以不写
| 表示二选一
- extend:... 图片处理参数，表示对图片进行某种特定处理⁵，多个处理之间用 | 间隔。
- normal:yes 表示使用原图，忽略 _config.yml 文件中的 image.extend 设置

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

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

解析为：

<img title="标题" alt="说明" class="class1 class2" src="http://7xqb0u.com1.z0.glb.clouddn.com/images/test/demo.png?imageView2/2/w/600">

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

6.2. 引用CSS和JS

只是引用的标签名不同：

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