Hexo進階高級教程（二）

前言

接上一篇Hexo進階高級教程(一)繼續探討Hexo,主要的功能都有了，要想讓整個博客更豐富，訪問速度更快更流暢，就須要添加一些附加的功能，作一些優化處理。
下面會講解：

• 七牛雲圖牀--用來作圖片存儲管理
• SEO優化--讓更多的人經過搜索引擎搜到咱們
• 網易雲跟帖--文章的留言區
• leancloud閱讀統計--統計閱讀量
• 百度、谷歌統計--網站流量統計

本文地址：http://tigerliu.site/2017/06/hexo-2

七牛雲圖牀

在寫博文的時候，不免都會添加一些圖片在文章內，正常狀況下，咱們都使用外鍊形式添加到咱們的博文，爲何要選七牛雲呢？讓咱們來看看它的特色：

• 10G 免費流量（圖片儘可能壓縮 200k 之內）
• 服務穩定（寫做纔是核心，就別總折騰圖片的事情了）
• 便宜（就算付費也相對比較便宜，做爲學生黨以爲能夠接受）

註冊七牛雲

永遠不變的第一步，騷年得先去注個冊，有了ID才能繼續玩，連接：七牛雲註冊 ，按照提示一步一步來就行了。

PS：登陸七牛雲，驗證郵箱， 實名認證 ，可選擇支付寶實名認證--前提是你支付寶已經實名認證 ，正常狀況下 支付寶實名認證 即刻就能夠經過（推薦）

建立對象存儲

登陸七牛雲，默認進來就是資源主頁，而後在七牛雲官方資源欄--》對象存儲 點擊當即添加，以下圖：

按照提示填寫好存儲空間名稱，存儲區域默認就行了，訪問控制--選擇公開空間

PS：選擇私有空間 須要有Key值才能訪問，這裏選擇公開空間 上傳完後 直接就能夠獲取外鏈 比較方便

上傳圖片，獲取外鏈

選擇內容管理--》點擊上傳文件 ，上傳完成以後 點關閉，回到列表頁就能夠看到剛纔上傳的圖片了

鼠標懸浮在文件名上 可點擊藍色的筆重命名，右邊的眼睛Icon點擊 能夠獲取外鏈地址，複製外鏈就可使用了。

新增圖片樣式

圖片樣式--》新建圖片樣式 根據不一樣業務須要選擇場景--》選擇合適的縮放方式，是否剪裁，圖片水印 這個功能用的比較多（可設置圖片水印，文字水印），設置輸出格式，而後保存樣式。給處理樣式命名， 點擊下面的保存按鈕。

咱們看到右側的處理代碼，這個是幹嗎的呢？咱們保存完了以後又怎麼使用呢？
小編剛開始也是一臉懵逼，複製這段代碼，打開剛纔上傳的圖片外鏈，而後在地址後面用鏈接符?加上處理的代碼，回車就能夠看到咱們的圖片已經加上了水印。不加處理代碼就是咱們的原圖。

//圖片外鏈?處理代碼或者樣式名稱
//示例：
http://orzlwnnoa.bkt.clouddn.com/logo.jpg?watermark/2/text/5LiD54mb5LqR/font/5a6L5L2T/fontsize/240/fill/IzAwMDAwMA==/dissolve/100/gravity/SouthEast/dx/10/dy/10|imageslim

與極簡圖牀的結合

在寫博客的時候，每次都要作這樣重複的操做，有沒有一鍵上傳而且獲取外鏈的方式呢，必須有啊。這裏介紹下極簡圖牀與七牛雲的結合。
打開極簡圖牀 註冊，登陸 點擊右側的小齒輪 綁定七牛雲帳號信息

• 空間名稱：填寫在建立對象存儲時的空間名稱
• 域名：拷貝外鏈默認域名
  
• AK: 點擊左側的導航欄我的中心--》密鑰管理 獲取AK信息
• SK:點擊左側的導航欄我的中心--》密鑰管理 獲取SK信息
  

點擊保存就OK了，極簡支持截圖粘貼，拖拽或者點擊上傳，上傳完能夠複製連接/MD連接生成/預覽, 有木有很贊，省了不少事！！！

SEO優化

SEO是由英文Search Engine Optimization縮寫而來， 中文意譯爲「搜索引擎優化」！
SEO是指經過對網站進行站內優化(網站結構調整、網站內容建設、網站代碼優化等)和站外優化，從而提升網站的關鍵詞排名以及公司產品的曝光度。

除開站外SEO，咱們能作的有兩方面。一是針對我的網站的頁面排版進行SEO的優化；二是針對搜索引擎進行主動的優化。

SEO準備工做

• sitemap插件安裝

npm install hexo-generator-sitemap --save     
    npm install hexo-generator-baidu-sitemap --save

• 修改博客配置文件
  在根目錄配置文件_config.yml中修改url爲你的站點地址

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://tigerliu.site
root: /

執行完以後就會在網站根目錄生成sitemap.xml文件（搜索引擎通用文件）和baidusitemap.xml文件（百度專用文件），而後執行hexo d -g 提交到咱們站點，打開連接http://tigerliu.site/sitemap.xml 查看該文件是否能正確訪問。

• 添加蜘蛛協議robots
  在根目錄source文件下新建robots.txt文件，添加如下文件內容（將Sitemap中的域名切換成本身網站域名）

# hexo robots.txt
User-agent: * 
Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: http://tigerliu.site/sitemap.xml
Sitemap: http://tigerliu.site/baidusitemap.xml

參數說明： User-agent: * 容許全部robot訪問，Allow 容許訪問X目錄，Disallow 禁止訪問X目錄

• 出站連接添加 「nofollow」 標籤
  nofollow標籤是由谷歌領頭創新的一個「反垃圾連接」的標籤，並被百度、yahoo等各大搜索引擎普遍支持，引用nofollow標籤的目的是：用於指示搜索引擎不要追蹤（即抓取）網頁上的帶有nofollow屬性的任何出站連接，以減小垃圾連接的分散網站權重。

以next主題爲例：

1.themes/next/layout/_partials目錄 修改footer.swig文件,將下面代碼中的a標籤 加上rel="external nofollow" 屬性

<div class="theme-info">
  {{ __('footer.theme') }} -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">
    NexT.{{ theme.scheme }}
  </a>
</div>

2.themes/next/layout/_macro目錄,修改sidebar.swig文件,將下面代碼中的a標籤 加上rel="external nofollow"屬性

<li class="links-of-blogroll-item">
  <a href="{{ link }}" title="{{ name }}" target="_blank" rel="external nofollow">{{ name }}</a>
</li>

百度收錄

生在我大天朝，使用頻率最多的當屬百度了，下面簡單介紹下百度的一些優化處理。

• 註冊帳號
  打開百度站長，註冊登陸帳號
• 添加網站
  左側 個人網站--》站點管理 添加網站，按照引導步驟來就行了。見下圖：

在第三步 驗證網站這裏 建議選擇文件驗證或者CNAME驗證，驗證規則選項下面已經給出了。

PS：將下載下來的文件放至根目錄/source目錄下，若爲HTML格式，須要在文件內加上layout: false 不然在編譯的時候 也會一塊兒編譯。

---
layout: false
---
J9sxxxxx

繼續hexo d -g 將文件上傳至咱們的網站，查看剛纔的文件是否成功上傳，而後點擊完成驗證。

• 連接提交
  在左側找到連接提交，右邊能夠看到提交方式有兩種：自動提交，手動提交

手動提交咱們就不談了，看看自動提交。主要分爲 主動推送，自動推送，sitemap 三種方式。

1 主動推送
安裝推送插件

npm install hexo-baidu-url-submit --save

在根目錄的_config.yml配置文件中新增字段：

baidu_url_submit:
  count: 100 # 提交最新的一個連接
  host: tigerliu.site # 在百度站長平臺中註冊的域名
  token: bwxxxxx # 請注意這是您的祕鑰， 因此請不要把博客源代碼發佈在公衆倉庫裏!
  path: baidu_urls.txt # 文本文檔的地址， 新連接會保存在此文本文檔裏

deploye屬性 新增字段

deploy:
 - type: baidu_url_submitter

2 自動推送
這裏以next主題爲例,打開主題配置文件_config.yml將baidu_push設置爲true

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

3 sitemap
將上面咱們生成的sitemap文件地址 提交到百度，以下圖：

全部配置完後，能夠利用site:域名 在百度搜索欄測試咱們的結果 例如： site:tigerliu.site

結果是否是什麼也沒找到，百度收錄須要一段時間，耐心等待吧！！！

谷歌收錄

仍是google收錄快，比百度快的不是一點半點，設置完成基本2分鐘左右便可看到效果。一塊兒來看看！！！

• 註冊登陸
  google站長
• 添加網站
  跟百度收錄相似，驗證網站 使用google的推薦方法，也就是百度收錄的文件驗證。

• 提交站點地圖
  驗證完網站後，回到咱們的網站列表，點擊網站，以下圖：

在左側的抓取--》點擊站點地圖 ，添加站點地圖（把咱們剛纔生成的sitemap.xml地址添加進去），如圖：

• Google 抓取工具
  點擊左側的google抓取工具，輸入抓取地址，點擊右邊的抓取按鈕，便可抓取咱們的網站。默認不輸入 即爲抓取首頁，狀態欄顯示完成即爲抓取成功，而後將該地址提交至索引。如圖：

ps: 至此google配置已經完成了，等待2分鐘，回到google搜索頁，趕忙試一試！！！

網易雲跟帖

博文怎麼能少評論功能呢，以前的多說目前已經不可用了，在暢言和網易雲跟帖之間，我選了後者。使用以前須要有本身的域名，沒有見個人上一篇Hexo進階高級教程(一)文章，註冊一個，也不貴。下面就來談談雲跟帖：

暢言須要備案，若是你的網站已經備案能夠添加

• 註冊登陸
  萬年不變的註冊登陸，網易雲跟帖註冊
• 設置站點信息
  登陸後，點擊後臺管理，填寫站點信息，站點名稱隨便取，站點網址填咱們購買的域名，保存。
• 獲取productKey
  點擊獲取代碼，在左側找到App SDK,右側的APP KEY 即爲咱們須要的key,點擊複製。如圖：

以next主題爲例，在next主題配置文件_config.yml中設置productKey

# Gentie productKey
gentie_productKey: ea08xxxxx

效果預覽：

閱讀統計功能

next主題集成了leancloud，在使用的時候設置好app_key和app_id 就可使用了。

• 註冊登陸
  leancloud註冊
• 建立應用
  登陸後在右上角選擇國內節點，建立應用。如圖：

• 主題配置
  鼠標懸浮到新建立的應用上，點擊右上角的齒輪進入設置界面,點擊應用key獲取app_key和app_id 如圖：

將剛纔獲取到的key,id填入主題配置文件

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: yourapp_id
  app_key: yourapp_key

• 建立Class
  在左側點擊存儲，建立一個名爲Counter的Class文件，這裏的名稱必定爲Counter 不能隨意取！！！

PS：設置完後，回到個人博客，隨便點擊一篇博文，刷新幾回 就能夠在leancloud--》存儲--》Counter看到咱們的瀏覽記錄了，在咱們的博文副標題也能夠看到瀏覽記錄。

百度、谷歌統計

如何查看本身的博客天天被多少人訪問呢~ 下面一塊兒來看看在hexo中如何使用統計插件，天天看到本身的博客訪問量愈來愈高也是一種享受。

• 註冊登陸
  百度統計註冊、谷歌統計註冊
• 百度統計
  登陸後 在左側找到代碼管理--》點擊代碼獲取--》右側新增網站，如圖：

拷貝統計代碼ID

• 谷歌統計
  登陸後，新增一個統計網站，填寫網站信息，點擊下面的獲取跟蹤ID，如圖：

進入頁面後，你會看到跟蹤ID，複製它，如圖：

• 修改配置文件
  以next主題爲例，修改主題配置文件，添加baidu、googleId

# Baidu Analytics ID
baidu_analytics: 9758xxxx
# Google Analytics
google_analytics: UA-3534xxxx

PS：谷歌統計用的比較少，由於有牆，在加載代碼的時候，很容易阻塞。故在國內咱們使用百度、CNZZ比較多！！！

結語

看完上面的介紹，有木有感受配置仍是蠻多的，正所謂工欲善其事，必先利其器。當初小編也花了一週多星期才搭建好一個稍微滿意點的博客，總之喜歡博客愛折騰，功夫不負有心人，終會弄出一個很是6的博客。祝你們在HEXO的路上玩的嗨皮！！！

相關連接：
Hexo+github博客搭建
Hexo進階高級教程(一)
Hexo進階高級教程(三)

實際效果展現可移步我的博客 -- Tigerliu Blog