此篇會介紹如何設置 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 |
Step3:修改根目錄 _config.yml 中的 theme 參數(預設是 landscape)
1 | +theme: landscape |
NexT 樣式設定
下方會介紹部落格樣式中最基礎的設置。
Scheme Settings
第一個介紹的一定非 Scheme 莫屬,替部落格換上喜歡的皮。
Step1:搜尋 Scheme
Step2:將選擇的 scheme 取消註解(我選擇 Mist)
1 | # Schemes |
下方演示 NexT 提供的四種 schemes
程式碼區塊樣式
撰寫技術文章絕對不能缺少的 code block,換上舒服的樣式好比設置編輯器的樣式一樣。
Step1:搜尋 codeblock
Step2:設置參數
- highlight_theme:代碼高亮(我選擇 galactic,後來因為要客製化所以選擇 normal)
- 由於不同的 Next 版本可能有的 highlight_theme 樣式不同,因此建議大家都可以都試試看在選擇比較喜歡的。
- copy_button:hover 會顯示複製按鈕
- style:外觀樣式(我選擇原本是選 mac,後來發現 flat 比較適合客製化其它樣式)
1 | codeblock: |
如果上面設置完沒有效果,請確認根目錄 _config.yml 檔案中的 highlight
參數 enable 是否設置為 true。
1 | highlight: |
Menu 設置
設置 menu 選單列的內容(home、about、tags、categories、archives、schedule、sitemap、commonweal),預設只有開啟兩個(home、archives)。
Step1:搜尋 Menu Settings
Step2:設置參數
- 需要啟用就將對應的註解移除,下方範例示範開啟 tags、categories
1 | menu: |
Hexo 原生是使用 Font Awesome icon(註解中有寫),並透過 短路求值(Short-circuit evaluation)
的方式在路徑後方加上 icon 樣式(可以修改其它 icon 樣式)。
Step3:menu 可以設置是否要開啟 icon 圖示 以及 badges 數量(用來顯示對應的數量)。
1 | # Enable / Disable menu icons / item badges. |
點選 menu 中預設(home、archives)之外的路徑,會出現路徑錯誤(例如:Cannot GET/about/),因為我們還沒新增對應的頁面,從根目錄 source 資料夾中是否有對應的資料夾,新增頁面作法可以參考下一篇文章。