0%

Hexo 主題 NexT 設置 (一)

此篇會介紹如何設置 Hexo 主題 NexT 以及設置 Settings。

範例的環境版本

hexo 版本:6.0.1
hexo-cli 版本:4.3.0
next 版本:7.8.0

更換主題 theme

Step1:從官方主題找尋自己順眼的

最近主流有兩個推薦的(我選擇 Next)

Step2:下載主題 Download 或 clone 到 themes 資料夾底下

切記要先進入該專案根目錄的 themes 資料夾底下

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

Step3:修改根目錄 _config.yml 中的 theme 參數(預設是 landscape)

_config.yml
1
2
+theme: landscape
-theme: hexo-theme-next

NexT 樣式設定

下方會介紹部落格樣式中最基礎的設置。

Scheme Settings

第一個介紹的一定非 Scheme 莫屬,替部落格換上喜歡的皮。

Step1:搜尋 Scheme

Step2:將選擇的 scheme 取消註解(我選擇 Mist)

themes/hexo-theme-next/_config.yml
1
2
3
4
5
# Schemes
# scheme: Muse
scheme: Mist
# scheme: Pisces
# scheme: Gemini

下方演示 NexT 提供的四種 schemes

NexT 提供的四種 schemes

程式碼區塊樣式

撰寫技術文章絕對不能缺少的 code block,換上舒服的樣式好比設置編輯器的樣式一樣。

Step1:搜尋 codeblock

Step2:設置參數

  • highlight_theme:代碼高亮(我選擇 galactic,後來因為要客製化所以選擇 normal)
    • 由於不同的 Next 版本可能有的 highlight_theme 樣式不同,因此建議大家都可以都試試看在選擇比較喜歡的。
  • copy_button:hover 會顯示複製按鈕
  • style:外觀樣式(我選擇原本是選 mac,後來發現 flat 比較適合客製化其它樣式)
themes/hexo-theme-next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
- highlight_theme: normal
+ highlight_theme: galactic
# Add copy button on codeblock
copy_button:
- enable: false
+ enable: true
# Show text copy result.
- show_result: false
+ show_result: false
# Available values: default | flat | mac
- style:
+ style: flat

如果上面設置完沒有效果,請確認根目錄 _config.yml 檔案中的 highlight 參數 enable 是否設置為 true。

_config.yml
1
2
highlight:
enable: true

設置 menu 選單列的內容(home、about、tags、categories、archives、schedule、sitemap、commonweal),預設只有開啟兩個(home、archives)。

Step1:搜尋 Menu Settings

Step2:設置參數

  • 需要啟用就將對應的註解移除,下方範例示範開啟 tags、categories
themes/hexo-theme-next/_config.yml
1
2
3
4
5
6
7
8
9
10
11
menu:
home: / || fa fa-home
#about: /about/ || fa fa-user
- #tags: /tags/ || fa fa-tags
+ tags: /tags/ || fa fa-tags
- #categories: /categories/ || fa fa-th
+ categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
#sitemap: /sitemap.xml || fa fa-sitemap
#commonweal: /404/ || fa fa-heartbeat

Hexo 原生是使用 Font Awesome icon(註解中有寫),並透過 短路求值(Short-circuit evaluation) 的方式在路徑後方加上 icon 樣式(可以修改其它 icon 樣式)。

Step3:menu 可以設置是否要開啟 icon 圖示 以及 badges 數量(用來顯示對應的數量)。

themes/hexo-theme-next/_config.yml
1
2
3
4
5
# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
- badges: false
+ badges: true

menu tag

點選 menu 中預設(home、archives)之外的路徑,會出現路徑錯誤(例如:Cannot GET/about/),因為我們還沒新增對應的頁面,從根目錄 source 資料夾中是否有對應的資料夾,新增頁面作法可以參考下一篇文章。

路徑錯誤