­

Hexo 靜態部落格指南：建站教程（中）

  • 2020 年 7 月 30 日
  • 筆記

本文最初發佈於我的個人部落格Bambrow’s Blog，採用 BY-NC-SA 許可協議，轉載請註明出處。若有後續更新，將更新於原部落格。歡迎去我的部落格閱讀更多文章！

本文詳細記錄一下站點建立過程，以便查閱。對於具體的細節則不會做過多解釋，主要展示步驟。這一篇主要講述更換NexT主題以及後續維護的相關內容。

本文運行環境：

npm: 6.14.7
hexo: 4.2.1
hexo-cli: 3.1.0
NexT: 8.0.0-rc.4

更換主題

我們這裡選擇的是NexT主題。Hexo支援許多主題，你也可以選擇自己喜歡的主題。

安裝NexT

NexT是非常流行的Hexo主題。根據這個網站，該項目幾經易手，經歷過很多不同的版本。我們現在當然是採用目前的最新版本。

首先我們運行hexo -v與npm -v查看一下Hexo與Node.js的版本，確保它們大於這個鏈接里所示的版本最低要求。

以下步驟主要參考了NexT官方文檔。還是在部落格的根目錄里，運行如下命令：

git clone //github.com/next-theme/hexo-theme-next themes/next

等待運行完畢，新主題就下載好了。這裡需要區分的是，我們現在有了兩個名為_config.yml的文件。一個是根目錄下的_config.yml，這代表著站點的配置文件；還有一個是themes/next/_config.yml，這代表著這個主題的配置文件。要注意區分它們。

下一步，我們打開站點配置文件_config.yml，找到theme那一行並改為theme: next，主題就更換完畢了。你可以運行hexo clean; hexo g; hexo s來查看效果。

設置git submodule

如果此時你嘗試使用git add .，你會發現會有如下的warning：

warning: adding embedded git repository: themes/next
hint: You've added another git repository inside your current repository.
hint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint: 	git submodule add <url> themes/next
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint: 	git rm --cached themes/next
hint:
hint: See "git help submodule" for more information.

這是因為themes/next文件夾來源於另外的git項目，因此無法上傳。在這裡有許多解決辦法，其中一個辦法是刪除themes/next里的.git文件夾。這並不是一個好辦法，因為這樣的話就無法再通過git pull更新themes/next模組。因此，比較好的辦法是設置git submodule。

注意，使用本文的辦法後，將不再推薦修改themes/next/_config.yml文件。因為修改該文件可能在更新主題時會造成本地修改與遠程更新的衝突。當然，這也可以通過git stash、git pull、git stash pop然後修復conflicts來解決，但總歸是比較麻煩。如果你需要深度訂製該主題，建議fork一份改主題源程式碼到自己的GitHub上，然後將自己fork後的倉庫作為submodule。具體的做法可以參考網上的其他教程。這裡假設你不會再修改themes/next/_config.yml文件（放心，還有其他方法可以更改主題設置）。

在添加submodule之前先做一點準備工作：

git rm -r --cached themes/next

然後運行：

git submodule add //github.com/next-theme/hexo-theme-next themes/next

這會在你的根目錄下添加.gitmodules文件，內容如下：

[submodule "themes/next"]
	path = themes/next
	url = //github.com/next-theme/hexo-theme-next

在這之後，如果你想更新NexT主題的程式碼，可以使用git submodule update --remote命令。你也可以進入themes/next文件夾使用git pull。

讓我們提交這一次修改：

git add .
git commit -m "change theme"
git push origin master

修改主題配置

前文推薦不要修改themes/next/_config.yml文件。我們想要自定義一些配置，該怎麼做呢？官方教程給出了答案。

在這裡，有兩種修改方式，一種是Hexo-Way，也就是把所有設置都放在根目錄的_config.yml里。還有一種是NexT-Way，也就是把主題設置放在source/_data/next.yml里。這裡我們選擇後者。

我們新建文件夾並複製文件：

mkdir -p source/_data
cp themes/next/_config.yml source/_data/next.yml

隨後，你就可以修改source/_data/next.yml里的內容了。這裡講幾個主要的配置。

主題樣式與暗色模式

主題樣式在# Schemes下面。一共有四種樣式，分別是Muse，Mist，Pisces和Gemini。其中前兩種是單欄樣式，後兩種是雙欄樣式，如果要更改，只需注釋掉當前樣式，再取消注釋想要更改的樣式即可。

在下方的Dark Mode選項里，你可以選擇為網頁開啟暗色模式，只需要把false變成true即可。

菜單與側邊欄項目

在# Menu Settings下面你可以選擇開啟菜單項目。它們都是默認關閉（被注釋掉）的。需要哪一項，取消注釋即可。

注意，除了home與archives，其他的頁面需要手動添加。比如，你想要開啟about頁面，那麼就要在Hexo根目錄下運行：

hexo new page "about"

隨後在source文件夾下面就會生成about目錄，裡面有index.md文件。你可以更改文件內的標題，隨後在date行下面加一句：

+ type: "about"

如果需要還可以加上comments: false來為這個頁面關閉評論（後文會講到如何添加評論功能）。

就大功告成了。你可以隨意編輯這個頁面。你也可以自定義菜單項目，甚至可以嵌套項目，具體做法可以查看官方教程。

這裡舉個簡單的例子，假如我們要新建一個菜單項目叫做notes，首先在# Menu Settings的menu下面新建一行：

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
+ notes: /notes/ || fa fa-sticky-note

圖標的程式碼可以去Font Awesome網頁上查找。隨後如前面的例子，手動添加頁面即可。如要添加自定義菜單的中文翻譯，需要新建source/_data/languages.yml文件，然後寫入如下內容：

zh-CN:
  menu:
    notes: 筆記

任何翻譯都可以在這個文件里設置或覆蓋。

此外，在# Sidebar Settings下面可以找到關於側邊欄的一些設置。除了它本身的一些參數，你還可以設置其中的一些內容，比如social下面可以開啟你的社交網路帳號與主頁。另外，搜索back2top還可以讓你把回到首頁的按鈕放在側邊欄，並開啟閱讀進度百分比功能。

網站圖標與頭像

網站圖標可以在# Site Information Settings的favicon下面找到。默認讀取的圖標位於themes/next/source/images/下面。我們當然不應該修改themes/next裡面的內容，因此如果要更換，可以把圖標放在source/images/目錄里（如果沒有這個目錄就自己新建）。教程還推薦了這個網站來生成你自己的圖標。

頭像則在側邊欄設置的# Sidebar Avatar下面。你可以把頭像放在source/uploads/目錄里（如果沒有這個目錄就自己新建）。

知識共享許可協議設置

Creative Commons設置可以搜索creative_commons。它支援多種協議，默認是by-nc-sa。更多協議可以參考維基百科的解釋。

程式碼塊樣式

你可以在這裡查看並選擇你喜歡的樣式，隨後搜索codeblock修改。你還可以打開複製按鈕，方便讀者複製程式碼塊里的內容。

閱讀進度、書籤與GitHub橫幅

搜索reading_progress即可開啟閱讀進度功能。還可以在bookmark開啟書籤功能，讀者可以選擇點擊書籤圖標來保存閱讀進度，下次進入這篇文章時就可以繼續閱讀。

下面的github_banner可以讓你開啟GitHub橫幅，它會在網頁右上角顯示一個小橫幅，直通你的GitHub主頁。

字體設置

在# Font Settings可以更改字體設置，NexT允許你更改全局字體、網站標題字體、h1-h6標題字體，文章字體與程式碼字體。如果你的訂製程度比較高，還是參看官方教程比較好。

設置中英文自動空格

這個功能已經內置在NexT主題中。在source/_data/next.yml中搜索並開啟pangu即可。

增加第三方服務

同樣，官方教程還是比較詳細的，解釋了很多第三方插件的用法，囊括了數學公式、評論系統、網站統計與分析、評分與分享小部件、搜索功能、即時聊天室等等。這裡只講一下我個人開啟的服務。

LeanCloud閱讀統計功能

這部分參考了這篇文章。

註冊LeanCloud時，建議註冊國際版，中國版要驗證的東西比較多。然後新建一個應用，名字可以任意寫。隨後打開應用，點擊存儲條目下的結構化數據，然後點擊創建Class，名稱為Counter，其他保持默認。隨後去設置里的應用Keys記下AppID與AppKey。

打開source/_data/next.yml，搜索leancloud_visitors，將其打開，填寫剛才的AppID與AppKey，security也設置為打開。隨後的步驟比較多且複雜，請參考上面的文章，但是介於現在LeanCloud又有更新，所以做一點補充說明。

首先，上面的參考文章里，需要打開NexT主題配置文件的時候，我們統一打開
source/_data/next.yml。要時刻記住NexT主題的目錄不要修改。

其次，在部落格配置文件_config.yml里，在theme:next後面（你也可以添加到別的位置）添加的內容是：

leancloud_counter_security:
  enable_sync: true
  app_id: 你的AppID
  app_key: 你的AppKey
  username: 你用"hexo lc-counter register"註冊的用戶名
  password: 你用"hexo lc-counter register"註冊的密碼

記得在這之前要安裝：

npm install hexo-leancloud-counter-security

然後，在配置deploy的時候，因為我們多加了一項，所以應該改為：

deploy:
  - type: git
    repo: 你的GitHub目錄地址
    branch: master
  - type: leancloud_counter_security_sync

也就是每一個type前面都要加上-。

隨後，在設置Counter的許可權時，我們在add_field與create均選擇指定用戶，隨後在用戶名里輸入你用hexo lc-counter register註冊的用戶名，它會自動找到對應的用戶。在設置完後，兩項都應該顯示0 Role, 1 User。對於delete，選擇指定用戶留空即可，會顯示顯示0 Role, 0 User。

Valine評論系統

在前一步的基礎上，在source/_data/next.yml找到# Valine，將其打開，並且填寫appId與appKey。在這裡，我們把visitor設置為true，隨後把上一步的leancloud_visitors下的enable設置為false，因為兩者之間有衝突。

不蒜子網頁計數器功能

這個功能可以顯示網站的瀏覽量和訪客數。在source/_data/next.yml里找到busuanzi_count，將其打開，因為我們已經開啟了LeanCloud的計數功能，所以將post_views關掉（否則文章內部的閱讀次數會有異常），其他保持打開即可。

如果在本地測試，你會發現統計數據非常大，這是因為不蒜子通過域名統計，所以localhost:4000的數字會比較大，不必擔心。

Local Search搜索功能

首先在根目錄安裝：

npm install hexo-generator-searchdb

隨後，在部落格配置文件_config.yml里加入：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然後在source/_data/next.yml里打開local_search。

Word Counter字數統計與閱讀時長功能

首先在根目錄安裝：

npm install hexo-word-counter

隨後，在部落格配置文件_config.yml里加入：

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

需要注意的是，如果插件需要安裝新的包，而你像我一樣設置了自動部署，那麼你可能需要更新一下你的工作流，在安裝Hexo那一步加一些步驟，安裝這些依賴。修改.github/workflows/main.yml的內容，將新的依賴安裝寫在npm install那一行後面即可。

VirMach 便宜 VPS

QNews

QNews