自架部落格(3) 換個跟別人一樣的 NexT 主題

發表於 更新於 分類於
看膩了預設的主題？那就來換個主題吧。

Hexo 的主題其實也不少，也有很多有個性的主題，各位可以到 Hexo 的 Themes 或是 Google 找找。這次我採用的是比較多人用的 NexT。主要原因就是看起來比較乾淨、有分類，最重要的是網路上有很多相關的教學（我就懶）。這個主題用的人很多，很容易就會看到一樣主題的，不過寫部落格主要還是文章內容，樣式就看個人吧。

如何安裝

NexT有提供2種方式安裝

  1. Hexo 5.0 或以上，可以使用 npm 安裝
  2. git clone 他的專案

我採用 npm 的方式安裝，因為我的是 Hexo 6.2.0，而且後續要升級版本也方便很多。

npm的安裝方式（推薦）

到專案位置，輸入以下指令：

1
npm install hexo-theme-next

預設安裝最新版，我當時的最新版是 8.12.1

git clone 的安裝方式

到專案位置，輸入以下指令：

1
git clone https://github.com/next-theme/hexo-theme-next themes/next

將 NexT 的原始碼複製到專案目錄底下 themes 資料夾裡的 next 資料夾，沒有 next 資料夾也沒關係，會自己建立。

npm安裝的方式不需要把原始碼放到 themes/next 內

安裝完後，到專案目錄底下的 _config.yml 更換主題設定為 NexT

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

啟動看看主題的樣子，順便測試是否安裝成功

指令：

1
hexo server

圖1：啟動 Hexo server 後的樣子

圖2：更換成功，顯示 NexT 預設的主題樣式

配置檔位置異動

安裝好主題之後，如果想要修改主題提供的配置要怎麼辦呢？

首先我們先看看專案裡實際的檔案結構，會發現 _config 居然會有兩個：_config.yml 和 _config.landscape.yml。看到 landscape 這個字有沒有覺得在換主題的時候有看到？沒錯，就是 Hexo 預設的主題，而 _config.landscape.yml 就是這個主題的設定檔。那麼我們NexT的主題設定檔放到專案目錄底下就可以了。

圖3：兩個 _config

npm安裝的做法

到專案目錄下的這個位置 \node_modules\hexo-theme-next ，找到 _config.yml，複製一份，然後修改名稱為 _config.next.yml，再把它移動到專案目錄下就可以了。之後修改NexT主題相關配置都只要修改專案目錄下的這份 _config.next.yml 即可。

git clone安裝的做法

到專案目錄下的這個位置 \themes\next，找到 _config.yml，複製一份，然後修改名稱為 _config.next.yml，再把它移動到專案目錄下就可以了。之後修改NexT主題相關配置都只要修改專案目錄下的這份 _config.next.yml 即可。

圖4：異動後的專案目錄

這樣，就把主題換成大家都在用的NexT了。

參考