上一篇設(shè)定好網(wǎng)站之後，接著就來設(shè)定主題吧
不過在開始之前我們需要先建立一個(gè)替代主題配置檔案
替代主題配置檔案
這是什麼
直接修改主題的原始檔案容易造成日後更新失敗或是在維護(hù)上造成困難
所以 Hexo 提供了兩種不同的替代主題配置檔案格式
1. theme_config
適用 Hexo 版本：2.8.2 以上
在網(wǎng)站配置檔內(nèi)新增 theme_config 選項(xiàng)
並將主題配置檔內(nèi)想要調(diào)整的部分複製到 theme_config 下方，而且要縮排兩格
2. _config.[theme].yml
適用 Hexo 版本：5.0.0 以上
將主題內(nèi)的 _config.yml 複製到根目錄並且重新命名為 _config.[theme].yml
優(yōu)先順序：theme_config＞_config.[theme].yml＞主題配置檔
如何新增
這裡我選擇使用 _config.[theme].yml 作為主題的替代檔案，最主要的原因是簡單易用
建立檔案的方式依你的主題安裝方式而異
如果是透過 npm 指令安裝主題，執(zhí)行以下指令
| cp node_modules/hexo-theme-next/_config.yml _config.next.yml |
若是透過 git clone 的方式安裝主題，則是使用這個(gè)指令
| cp themes/next/_config.yml _config.next.yml |
完成後，在根目錄可以看到 _config.next.yml 這一個(gè)檔案
主題設(shè)定
主題版面
修改位置：第 38 行
預(yù)設(shè)為 Muse 版面，將想要的版面取消註釋即可套用
| # Schemes scheme: Muse #scheme: Mist #scheme: Pisces #scheme: Gemini |
深色模式
修改位置：第 44 行
開啟後會(huì)根據(jù)系統(tǒng)主題設(shè)定，自動(dòng)切換至深色模式
| # Dark Mode darkmode: false |
網(wǎng)站圖示
修改位置：第 52 行
可以設(shè)定五種不同情況所使用的圖示
預(yù)設(shè)圖示的路徑是 \node_modules\hexo-theme-next\source\images\
可以在根目錄的 sources 資料夾內(nèi)新增一個(gè)資料夾，來放置網(wǎng)站所需的圖片
| 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 |
選單內(nèi)容
修改位置：第 84 行
一般只需要將前五項(xiàng)取消註釋即可
但要特別注意的是，除了 home 和 archieve 以外的頁面都需要手動(dòng)建立才能使用
| 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 |
新增「標(biāo)籤」頁面
建立 tags 頁面
| hexo new page tags |
開啟 \sources\tags 資料夾內(nèi)的 index.md
新增 type 屬性，值為 tags
| --- title: 標(biāo)籤 date: 2021-07-06 15:43:29 type: tags --- |
新增「分類」頁面
建立 categories 頁面
| hexo new page categories |
開啟 \sources\categories 資料夾內(nèi)的 index.md
新增 type 屬性，值為 categories
| --- title: 分類 date: 2021-07-06 15:43:29 type: categories --- |
新增「關(guān)於」頁面
只需要建立 about 頁面，不用新增 type 屬性
| hexo new page about |
側(cè)邊欄設(shè)定
顯示位置
修改位置：第 105 行
可以設(shè)定側(cè)邊欄要顯示在左邊還是右邊
| sidebar: # Sidebar Position. position: left #position: right |
顯示時(shí)機(jī)
修改位置：第 115 行
有以下四種顯示方式可供選擇
- 文章內(nèi)顯示
- 常駐
- 隱藏
- 關(guān)閉
| # 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 之後，側(cè)邊欄就會(huì)顯示作者照片了
下方兩個(gè)選項(xiàng) rounded 和 rotated 分別調(diào)整圖片的形狀（方形或圓形）和游標(biāo)移到圖片上是否旋轉(zhuǎn)
| 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 |
社群連結(jié)
修改位置：第 143 行
預(yù)設(shè)有 10 種不同的社群連結(jié)可以使用
當(dāng)然也可以自行加入，格式為「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 ：初始年分（下方以設(shè)定 2020 年為例）
- 關(guān)閉：? 2021
- 開啟：? 2020 - 2021
2. icon ：年分和作者名稱中間的圖示
- name ：圖示名稱（預(yù)設(shè)為愛心）
- animated ：圖示是否要有特效
- color ：圖示顏色
3. copyright ：版權(quán)所有者（預(yù)設(shè)顯示網(wǎng)站配置檔中的 author ）
4. powered ：是否顯示「由 Hexo & NexT 強(qiáng)力驅(qū)動(dòng)」
| 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 行
只要在文章內(nèi)加入 <!-- more --> 就會(huì)顯示「閱讀全文」按鈕
關(guān)閉之後 <!-- more --> 以下的內(nèi)容依舊會(huì)隱藏，但就只能點(diǎn)選標(biāo)題觀看全文
| # Read more button # If true, the read more button will be displayed in excerpt section. read_more_btn: true |
標(biāo)籤圖示
修改位置：第 261 行
開啟後，文章最底部的每個(gè)標(biāo)籤最前面會(huì)從 # 變成 icon
| # Use icon instead of the symbol # to indicate the tag at the bottom of the post tag_icon: false |
總結(jié)
因?yàn)?NexT 的主題配置檔案內(nèi)容足足有 954 行，所以就分成外觀和功能兩個(gè)部分
這一次修改的主要還是外觀類型的設(shè)定，之後會(huì)介紹比較偏向使用體驗(yàn)的功能部分
參考資料
達(dá)人
