Hexo 簡易調教指南（三）：主題設定—外觀篇

發表日期： 分類： ， 字數： 4,043 字 閱讀時間 ≈ 7 分鐘

上一篇設定好網站之後，接著就來設定主題吧

不過在開始之前我們需要先建立一個替代主題配置檔案

替代主題配置檔案

這是什麼

直接修改主題的原始檔案容易造成日後更新失敗或是在維護上造成困難

所以 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 行

NexT 內建 Muse、Mist、Pisces 和 Gemini 等四種版面可供選擇

預設為 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

新增「標籤」頁面

NexT 預設「標籤」頁面

建立 tags 頁面

hexo new page tags

開啟 \sources\tags 資料夾內的 index.md

新增 type 屬性，值為 tags

---
title: 標籤
date: 2021-07-06 15:43:29
type: tags
---

新增「分類」頁面

NexT 預設「分類」頁面

建立 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 行

有以下四種顯示方式可供選擇

  1. 文章內顯示
  2. 常駐
  3. 隱藏
  4. 關閉
# 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

修改位置：第 202 行

NexT 預設「Footer」資訊

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 --> 就會顯示「閱讀全文」按鈕

NexT 開啟「閱讀全文」按鈕的效果

關閉之後 <!-- more --> 以下的內容依舊會隱藏，但就只能點選標題觀看全文

NexT 關閉「閱讀全文」按鈕的效果

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

標籤圖示

修改位置：第 261 行

開啟後，文章最底部的每個標籤最前面會從 # 變成 icon

NexT 標籤 icon

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: false

總結

因為 NexT 的主題配置檔案內容足足有 954 行，所以就分成外觀和功能兩個部分

這一次修改的主要還是外觀類型的設定，之後會介紹比較偏向使用體驗的功能部分

參考資料

Documentation | NexT

配置 | Hexo