前言

本篇博客主要講解七牛云插件安裝與使用，博客中獲取七牛云存儲(chǔ)的圖片主要有兩種方式布朦，一種是在七牛控制臺(tái)中上傳圖片然后取圖片外鏈地址，另外一種是用七牛云插件+標(biāo)簽語法將圖片上傳到七牛云并顯示到我們所寫的博客中抛虫，這里主要介紹第二種方式。
相關(guān)網(wǎng)址

• hexo-qiniu-sync
• 七牛云

注冊七牛個(gè)人賬號(hào)

• 首先需要到七牛云官網(wǎng)注冊個(gè)人賬號(hào)简僧。

• 進(jìn)入控制臺(tái)創(chuàng)建存儲(chǔ)空間建椰，如下圖所示：

  
  
  創(chuàng)建存儲(chǔ)空間.png
• 將融合 CDN默認(rèn)域名添加到萬網(wǎng)中，配置格式如下圖所示：
  
  添加到萬網(wǎng).png

安裝七牛云插件

• 安裝七牛云插件

  npm install hexo-qiniu-sync --save
  

配置相關(guān)信息

• 配置站點(diǎn)文件_config.yml岛马，配置入內(nèi)容（注意：添加到配置文件時(shí)棉姐，把//去掉）

#plugins:
# - hexo-qiniu-sync

qiniu:
  offline: false
  sync: true
  bucket: blogwenbo
  //這里將其注釋掉屠列，不注釋，執(zhí)行hexo g報(bào)錯(cuò)
  # secret_file: sec/qn.json or C:
  access_key: your access_key
  secret_key: your secret_key
  // 上傳的資源子目錄前綴.如設(shè)置伞矩，需與urlPrefix同步
  dirPrefix: static
  //外鏈前綴
  urlPrefix: http://p2zukkwm9.bkt.clouddn.com/static
  //使用默認(rèn)配置即可
  up_host: http://upload.qiniu.com
  //本地目錄
  local_dir: static
  // 是否更新已經(jīng)上傳過的文件(僅文件大小不同或在上次上傳后進(jìn)行更新的才會(huì)重新上傳)
  update_exist: true
  image: 
    folder: images
    extend: 
  js:
    folder: js
  css:
    folder: css

• 生成七牛配置路徑笛洛，執(zhí)行下面命令任意一個(gè)

  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
  

  就會(huì)在static目錄下生成images、css扭吁、js三個(gè)文件夾撞蜂。這時(shí)我們把測試圖片七牛云.png放在images文件夾下，然后按照如下標(biāo)簽語法書寫：

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

七牛云.png

• 同步靜態(tài)資源到七牛云空間侥袜，主要有兩種方式蝌诡，一種是使用hexo命令，還有一種是使用七牛插件命令枫吧，可以參考GitHub文檔：hexo-qiniu-sync

//1浦旱、啟用本地服務(wù)器.即使用 hexo server 命令（簡寫為 hexo s）
//當(dāng)以本地服務(wù)器模式啟動(dòng)后，會(huì)自動(dòng)監(jiān)測 local_dir 目錄下的文件變化九杂， 會(huì)自動(dòng)將新文件進(jìn)行上傳颁湖。
如果文件進(jìn)行了修改，但設(shè)置中沒有啟用 update_exist 配置例隆，則不會(huì)更新到七派啵空間。
hexo s
hexo server

//2镀层、使用命令行命令(sync | s | sync2 | s2)
//命令行命令會(huì)掃描 local_dir 目錄下的文件镰禾，同步至七牛空間唱逢。
hexo qiniu sync
hexo qiniu s
hexo qiniu sync2
hexo qiniu s2

• 圖片處理可參考官方文檔
  圖片基本處理

問題解決

• 沒有注釋secret_file: sec/qn.json or C:報(bào)錯(cuò)吴侦，如下圖所示：
  

  HexoError.png

    # secret_file: sec/qn.json or C:
  

• hexo-qiniu-sync安裝好后，hexo s命令不見了坞古，hexo d也提示問題 #41

  //將其注釋就好了
  #plugins:
  # - hexo-qiniu-sync
  

結(jié)語

自己也參考了一些文章备韧，但講解的都不是很詳細(xì)完整，有些博客只講解了重要的一些步驟痪枫，不管怎樣织堂，最后自己還是搗騰出來了，還是挺折騰人的听怕，我也是第一次用七牛云存儲(chǔ)圖片捧挺，有些地方可能講解的不是很完整，也請諒解尿瞭。希望本篇博客能給你一些幫助闽烙，也歡迎大家一起交流學(xué)習(xí)。成功案例：Hexo七牛插件安裝與使用。

參考文章

Hexo 七牛同步插件的使用