Hexo 靜態博客指南：建站教程（中）

本文最初發佈於個人我的博客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 https://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 https://github.com/next-theme/hexo-theme-next themes/next

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

[submodule "themes/next"]
    path = themes/next
    url = https://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那一行後面便可。