Hexo 搭建個人博客 #04 主題的安裝與自定義樣式

Hexo 博客主題#

Hexo 默認的主題簡陋？不太好看？就是不喜歡？

其實想要更換 Hexo 的主題是很簡單的，Hexo 提供了可插拔式的主題機制，讓我們可以輕鬆地更換博客主題。

可以在「官方收集的主題列表」挑選任意一個你喜歡的主題，總有一個適合你。

「skapp」這個主題挺不錯的，接下來就參照這個主題的官網的教程進行安裝使用。

主題的安裝（skapp）#

利用 Docker 快速搭建 node.js v8.9.3 環境

docker run -it --name node8 --rm \
  -v $(pwd):/app -w /app \
  -p 4000:4000 \
  node:8.9.3 /bin/bash

在 windows 下各種報錯，無奈轉到 Linux 的機子上操作

cd blog

# 將 skapp 主題 clone 至 themes/skapp 文件夾下
git clone https://github.com/Mrminfive/hexo-theme-skapp.git themes/skapp

# 安裝 skapp 主題指定的依賴
# 基於 2018-12-19，有個小坑：要使用 node.js v8.9.3 版本才能正常安裝這些依賴，是由於 lunr 仍然在使用 nodejieba 2.2.5 引起的
npm install --save hexo-autoprefixer hexo-filter-cleanup hexo-generator-feed hexo-generator-sitemap hexo-renderer-sass hexo-renderer-swig mamboer/lunr.js moment node-sass object-assign

hexo clean

hexo server

🚩 能否使用 Git Submodule 進行管理第三方主題？

上面直接 clone 了 hexo-theme-skapp 倉庫於 themes/skapp，帶有 .git 文件夾，git 識別為 Submodule，但沒有產生外鏈到原 hexo-theme-skapp 倉庫，只是個普通的文件夾。當我們把自己的博客倉庫 clone 到本地後會發現 themes/skapp 只是個普通的空文件夾 😧，主題不見了。

未使用子模塊

那能不能在執行 clone 操作時能直接拉取該主題倉庫，而且該主題的源碼不托管在我們的倉庫中呢？可以的，這時就該使用 git submodule 了 👍。

# 先取消暫存 themes/skapp 目錄
git rm -r themes/skapp

# 添加子模塊
git submodule add [email protected]:Mrminfive/hexo-theme-skapp.git themes/skapp

# 可以看到新增 .gitmodules 文件
git status

.gitmodules 描述了 Submodule 的遠程倉庫信息與本倉庫的相對路徑：

[submodule "themes/skapp"]
	path = themes/skapp
	url = [email protected]:Mrminfive/hexo-theme-skapp.git

.git/config 中也自動添加了 submodule 信息：

[submodule "themes/skapp"]
	url = [email protected]:Mrminfive/hexo-theme-skapp.git
	active = true

以及產生了 .git/modules 文件夾，最後提交並推送到博客的遠程倉庫：

git commit -m 'chore: convert to skapp submodule'

git push

GitHub 倉庫上會顯示出當前所引入的子模塊版本：

convert to skapp submodule

當我們在其他地方進行倉庫的 git clone [email protected]:y0ngb1n/y0ngb1n.github.io.git 時，發現 themes/skapp 是個空文件夾，意味著沒有安裝該主題。那麼如何 clone 一個完整的倉庫呢？只需如下操作即可：

# 方式一：使用  submodule init / update
git clone [email protected]:y0ngb1n/y0ngb1n.github.io.git blog && cd blog
git submodule init && git submodule update

# 方式二：添加 --recursive 參數
git clone [email protected]:y0ngb1n/y0ngb1n.github.io.git --recursive

當該第三方主題更新了，我們可以更新子模塊：

git submodule update --remote themes/skapp

或者切換至 themes/skapp 目錄下使用 git 命令切換到不同的歷史版本，如果對子模塊執行了相關操作後，會提示 modified: themes/skapp (new commits)：

$ git status
On branch source
Your branch is up to date with 'origin/source'.

Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   themes/skapp (new commits)

然後按正常流程提交並推送到遠程倉庫即可。

主題的配置#

主題的相關配置可以參考「skapp 官方說明」，可以設置：菜單、博客信息、聯繫方式、外部鏈接等。

header 的背景圖（隨機圖）

使用了「Spencer Woo」家提供的 https://api.spencerwoo.com 接口，可隨機不同的圖片，在 _config.yml 中設置：

## header 的背景圖
header_cover: https://api.spencerwoo.com

開啟「不蒜子統計」

skapp 主題已經集成了「不蒜子統計」，但默認是關閉的，只需在 _config.yml 中開啟即可：

# Busuanzi
busuanzi: true

Skapp Hexo 主題

歡迎圍觀我的博客 https://y0ngb1n.github.io/ 👋

自定義樣式#

待續...

Aben Blog