上一篇設定好網站之後，接著就來設定主題吧
不過在開始之前我們需要先建立一個替代主題配置檔案
替代主題配置檔案
這是什麼
直接修改主題的原始檔案容易造成日後更新失敗或是在維護上造成困難
所以 Hexo 提供了兩種不同的替代主題配置檔案格式
1. theme_config
適用 Hexo 版本：2.8.2 以上
在網站配置檔內新增 theme_config 選項
並將主題配置檔內想要調整的部分複製到 theme_config 下方，而且要縮排兩格
2. _config.[theme].yml
適用 Hexo 版本：5.0.0 以上
將主題內的 _config.yml 複製到根目錄並且重新命名為 _config.[theme].yml
優先順序：theme_config＞_config.[theme].yml＞主題配置檔
如何新增
這裡我選擇使用 _config.[theme].yml 作為主題的替代檔案，最主要的原因是簡單易用
建立檔案的方式依你的主題安裝方式而異
如果是透過 npm 指令安裝主題，執行以下指令
| cp node_modules/hexo-theme-next/_config.yml _config.next.yml |
若是透過 git clone 的方式安裝主題，則是使用這個指令
| cp themes/next/_config.yml _config.next.yml |
完成後，在根目錄可以看到 _config.next.yml 這一個檔案
主題設定
主題版面
修改位置：第 38 行
預設為 Muse 版面，將想要的版面取消註釋即可套用
| # Schemes scheme: Muse #scheme: Mist #scheme: Pisces #scheme: Gemini |
深色模式
修改位置：第 44 行
開啟後會根據系統主題設定，自動切換至深色模式
| # Dark Mode darkmode: false |
網站圖示
修改位置：第 52 行
可以設定五種不同情況所使用的圖示
預設圖示的路徑是 \node_modules\hexo-theme-next\source\images\
可以在根目錄的 sources 資料夾內新增一個資料夾，來放置網站所需的圖片
| favicon: small: /images/favicon-16x16-next.png medium: /images/favicon-32x32-next.png apple_touch_icon: /images/apple-touch-icon-next.png safari_pinned_tab: /images/logo.svg #android_manifest: /manifest.json |
選單內容
修改位置：第 84 行
一般只需要將前五項取消註釋即可
但要特別注意的是，除了 home 和 archieve 以外的頁面都需要手動建立才能使用
| 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 #schedule: /schedule/ || fa fa-calendar #sitemap: /sitemap.xml || fa fa-sitemap #commonweal: /404/ || fa fa-heartbeat |
新增「標籤」頁面
建立 tags 頁面
| hexo new page tags |
開啟 \sources\tags 資料夾內的 index.md
新增 type 屬性，值為 tags
| --- title: 標籤 date: 2021-07-06 15:43:29 type: tags --- |
新增「分類」頁面
建立 categories 頁面
| hexo new page categories |
開啟 \sources\categories 資料夾內的 index.md
新增 type 屬性，值為 categories
| --- title: 分類 date: 2021-07-06 15:43:29 type: categories --- |
新增「關於」頁面
只需要建立 about 頁面，不用新增 type 屬性
| hexo new page about |
側邊欄設定
顯示位置
修改位置：第 105 行
可以設定側邊欄要顯示在左邊還是右邊
| sidebar: # Sidebar Position. position: left #position: right |
顯示時機
修改位置：第 115 行
有以下四種顯示方式可供選擇
- 文章內顯示
- 常駐
- 隱藏
- 關閉
| # Sidebar Display (only for Muse | Mist), available values: # - post expand on posts automatically. Default. # - always expand for all pages automatically. # - hide expand only when click on the sidebar toggle icon. # - remove totally remove sidebar including sidebar toggle. display: post |
作者照片
修改位置：第 128 行
將圖片路徑填入 url 之後，側邊欄就會顯示作者照片了
下方兩個選項 rounded 和 rotated 分別調整圖片的形狀（方形或圓形）和游標移到圖片上是否旋轉
| avatar: # Replace the default image and set the url here. url: #/images/avatar.gif # If true, the avatar will be dispalyed in circle. rounded: false # If true, the avatar will be rotated with the cursor. rotated: false |
社群連結
修改位置：第 143 行
預設有 10 種不同的社群連結可以使用
當然也可以自行加入，格式為「Name: URL || icon」（開頭記得縮排兩格）
圖示到 Font Awesome 尋找，找到後將右上角的 fab fa-xxxx 複製到 || 後面即可
| # Usage: `Key: permalink || icon` social: #GitHub: https://github.com/yourname || fab fa-github #E-Mail: mailto:yourname@gmail.com || fa fa-envelope #Weibo: https://weibo.com/yourname || fab fa-weibo #Google: https://plus.google.com/yourname || fab fa-google #Twitter: https://twitter.com/yourname || fab fa-twitter #FB Page: https://www.facebook.com/yourname || fab fa-facebook #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow #YouTube: https://youtube.com/yourname || fab fa-youtube #Instagram: https://instagram.com/yourname || fab fa-instagram #Skype: skype:yourname?call|chat || fab fa-skype |
Footer 資訊
修改位置：第 202 行
Footer 能夠更改的部分有：
1. since ：初始年分（下方以設定 2020 年為例）
- 關閉：© 2021
- 開啟：© 2020 - 2021
2. icon ：年分和作者名稱中間的圖示
- name ：圖示名稱（預設為愛心）
- animated ：圖示是否要有特效
- color ：圖示顏色
3. copyright ：版權所有者（預設顯示網站配置檔中的 author ）
4. powered ：是否顯示「由 Hexo & NexT 強力驅動」
| footer: # Specify the year when the site was setup. If not defined, current year will be used. #since: 2020 # Icon between year and copyright info. icon: # Icon name in Font Awesome. See: https://fontawesome.com/icons name: fa fa-heart # If you want to animate the icon, set it to true. animated: false # Change the color of icon, using Hex Code. color: "#ff0000" # If not defined, `author` from Hexo `_config.yml` will be used. copyright: # Powered by Hexo & NexT powered: true |
「閱讀全文」按鈕
修改位置：第 243 行
只要在文章內加入 <!-- more --> 就會顯示「閱讀全文」按鈕
關閉之後 <!-- more --> 以下的內容依舊會隱藏，但就只能點選標題觀看全文
| # Read more button # If true, the read more button will be displayed in excerpt section. read_more_btn: true |
標籤圖示
修改位置：第 261 行
開啟後，文章最底部的每個標籤最前面會從 # 變成 icon
| # Use icon instead of the symbol # to indicate the tag at the bottom of the post tag_icon: false |
總結
因為 NexT 的主題配置檔案內容足足有 954 行，所以就分成外觀和功能兩個部分
這一次修改的主要還是外觀類型的設定，之後會介紹比較偏向使用體驗的功能部分
參考資料
達人
