Hexo+NexT(五):Hexo第三方插件提供功能及配置

精于心 簡于形

歡迎訪問作者主頁www.guide2it.com

本篇文章介紹NexT中通過第三方實(shí)現(xiàn)的功能顷编,有的需要通過額外的插件汰扭,有的需要通過第三方提供的功能脏榆。這些功能豐富了網(wǎng)站內(nèi)容拌消,彌補(bǔ)了原生靜態(tài)網(wǎng)站的不足。

Hexo博客專題索引頁

增加百度統(tǒng)計分析功能

  1. 訪問百度統(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>
  1. 這是一段JavaScript腳本代碼捶闸。把它放入所有頁面的<head>標(biāo)簽最前方夜畴,就可以實(shí)現(xiàn)訪問統(tǒng)計,其中ce33112f521e07dfe453757625e4XXXX是你網(wǎng)站的標(biāo)識碼删壮。

  2. 在NexT中贪绘,這段代碼已經(jīng)放入themes\next\layout\_third-party\analytics\baidu-analytics.swig,通過include央碟,當(dāng)滿足條件是就會植入頁面頭部税灌。

  3. 主題配置中,設(shè)置baidu_analytics的值亿虽,也就是上面說的標(biāo)識碼菱涤,然后植入頁面頭部代碼就會生效。

baidu_analytics: ce33112f521e07dfe453757625e4XXXX

利用插件實(shí)現(xiàn)字符統(tǒng)計及閱讀時長估計

統(tǒng)計文章中的字符洛勉,根據(jù)字?jǐn)?shù)估算閱讀時間粘秆,這個功能是通過插件hexo-wordcount來實(shí)現(xiàn)的。

  1. 安裝插件
npm install hexo-wordcount --save
  1. 打開主題配置文件進(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  

效果如圖

1554901059625.png

用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)添加一個Counterclass昔搂,這樣就可以記錄我們每頁的瀏覽量了。

1554903028470.png

網(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.htmlsitemap.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、效果如圖

1554903793225.png

添加暢言評論系統(tǒng)

提供網(wǎng)站評論的網(wǎng)站很多馏颂,但由于是第三方免費(fèi)服務(wù)示血,也許說停就停了。但既然是做靜態(tài)網(wǎng)站博客救拉,涉及到存儲和交互的也只能采用第三方的了难审。

這里選擇暢言作為第三方。

1亿絮、進(jìn)入暢言官方網(wǎng)站注冊告喊。

2、登錄完成之后派昧,進(jìn)入后臺預(yù)覽黔姜,下方找到暢言秘鑰,獲得APP KEYAPP 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)頁過程中留下大大片空白猾浦,壓縮輸出文件的體積。使用方法如下:

  1. 使用npm安裝hexo-neat插件

    $ npm install hexo-neat --save
    
  2. 站點(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文件壓縮排除列表
    

對于插件,除了日志輸出外对嚼,用戶基本無感夹抗。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市纵竖,隨后出現(xiàn)的幾起案子漠烧,更是在濱河造成了極大的恐慌,老刑警劉巖靡砌,帶你破解...
    沈念sama閱讀 222,378評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件已脓,死亡現(xiàn)場離奇詭異,居然都是意外死亡通殃,警方通過查閱死者的電腦和手機(jī)度液,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來画舌,“玉大人堕担,你說我怎么就攤上這事∏簦” “怎么了霹购?”我有些...
    開封第一講書人閱讀 168,983評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長句葵。 經(jīng)常有香客問我厕鹃,道長兢仰,這世上最難降的妖魔是什么乍丈? 我笑而不...
    開封第一講書人閱讀 59,938評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮把将,結(jié)果婚禮上轻专,老公的妹妹穿的比我還像新娘。我一直安慰自己察蹲,他們只是感情好请垛,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評論 6 398
  • 文/花漫 我一把揭開白布催训。 她就那樣靜靜地躺著,像睡著了一般宗收。 火紅的嫁衣襯著肌膚如雪漫拭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,549評論 1 312
  • 那天混稽,我揣著相機(jī)與錄音采驻,去河邊找鬼。 笑死匈勋,一個胖子當(dāng)著我的面吹牛礼旅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播洽洁,決...
    沈念sama閱讀 41,063評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼痘系,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了饿自?” 一聲冷哼從身側(cè)響起汰翠,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎昭雌,沒想到半個月后奴璃,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡城豁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評論 3 342
  • 正文 我和宋清朗相戀三年苟穆,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唱星。...
    茶點(diǎn)故事閱讀 40,742評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖型豁,靈堂內(nèi)的尸體忽然破棺而出迎变,到底是詐尸還是另有隱情衣形,我是刑警寧澤倒源,帶...
    沈念sama閱讀 36,413評論 5 351
  • 正文 年R本政府宣布笋熬,位于F島的核電站突诬,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蔬捷。R本人自食惡果不足惜周拐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧播急,春花似錦桩警、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽术瓮。三九已至胞四,卻和暖如春辜伟,著一層夾襖步出監(jiān)牢的瞬間导狡,已是汗流浹背旱捧。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人卢肃。 一個月前我還...
    沈念sama閱讀 49,159評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親竣贪。 傳聞我的和親對象是個殘疾皇子匕争,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Hexo 靜態(tài)站點(diǎn)具有一定的局限性铆帽,需要借助第三方插件來擴(kuò)展站點(diǎn)的功能。 網(wǎng)上很多教程都是直接添加某些代碼愧驱,但現(xiàn)在...
    _danboard閱讀 3,534評論 0 2
  • 之前折騰了一下靜態(tài)博客的搭建,現(xiàn)在記錄一下椭盏。 選用Hexo搭建靜態(tài)博客的原因:快速组砚、簡潔且高效的博客框架。部署簡單...
    墨痕未干閱讀 733評論 0 1
  • 我的個人博客就是使用Hexo博客框架+Next主題搭建而來的掏颊,之前也使用過CSDN糟红、博客園等,最后都放棄了蚯舱,因為一...
    zwb_jianshu閱讀 1,449評論 1 5
  • 前些日子狂投簡歷改化,次日就收到了未接。怕是錯失了機(jī)會一次枉昏,我投的是南京的地址陈肛,為什么是北京來電呢? 四小時內(nèi)接到兩次...
    兮瓜之閱讀 3,556評論 0 0
  • 任何公司都有無數(shù)的這樣那樣的問題兄裂,有問題很正常句旱,但是希望我們及時溝通加上管理 層的執(zhí)行效率能夠盡快的把沒必要的問題...
    eba06451330e閱讀 235評論 0 0