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 進行管理第三方主題?

上面直接 clonehexo-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

convert to skapp submodule

當該主題更新了,我們可以更新子模塊:

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/ 👋

自定義樣式

待續...

參考資料

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章