本篇文章介紹NexT
中通過第三方實(shí)現(xiàn)的功能顷编,有的需要通過額外的插件汰扭,有的需要通過第三方提供的功能脏榆。這些功能豐富了網(wǎng)站內(nèi)容拌消,彌補(bǔ)了原生靜態(tài)網(wǎng)站的不足。
增加百度統(tǒng)計分析功能
- 訪問百度統(tǒng)計http://#baidu.com網(wǎng)站酗失,注冊义钉。進(jìn)入
管理
菜單,在網(wǎng)站列表
下面注冊網(wǎng)站并獲得訪問代碼如下规肴。
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://#/hm.js?ce33112f521e07dfe453757625e4XXXX";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
這是一段JavaScript腳本代碼捶闸。把它放入所有頁面的
<head>
標(biāo)簽最前方夜畴,就可以實(shí)現(xiàn)訪問統(tǒng)計,其中ce33112f521e07dfe453757625e4XXXX
是你網(wǎng)站的標(biāo)識碼删壮。在NexT中贪绘,這段代碼已經(jīng)放入
themes\next\layout\_third-party\analytics\baidu-analytics.swig
,通過include
央碟,當(dāng)滿足條件是就會植入頁面頭部税灌。在主題配置中,設(shè)置
baidu_analytics
的值亿虽,也就是上面說的標(biāo)識碼菱涤,然后植入頁面頭部代碼就會生效。
baidu_analytics: ce33112f521e07dfe453757625e4XXXX
利用插件實(shí)現(xiàn)字符統(tǒng)計及閱讀時長估計
統(tǒng)計文章中的字符洛勉,根據(jù)字?jǐn)?shù)估算閱讀時間粘秆,這個功能是通過插件hexo-wordcount
來實(shí)現(xiàn)的。
- 安裝插件
npm install hexo-wordcount --save
- 打開
主題配置文件
進(jìn)行配置
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true # 是否顯示“字?jǐn)?shù)統(tǒng)計”及“閱讀分鐘”的文字
wordcount: true # 是否顯示字?jǐn)?shù)統(tǒng)計
min2read: true # 是否顯示估算閱讀分鐘
totalcount: true # 是否在網(wǎng)站底部顯示所有文章字?jǐn)?shù)之和
separated_meta: true
效果如圖:
用leancloud記錄訪問次數(shù)
NexT
也集成了leancloud收毫,在leancloud官網(wǎng)
中注冊賬號攻走,獲得app_key和app_id,然后在主題配置文件
中進(jìn)行如下配置此再。
# 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的控制臺中的存儲內(nèi)添加一個Counter
的class
昔搂,這樣就可以記錄我們每頁的瀏覽量了。
網(wǎng)站評論系統(tǒng)需要維護(hù)用戶输拇,用戶的留言摘符,因此需要用到數(shù)據(jù)庫。輕博客不具備這些功能淳附,需要借助第三方提供的服務(wù)议慰。
在NexT5.1.2
版本中蠢古,集成了如下第三方的評論系統(tǒng)奴曙,只需要在主題配置中就可以打開相應(yīng)功能。
disqus
暢言
多說
有言
hypercomments
來必力
其中disqus
草讶、hypercomments
和來必力
是國外的洽糟,訪問效果可能受影響,多說和有言好像也關(guān)閉了堕战,暢言目前可用坤溃。
評論系統(tǒng)一個足夠,在主題配置
中進(jìn)行相應(yīng)配置嘱丢,如果打開多個薪介,會根據(jù)themes\next\layout\_third-party\comments\index.swig
中的順序,前面配置成功越驻,后面的就無效了汁政。
以暢言為例道偷,只需要在主題配置
中打開下列配置。
changyan:
enable: true #打開開關(guān)
appid: #暢言系統(tǒng)網(wǎng)站上申請的appid
appkey: #暢言系統(tǒng)網(wǎng)站上申請的appkey
填入從暢言網(wǎng)站獲得的appid和appkey即可開啟評論记劈。
給博客添加網(wǎng)站地圖sitemap
搜索引擎每天讓蜘蛛在網(wǎng)站爬行來抓取頁面勺鸦,網(wǎng)站地圖的作用就是給主動給蜘蛛喂數(shù)據(jù),網(wǎng)站地圖位于網(wǎng)站根目錄下目木,有sitemap.html
和sitemap.xml
兩種格式换途。百度搜索引擎及多數(shù)搜索引擎使用html格式,谷歌使用xml格式刽射。
兩步完成網(wǎng)站地圖自動生成功能军拟。
**安裝網(wǎng)站地圖生成插件**
npm install hexo-generator-sitemap --save
重新啟動hexo,系統(tǒng)會在public
根目錄下生成sitemap.xml
文件誓禁。
給網(wǎng)站設(shè)置RSS訂閱
1吻谋、先安裝 hexo-generator-feed 插件
$ npm install hexo-generator-feed --save
2、打開 站點(diǎn)配置文件 找到Extensions
在下面添加
# RSS訂閱
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
3现横、打開 主題配置文件 找到rss
漓拾,設(shè)置為
rss: /atom.xml
添加搜索功能
在網(wǎng)站內(nèi)部提供搜索功能,可以進(jìn)行全文搜索戒祠。
1骇两、安裝 hexo-generator-searchdb 插件
$ npm install hexo-generator-searchdb --save
2、打開 站點(diǎn)配置文件 找到Extensions
在下面添加
# 搜索
search:
path: search.xml
field: post
format: html
limit: 10000
3姜盈、打開 主題配置文件 找到Local search
低千,將enable
設(shè)置為true
4、效果如圖
添加暢言評論系統(tǒng)
提供網(wǎng)站評論的網(wǎng)站很多馏颂,但由于是第三方免費(fèi)服務(wù)示血,也許說停就停了。但既然是做靜態(tài)網(wǎng)站博客救拉,涉及到存儲和交互的也只能采用第三方的了难审。
這里選擇暢言作為第三方。
1亿絮、進(jìn)入暢言官方網(wǎng)站注冊告喊。
2、登錄完成之后派昧,進(jìn)入后臺預(yù)覽
黔姜,下方找到暢言秘鑰
,獲得APP KEY和APP ID蒂萎。
3秆吵、打開 主題配置文件 找到changyan
,對應(yīng)進(jìn)行配置五慈。
# changyan
changyan:
enable: true
appid: cyueKr
appkey: a458c21e4100cfb443bf7f760a5
暢言需要網(wǎng)站做備案纳寂,但是你完全可以借用朋友已經(jīng)備案的域名和備案號实苞,通過審核后再改為自己的域名,然后備案下來了再修改回來烈疚。
用hexo-neat
壓縮文件
hexo-neat
作為一個hexo
插件出現(xiàn)黔牵,他支持壓縮html、css和js文件爷肝,可以消除hexo
生成網(wǎng)頁過程中留下大大片空白猾浦,壓縮輸出文件的體積。使用方法如下:
-
使用
npm
安裝hexo-neat
插件$ npm install hexo-neat --save
-
在站點(diǎn)配置文件中打開開關(guān)灯抛。
neat_enable: true #打開總開關(guān) neat_html: enable: true #打開壓縮html文件開關(guān) exclude: #html的排除列表 neat_css: enable: true #配置CSS文件開關(guān) exclude: - '**.min.css' #配置排除文件 neat_js: enable: true #js壓縮開關(guān) mangle: true #是否破壞文件名 output: #是否輸出log日志金赦,默認(rèn)為true compress: exclude: - '*.min.js' #js文件壓縮排除列表
對于插件,除了日志輸出外对嚼,用戶基本無感夹抗。