Hexo NexT _config.yml 設定

發表於 分類於
了解如何通過 Hexo NexT 主題的設定參數來美化你的部落格，實現更佳的視覺效果和用戶體驗。

NexT 主題

NexT 提供了 4 個不同的主題選擇。

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

NexT 主題示意圖

NexT 主題示意圖

NexT 暗黑模式

1
2
# Dark Mode
darkmode: true
  • darkmode: 設定是否開啟暗黑模式，開啟則設定為 true。

favicon 設定

要為您的部落格設置 favicon，請將 favicon 圖片放在 themes/next/source/images 目錄下。根據網站風格設計 favicon，並在 _config.yml 中配置如下：

1
2
3
4
5
6
favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json
  • small: 16x16 像素的 favicon 圖片，通常用於瀏覽器標籤。
  • medium: 32x32 像素的 favicon 圖片，適用於更大尺寸的顯示需求。
  • apple_touch_icon: 用於 iOS 設備的網頁圖標，建議使用 180x180 像素的圖片。
  • safari_pinned_tab: 用於 Safari 瀏覽器的固定標籤頁圖標，通常為 32x32 像素的 SVG 圖片。
  • android_manifest: 可選，Android 網頁應用程序的 manifest 文件位置，若有使用此功能可配置此選項。

確保 favicon 的設置符合您的網站風格，使您的網站在各種設備上都能夠顯示一致且專業的外觀。

CC 授權條款

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: small
  sidebar: false
  post: false
  # 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:
  • post 設置為 true 會在文章底部顯示 CC 授權條款。
  • sidebar 設置為 true 會在側邊欄顯示 CC 授權條款。

選單設定

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

選單設定示意圖

側邊選單位置

預設為 left，依照個人喜好修改顯示位置

1
2
3
sidebar:
  # Sidebar position. Available values: left | right
  position: right

頭像

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the URL here.
  url: /images/avatar.gif
  # 如果為 true，頭像外框為圓形
  rounded: false
  # 如果為 true，頭像將隨著游標旋轉
  rotated: false

頭像設定示意圖

社交平台設定

1
2
3
4
5
6
7
8
9
10
social:
  GitHub: https://github.com/asz8621 || fab fa-github
  E-Mail: mailto:[email protected] || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #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 設定示意圖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
footer:
  # Specify the year when the site was setup. If not defined, current year will be used.
  #since: 2021

  # 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 the icon, using Hex Code.
    color: "#ff0000"

  # If not defined, `author` from Hexo `_config.yml` will be used.
  # Set to `false` to disable the copyright statement.
  copyright: 'Nielsen' # [綠色方框]

  # Powered by Hexo & NexT
  powered: true # [紫色方框]

  # Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, https://beian.mps.gov.cn
  beian:
    enable: false
    icp:
    gongan_id:
    gongan_num:
    gongan_icon_url:

footer 設定示意圖動畫

文章元數據顯示設置

這段配置允許你自訂文章頁面的元數據顯示選項。

文章元數據示意圖

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true      # 顯示項目文本
  created_at: true     # 顯示創建日期
  updated_at:
    enable: true      # 隱藏最後更新日期
    another_day: true # 顯示與創建日期不同的日期
  categories: true     # 顯示分類
  • item_text: true：顯示項目文本。
  • created_at: true：顯示文章的創建日期。
  • updated_at：
    • enable: true：顯示最後更新日期。
    • another_day: true：若啟用，會顯示與創建日期不同的日期（需配合 enable: true 使用）。
  • categories: true：顯示文章的分類。

修改程式碼顯示樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
codeblock:
  # Code Highlight theme
  # All available themes: https://theme-next.js.org/highlight/
  theme:
    light: default
    dark: stackoverflow-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: false
    # Available values: default | flat | mac
    style:
  # Fold code block
  fold:
    enable: false
    height: 500

高量設定

可以參考以下設置。可用的主題列表在這裡：Code Highlight Themes

1
2
3
theme:
  light: default
  dark: stackoverflow-dark

code theme

複製按鈕設定

要啟用複製按鈕，請將 enable 設為 true，此時 style 設定才會生效。

1
2
3
4
copy_button:
  enable: false
  # Available values: default | flat | mac
  style: mac

code copy button

代碼摺疊

1
2
3
fold:
  enable: true
  height: 100

code fold

返回頂部

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: false
  • 將 sidebar 設定為 true 可以在側邊欄的個人資訊區塊中顯示回到頂部按鈕。

至頂按鈕示意圖

  • 將 scrollpercent 設定為 true 會顯示閱讀進度百分比。

閱讀進度條

1
2
3
4
5
6
7
8
9
10
# Reading progress bar
reading_progress:
  enable: false
  # Available values: left | right
  start_at: left
  # Available values: top | bottom
  position: top
  reversed: false
  color: "#37c6c0"
  height: 3px
  • enable: 設定是否開啟進度條，開啟則設定為 true。
  • start_at: 設定進度條開始位置，選擇 left 或 right。
  • position: 設定進度條在頂部或底部顯示。
  • reversed: 是否反轉進度條。
  • color: 設定進度條顏色。
  • height: 設定進度條高度。

GitHub 右上角 ICON

1
2
3
4
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/yourname

GitHub 右上角 ICON 示意圖

Note 設定

1
2
3
4
5
6
7
8
9
10
11
note:
  # Note tag style values:
  #  - simple    bootstrap callout old alert style. Default.
  #  - modern    bootstrap callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: false
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

以下是 Note 標籤的樣式：

icons 的顯示可以根據個人喜好選擇是否啟用。

如果您不喜歡樣式中的背景色，可以調整 light_bg_offset 來改變背景色的亮度。

Tabs 設定

1
2
3
4
5
6
tabs:
  # Make the nav bar of tabs with long content stick to the top.
  sticky: false
  transition:
    tabs: false
    labels: true
  • sticky: 設置導航欄是否在滾動時固定在頁面頂部。設置為 false 表示導航欄不會固定。
  • transition: 控制標籤頁和標籤的過渡效果。將 tabs 和 labels 設置為 true 以啟用平滑過渡。

載入進度條設定

  1. 編輯 theme/_config.yml 文件，啟用並配置進度條：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 詳細資訊: https://github.com/CodeByZach/pace
    pace:
      enable: true
      # 可選顏色:
      # black | blue | green | orange | pink | purple | red | silver | white | yellow
      color: blue
      # 可選主題:
      # 詳細資訊: https://codebyzach.github.io/pace/#get-started-snippet
      # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
      # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
      theme: minimal

進度條設定示意圖

搜尋欄位設定

  1. 安裝搜尋插件：

    1
    npm install hexo-generator-search --save

  2. 編輯根目錄下的 _config.yml 文件，加入搜尋欄位設定：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next

    ## 加入搜尋欄位
    search:
      path: search.json
      field: post

  3. 編輯 theme/next/_config.yml 文件以啟用本地搜尋

    將 local_search 的 enable 設為 true，並根據需要調整其他設定：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Local Search
    # Dependencies: https://github.com/next-theme/hexo-generator-searchdb
    local_search:
      enable: true
      # 每篇文章顯示的搜尋結果數量，設為 -1 以顯示所有結果
      top_n_per_article: 1
      # 是否取消 HTML 字符串的轉義為可讀文本
      unescape: false
      # 頁面加載時是否預加載搜尋數據
      preload: false