更新 Hexo 樣式

發表於 更新於 分類於

在 Hexo 官網的 Themes 可以看到有很多模板可以使用，可惜的是，有些連結已經失效，有些很久沒有維護，要找到真的喜歡又可以用的模板其實並不太容易。

最後我選擇的是 NexT，主要是看上它簡潔的風格以及這幾年都有持續在維護、更新 (甚至在寫這篇文章的前一天才剛發布 8.18.0 版)，也因為上述原因，使用者多，未來如果要客製化調整樣式應該也會有更多資源。

NexT 安裝

基本上照著官方教學就可以了，指令也不多，下面整理了安裝步驟：

1. npm

1
npm install hexo-theme-next

2. 設定 _config.yml

找到 theme，把它改成 next (預設樣式是 landscape)

1
theme: next

3. 完成

啪！沒了！
啪！沒了！

就這樣兩個步驟就好了，之後再來微調樣式

客製化樣式設定

要客製化樣式的方法不只一種(詳細可以參考這篇文章)，這邊我使用的是我認為最合理的作法：新增 _config.next.yml

作法也很簡單，只要一行指令就好

1
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

因為這個檔案已經存在 node_modules 資料夾中，透過上面指令複製出來，就可以取代 node_modules 中的預設設定了。

裡面可以調整的設定很多，NexT 也有文章，但其實還是有點不夠用，還在摸索中。

參考資料1
參考資料2

設定 menu

在設定檔中加上這段，就可以設定 menu (可以調整順序)

1
2
3
4
5
6
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

由於預設頁面只有 home 和 archives，如果只有在設定檔啟用，則會看到 Cannot GET /categories/ 這類的錯誤。

因此，需要透過下面指令來創建對應頁面

1
2
3
hexo new page "about"
hexo new page "tags"
hexo new page "categories"

此時，會新增對應的資料夾與 index.md 文件，接下來只要在文件內添加一些基本設定就好，例如：

1
2
3
title: categories
date: 2023-08-03 18:43:29
type: "categories"