Hexo七牛插件安装与使用

前言

本篇博客主要讲解七牛云插件安装与使用，博客中获取七牛云存储的图片主要有两种方式，一种是在七牛控制台中上传图片而后取图片外链地址，另一种是用七牛云插件+标签语法将图片上传到七牛云并显示到咱们所写的博客中，这里主要介绍第二种方式。 相关网址

• hexo-qiniu-sync
• 七牛云

注册七牛我的帐号

• 首先须要到七牛云官网注册我的帐号。
• 进入控制台建立存储空间，以下图所示：

  

• 将融合 CDN默认域名添加到万网中，配置格式以下图所示：

  

安装七牛云插件

• 安装七牛云插件

  npm install hexo-qiniu-sync --save
  复制代码

配置相关信息

• 配置站点文件**_config.yml**，配置入内容（注意：添加到配置文件时，把//去掉）

#plugins:
# - hexo-qiniu-sync

qiniu:
  offline: false
  sync: true
  bucket: blogwenbo
  //这里将其注释掉，不注释，执行hexo g报错
  # secret_file: sec/qn.json or C:
  access_key: your access_key
  secret_key: your secret_key
  // 上传的资源子目录前缀.如设置，需与urlPrefix同步
  dirPrefix: static
  //外链前缀
  urlPrefix: http://p2zukkwm9.bkt.clouddn.com/static
  //使用默认配置便可
  up_host: http://upload.qiniu.com
  //本地目录
  local_dir: static
  // 是否更新已经上传过的文件(仅文件大小不一样或在上次上传后进行更新的才会从新上传)
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css
复制代码

• 生成七牛配置路径，执行下面命令任意一个

  hexo s
  或
  hexo g
  //终端输出
  INFO  -----------------------------------------------------------
  INFO  qiniu state: online
  INFO  qiniu sync:  true
  INFO  qiniu local dir:  static
  INFO  qiniu url:   http://blogwenbo.com/static
  INFO  -----------------------------------------------------------
  INFO  Start processing
  INFO  Now start qiniu sync.
  INFO  Need upload file num: 0
  复制代码

  就会在static目录下生成images、css、js三个文件夹。这时咱们把测试图片七牛云.png放在images文件夹下，而后按照以下标签语法书写：

  {% qnimg 七牛云.png title:七牛云 alt:七牛云 'class:' extend:?imageView2/2/w/450 %}
  复制代码

• 同步静态资源到七牛云空间，主要有两种方式，一种是使用hexo命令，还有一种是使用七牛插件命令，能够参考GitHub文档：hexo-qiniu-sync

//一、启用本地服务器.即便用 hexo server 命令（简写为 hexo s）
//当以本地服务器模式启动后，会自动监测 local_dir 目录下的文件变化， 会自动将新文件进行上传。
若是文件进行了修改，但设置中没有启用 update_exist 配置，则不会更新到七牛空间。
hexo s
hexo server

//二、使用命令行命令(sync | s | sync2 | s2)
//命令行命令会扫描 local_dir 目录下的文件，同步至七牛空间。
hexo qiniu sync
hexo qiniu s
hexo qiniu sync2
hexo qiniu s2
复制代码

• 图片处理可参考官方文档 图片基本处理

问题解决

• 没有注释**secret_file: sec/qn.json or C:**报错，以下图所示：

  

  # secret_file: sec/qn.json or C:
  复制代码

• hexo-qiniu-sync安装好后，hexo s命令不见了，hexo d也提示问题 #41

  //将其注释就行了
  #plugins:
  # - hexo-qiniu-sync
  复制代码

结语

本身也参考了一些文章，但讲解的都不是很详细完整，有些博客只讲解了重要的一些步骤，无论怎样，最后本身仍是捣腾出来了，仍是挺折腾人的，我也是第一次用七牛云存储图片，有些地方可能讲解的不是很完整，也请谅解。但愿本篇博客能给你一些帮助，也欢迎你们一块儿交流学习。成功案例：Hexo七牛插件安装与使用。

参考文章

Hexo 七牛同步插件的使用