Hexo+NexT（五）：Hexo第三方插件提供功能及配置

時間 2019-12-12

標籤 hexo+next hexo 第三方插件提供功能配置简体版

原文原文鏈接

本篇文章介紹NexT中經過第三方實現的功能，有的須要經過額外的插件，有的須要經過第三方提供的功能。這些功能豐富了網站內容，彌補了原生靜態網站的不足。javascript

增長百度統計分析功能

訪問百度統計http://tongji.baidu.com網站，註冊。進入管理菜單，在網站列表下面註冊網站並得到訪問代碼以下。

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?ce33112f521e07dfe453757625e4XXXX";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

這是一段JavaScript腳本代碼。把它放入全部頁面的<head>標籤最前方，就能夠實現訪問統計，其中ce33112f521e07dfe453757625e4XXXX是你網站的標識碼。html
在NexT中，這段代碼已經放入themes\next\layout\_third-party\analytics\baidu-analytics.swig，經過include，當知足條件是就會植入頁面頭部。java
在主題配置中，設置baidu_analytics的值，也就是上面說的標識碼，而後植入頁面頭部代碼就會生效。git

baidu_analytics: ce33112f521e07dfe453757625e4XXXX

利用插件實現字符統計及閱讀時長估計

統計文章中的字符，根據字數估算閱讀時間，這個功能是經過插件hexo-wordcount來實現的。github

安裝插件

npm install hexo-wordcount --save

打開主題配置文件進行配置

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true               # 是否顯示「字數統計」及「閱讀分鐘」的文字
  wordcount: true               # 是否顯示字數統計
  min2read: true                # 是否顯示估算閱讀分鐘
  totalcount: true          # 是否在網站底部顯示全部文章字數之和
  separated_meta: true

效果如圖：數據庫

用leancloud記錄訪問次數

NexT也集成了leancloud，在leancloud官網
中註冊帳號，得到app_key和app_id，而後在主題配置文件中進行以下配置。npm

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

而後在leancloud的控制檯中的存儲內添加一個Counter的class，這樣就能夠記錄咱們每頁的瀏覽量了。hexo

網站評論系統須要維護用戶，用戶的留言，所以須要用到數據庫。輕博客不具有這些功能，須要藉助第三方提供的服務。app

在NexT5.1.2版本中，集成了以下第三方的評論系統，只須要在主題配置中就能夠打開相應功能。

disqus
暢言
多說
有言
hypercomments
來必力

其中disqus、hypercomments和來必力是國外的，訪問效果可能受影響，多說和有言好像也關閉了，暢言目前可用。

評論系統一個足夠，在主題配置中進行相應配置，若是打開多個，會根據themes\next\layout\_third-party\comments\index.swig中的順序，前面配置成功，後面的就無效了。

以暢言爲例，只須要在主題配置中打開下列配置。

changyan:
  enable: true  #打開開關
  appid:        #暢言系統網站上申請的appid
  appkey:       #暢言系統網站上申請的appkey

填入從暢言網站得到的appid和appkey便可開啓評論。

給博客添加網站地圖`sitemap`

搜索引擎天天讓蜘蛛在網站爬行來抓取頁面，網站地圖的做用就是給主動給蜘蛛喂數據，網站地圖位於網站根目錄下，有sitemap.html和sitemap.xml兩種格式。百度搜索引擎及多數搜索引擎使用html格式，谷歌使用xml格式。
兩步完成網站地圖自動生成功能。

**安裝網站地圖生成插件**

npm install hexo-generator-sitemap --save

從新啓動hexo，系統會在public根目錄下生成sitemap.xml文件。

給網站設置RSS訂閱

一、先安裝 hexo-generator-feed 插件

$ npm install hexo-generator-feed --save

二、打開 站點配置文件 找到Extensions在下面添加

# RSS訂閱
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

三、打開 主題配置文件 找到rss，設置爲

rss: /atom.xml

添加搜索功能

在網站內部提供搜索功能，能夠進行全文搜索。

一、安裝 hexo-generator-searchdb 插件

$ npm install hexo-generator-searchdb --save

二、打開 站點配置文件 找到Extensions在下面添加

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

三、打開 主題配置文件 找到Local search，將enable設置爲true

四、效果如圖

添加暢言評論系統

提供網站評論的網站不少，但因爲是第三方免費服務，也許說停就停了。但既然是作靜態網站博客，涉及到存儲和交互的也只能採用第三方的了。

這裏選擇暢言做爲第三方。

一、進入暢言官方網站註冊。

二、登陸完成以後，進入後臺預覽，下方找到暢言祕鑰，得到APP KEY和APP ID。

三、打開 主題配置文件 找到changyan，對應進行配置。

# changyan
changyan:
  enable: true
  appid: cyueKr
  appkey: a458c21e4100cfb443bf7f760a5

暢言須要網站作備案，可是你徹底能夠借用朋友已經備案的域名和備案號，經過審覈後再改成本身的域名，而後備案下來了再修改回來。

用`hexo-neat`壓縮文件

hexo-neat做爲一個hexo插件出現，他支持壓縮html、css和js文件，能夠消除hexo生成網頁過程當中留下大大片空白，壓縮輸出文件的體積。使用方法以下：

使用npm安裝hexo-neat插件
```
$ npm install hexo-neat --save
```

在站點配置文件中打開開關。

neat_enable: true  #打開總開關
neat_html:      
  enable: true      #打開壓縮html文件開關
  exclude:          #html的排除列表

neat_css:          
  enable: true      #配置CSS文件開關
  exclude:
    - '**.min.css'   #配置排除文件  

neat_js:
  enable: true       #js壓縮開關
  mangle: true       #是否破壞文件名
  output:            #是否輸出log日誌，默認爲true
  compress:
  exclude:
    - '*.min.js'     #js文件壓縮排除列表

對於插件，除了日誌輸出外，用戶基本無感。