自架部落格(4) NexT 主題配置介紹

發表於 更新於 分類於
主要會介紹 NexT 可修改的配置。由於可修改的東西實在太多，所以就只挑我有修改的地方。

這篇主要會介紹 NexT 可修改的配置。由於可修改的東西實在太多，所以就只挑我有修改的地方，如果要看更詳細的設定說明，可以到官網查看。

Core Configuration

NexT主題的核心設定，這裡我沒修改過設定。

如果需要修改網頁元件樣板，可以修改 custom_file_path 這裡的設置。

需要注意的是 cache 的設定是需要 NexT v6+ 才能夠使用。

Scheme

修改 NexT 主題樣式的地方

有4種 scheme 可以選擇，我選的是 Pisces。

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

他們的樣式分別是這樣：

Muse

這個是預設的樣式

圖1：Muse

Mist

圖2：Mist

Pisces

圖3：Pisces

Gemini

這個和上面的 Pisces 很像，不過這個多了陰影。

圖4：Gemini

另外還有 Dark Mode 可以使用，但是這個需要作業系統和瀏覽器的配合才有作用，而不是一直都啟用 Dark Mode。

1
2
# Dark Mode
darkmode: true

Site Information

修改 icon、網站 header 裡 <meta> 標籤的配置和版權宣告

這邊我只有修改 creative_commons（版權宣告），讓它在 sidebar 裡顯示出來。主要是創用 CC 的宣告。我是使用 by-nc-sa （姓名標示-非商業-相同方式分享）。除了我用的之外，NexT支援的還有以下幾種，我在下面簡單說明一下，可以依照自己的需求設定。

by：姓名標示

by-nc：姓名標示-非商業

by-nc-nd：姓名標示-非商業-禁止修改

by-nc-sa：姓名標示-非商業-相同方式分享

by-nd：姓名標示-禁止修改

by-sa：姓名標示-相同方式分享

cc-zero：拋棄著作權

Creative Commons 的說明

CC0 的說明

1
2
3
4
5
6
7
8
9
10
11
12
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
  # Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
  license: by-nc-sa
  # Available values: big | small
  size: big
  sidebar: true
  post: true
  # You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
  # CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
  language:

設定 menu 要顯示什麼欄位和 icon 的樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
# 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

效果：

圖5：Menu 的效果

搜尋要在下面的 Search Services 裡設定，這邊不會有。另外這裡需要注意除了 home 和 archives 外，其他欄位都需要自行添加頁面。這裡以 tags 和 categories 為例，需要在專案目錄下的 source 資料夾內建立相對應的資料夾，裡面再放一個 Markdown 檔案，說明 title 和 type。title 可自行輸入，中英文皆可，但 type 就必須和 key 值一樣，例如 tags 欄位就輸入 tags，categories 欄位就輸入 categories。

資料夾結構：

圖6：資料夾結構

tags/index.md 的內容：

1
2
3
4
5
---
title: 標籤
date: 2022-06-25 22:29:06
type: tags
---

categories/index.md 的內容：

1
2
3
4
5
---
title: 分類
date: 2022-06-25 22:29:25
type: categories
---

你沒看錯，只要這幾行就可以了，會自動幫你統計和顯示列表，不用自己輸入。

詳細可看官方文件的Custom Pages篇章說明

設定 sidebar 的樣式

這裡我主要調整顯示 social 的設定，顯示我的 GitHub 連結和改成只顯示 icon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 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/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

social_icons:
  enable: true
  icons_only: true
  transition: false

Sidebar 這裡的效果在首頁和文章裡會不一樣。首頁的時候只會有本站概要，在文章裡的時候會多了個文章目錄標籤顯示文章的大綱（預設顯示這個），而另一個標籤則是本站概要。

設定 footer 的樣式

這裡我只設定了愛心有動畫效果，其他都是預設值。另外，copyright 這個欄位，如果沒有填的話會去 _config.yml 裡的 author 欄位抓。而 beian（備案）欄位，是給海的另一邊使用者設定的。

1
2
3
4
5
6
7
8
9
footer:
  # 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: true
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

Misc

雜項

這裡我改了 codeblock 和 reading_progress。

codeblock 這個可以在 hexo 的 _config.yml 選擇 highlight 的引擎是 highlight 還是 prism，然後到 _config.next.yml 中分別設定一般和黑暗模式時的樣式。另外，NexT 也有提供網站來修改設定和預覽結果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: vs2015
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style:

reading_progress 的話就是設定文章閱讀的進度條，設定是否啟用、顯示位置和顏色等。

1
2
3
4
5
6
7
8
9
10
# 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

Third Party Plugins & Services

第三方套件

這裡面的東西就很多了，用的套件其實都很常見，依照需求設定吧。這裡我啟用了 fancybox。

1
2
3
# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: true

Statistics and Analytics

設定網站流量統計的地方，例如 Google Analytics、百度統計、Cloudflare Web Analytics 等。這些我不太熟悉，只有設定GA而已，就不再說明。

Search Services

設定站內搜尋的工具

可以使用 Algolia 或是本地端搜尋。經費有限啊，我還是用local search 就好。

不論用 Algolia 還是 local search，都是要額外安裝套件的。詳細設定看這裡。

這裡以 local search 為例

輸入指令安裝

1
npm install hexo-generator-searchdb

_config.next.yml的設定

1
2
3
4
5
6
7
# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
...
...
...

Animation

動畫設定

說實話，一直顯示慢慢載入動畫讓我這個沒耐心的人感到非常困擾，看到可以設定就果斷關掉。

1
2
3
4
5
6
7
# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
  enable: false
...
...
...

配置這東西沒什麼好說的，就是依照需求看文件調整一下吧。多嘗試，多踩雷，你就會了。

參考