hexo+github教程之四:配置hexo next主題第三方外掛
到了這一步,基本上已經擁有了一個很perfect的部落格了,但是還是缺少一點第三方外掛,還不算太完美。本文主要講解幾個重要的第三方外掛:多說,搜尋,404頁面,使用者訪問記錄,RSS和sitemap。
多說評論
1、開啟多說網站,登陸多說(微博或qq快捷登入),建立站點。
2、按下圖進行輸入建立評論站點。
站點名稱可以隨便填,站點域名就填寫部落格域名,多說域名填寫blog名,這個主題配置到時會用到(多說的short_name)
3、建立完以後進入管理後臺,在左側選單欄裡找到工具,右側程式碼裡看到short_name
,也就是剛才輸入的多說域名。
4、開啟 主題配置檔案(themes\next\_config.yml),找到 duoshuo_shortname,寫到後面。不同主題可能名字不一樣,操作都是一樣的。
duoshuo_shortname: tenke
5、設定多說評論顯示UA以及博主,在主題配置檔案找到以下配置
duoshuo_info:
ua_enable: true #是否顯示ua
admin_enable: true #是否顯示博主
user_id: 123456789 #多說使用者id
admin_nickname: Tenken #博主暱稱自定義
多說的使用者id其實就是使用者祕鑰,如圖:
如果想要開啟多說分享的,可以找到以下配置:
duoshuo_share: true
好,多說評論配置完了,可以在本地檢視一下是否已經生效了。
$ hexo clean $ hexo s -g
博文搜尋
hexo next主題有很多第三方搜尋:Swiftype,微搜尋,Local Search,Algolia這四種,這裡我選擇Local Search,至於原因就是這個比較簡單,其他的都要申請賬號什麼的,麻煩。
1、安裝 hexo-generator-searchdb
,在站點的根目錄下執行以下命令:
$ npm install hexo-generator-searchdb --save
2、編輯 站點配置檔案,新增以下內容到任意位置:
search:
path: search.xml
field: post
format: html
limit: 10000
配置好,重新啟動一下hexo
$ hexo clean
$ hexo s -g
應該會看到:
配置404頁面
404頁面,我們選擇騰訊公益404頁面。在 hexo/source
資料夾下新建404.html。
編輯404.html頁面,輸入以下程式碼,儲存。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
</head>
<body>
<script type="text/javascript" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="your site url "
homePageName="回到我的主頁">
</script>
</body>
</html>
還要在站點配置檔案開啟404頁面配置才能在部落格頁面看見404入口
menu: #選單路徑設定 如果hexo在二級目錄放置要去掉/
home: /
categories: /categories #分類
tags: /tags #標籤
archives: /archives #歸檔
about: /about # 關於我
#sitemap: /sitemap.xml #這個可以不用開啟,給搜尋引擎用的,需要安裝外掛
commonweal: /404.html #公益404
記得每次修改站點配置檔案需要重啟hexo服務
$ hexo clean
$ hexo s -g
使用者訪問記錄
next主題有兩個使用者訪問記錄的外掛,leancloud_visitors和busuanzi_count,leancloud_visitors這個需要到https://leancloud.cn註冊獲取AppID and AppKey,那麼我們就選擇busuanzi_count這個外掛。
開啟主題配置檔案,找到以下配置,設定為true就可以了
busuanzi_count: #第三方使用者訪問外掛,直接開啟
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i>
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i>
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-file-o"></i>  閱讀數
page_pv_footer:
RSS和sitemap
1、安裝RSS和sitemap外掛
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
2、開啟RSS和sitemap功能,編輯站點配置檔案 hexo/_config.yml
feed:
type: atom #feed 型別
path: atom.xml #rss 路徑
limit: 20 #在 rss 中最多生成的文章數(0顯示所有)
NexT 中 RSS 有三個設定選項,滿足特定的使用場景。 更改 主題配置檔案,設定 rss 欄位的值:
- false:禁用 RSS,不在頁面上顯示 RSS 連線。
- 留空:使用 Hexo 生成的 Feed 連結。
- 具體的連結地址:適用於已經燒製過 Feed 的情形。
這裡我們留空就行了。