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
當該主題更新了,我們可以更新子模塊:
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
歡迎圍觀 我的博客 https://y0ngb1n.github.io/ 👋
自定義樣式
待續...