1. 程式人生 > >hexo+github教程之四:配置hexo next主題第三方外掛

hexo+github教程之四:配置hexo next主題第三方外掛

到了這一步,基本上已經擁有了一個很perfect的部落格了,但是還是缺少一點第三方外掛,還不算太完美。本文主要講解幾個重要的第三方外掛:多說,搜尋,404頁面,使用者訪問記錄,RSS和sitemap。

多說評論

1、開啟多說網站,登陸多說(微博或qq快捷登入),建立站點。
hexo
2、按下圖進行輸入建立評論站點。
hexo
站點名稱可以隨便填,站點域名就填寫部落格域名,多說域名填寫blog名,這個主題配置到時會用到(多說的short_name)
3、建立完以後進入管理後臺,在左側選單欄裡找到工具,右側程式碼裡看到short_name,也就是剛才輸入的多說域名。
hexo
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其實就是使用者祕鑰,如圖:
hexo
如果想要開啟多說分享的,可以找到以下配置:

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

應該會看到:
hexo

配置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>&nbsp&nbsp閱讀數
  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 的情形。

這裡我們留空就行了。

到此,next的第三方外掛就配置完了,如果還想要其他外掛的請參考next配置文件

下一步開始配置github域名···