【 Hexo網誌架設 3 】
Hexo主題設定-nexT-01

發表於 2022-07-12 分類於 Hexo網誌架設

Hexo的主題很多，可以多看看，我選的是 nexT ，今天的主題也會是 nexT 。

主題的安裝路徑（theme）

主題安裝在 theme 底下：

用編輯器打開 hexo 的 _config.yml 檔案
最底下的 theme:landscape 前面加上 # ，這是預設的主題
下面再加上 theme: next
可以打開 server 看一下新的主題

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: next

文件中的 # 是註解的意思，有加 # 就不會被執行，通常在做文件修改的時候，不會把原本的設定刪除掉，以防之後發生了什麼意外，還可以還原設定。

‼ 以下的設定主要是在 theme 底下設定的，請注意。 ‼

檔案名稱： ../themes/next/_config.yml

Scheme 設定

# Scheme Settings

找到下面這段：

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

scheme 是進入網頁時會出現的動畫模式，nexT 給了四種模式可選擇，要設定成什麼模式，都可以試一下。

黑暗模式

# Dark Mode

程式碼就在 Scheme 的下一行，如果要暗黑模式，darkmode 的設定值就改為 true。

設定頁尾的作者連結

主選單設置

# Menu Settings

# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
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

格式為：

分頁名稱: 路徑 || Icon 圖示

目前我只有開二個項目，是因為每開一個項目，就要另外開個頁面檔案，而這二個項目是 Hexo 預設的，這一篇主要是先把外在美設定好。
Icon 圖示：是首頁旁邊的那個圖示。圖示可以來這邊找。

選單樣式設定

再下一行：

# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true

icons：圖示是否要顯示
badges：是否要顯示篇數

側邊欄位置

# Sidebar Settings

# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
  # Sidebar Position.
  #position: left
  position: right

預設是靠左。

頭像

這是放照片的地方，只是我把照片換成 QRCode 。

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: ../images/avatar.png
  # If true, the avatar will be displayed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

url：是放圖片的路徑
rounded：圖片會變成圓的
rotated：圖片會隨著游標方向旋轉

圖片路徑，hexo 預設是沒有放圖片的資料夾，我在 soure 底下設了一個 images 資料夾。

你的社群連結

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/huang0429 || fab fa-github
  E-Mail: mailto:iswork.huang@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: 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

再下一段：

social_icons:
  # 是否開啟顯示 icon 功能
  enable: true
  # 是否只顯示 icon，false 則只會顯示圖示
  icons_only: false
  # 若設定 true，滑動到社群連結時，會有效果
  transition: false

網頁圖示（ Favicon ）

網路上製作 Favicon 的線上工具蠻多的。
我製作的大小是 16px。
檔名一樣是取 favicon.ico，直接覆蓋原本的icon。

# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon.ico
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

上面是預設的路徑，因為對這個主題還在摸索，所以不會自訂路徑，會直接取一樣的檔名，然後覆蓋上去，以防因為路徑錯誤而無法顯示圖片。

回到頂部按鈕＋進度(%)

back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

sidebar：進度(%)會在個人資訊下，可以試看看（看起來會有點怪）

scrollpercent：顯示閱讀文章時的進度(%)

閱讀進度條

# Reading progress bar
reading_progress:
  enable: true
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false
  color: "#37c6c0"
  height: 3px

start_at: 起點
position: 位置
reversed: 反轉
color: 進度條的顏色
height: 進度條的厚度

主題的安裝路徑 （theme）