Hexo NexT 主題變更 & 設定

基本設定都做好了，文章也成功發佈了，接下來該找個美美的主題幫部落格換個新衣服。我最後找了看起來簡約大方的 NexT 主題，持續都有在作版本更新，開源資源也很多，看到各種大神把基本款改成高級訂製款，除了框架根本看不出原樣，覺得超厲害!

這篇只是把當初的建置過程記錄下來，萬一忘記或發生什麼問題，至少還知道原本是怎麼作出來的。如果有從頭開始的人，參考這篇照著做應該可以略過不少我踩過的坑。

項目有點多(原則上是照著 NexT 的 _config.yml 檔順序寫的)，如果只是想找特定功能設定的，可以直接從左側目錄欄或 Ctrl+F 跳到需要的位置就好。如果在這篇裡沒有找到，那就要等我陸續整理出來再更新新文章了(前提是我有用到的功能才有辦法!)

NexT 主題選擇

現在網路上可以找到兩種版本的 NexT 主題，分別是 next-theme 和 theme-next 提供的。爬了討論串後發現，因為 theme-next 團隊的 owner 始终拒绝向其它團隊成員提供足夠的權限，且 owner 本人自 2019 年 10 月起已長期不在線，導致其他團隊成員無法管理倉庫，所以其中一個主要貢獻者只好搬家，並用 next-theme 繼續提供更新版本。

本篇設定的 Hexo 及 NexT 版本如下，不同版本可能會有功能或設定方式上的差異!
Hexo 版本: hexo: 6.0.0
Next 版本: hexo-theme-next-8.8.2

主題安裝

npm 安裝(推薦)

主題資料夾位置: root\node_modules\hexo-theme-next 

1
2
cd 根目錄
npm install hexo-theme-next    # 默認最新版本

git 安裝

主題資料夾位置: root\themes\next 

1
2
3
4
5
# 進入根目錄
cd 根目錄

# 從網址複製檔案到 themes 裡的 next 資料夾裡(沒有的話會自動新建)
git clone https://github.com/next-theme/hexo-theme-next.git themes/next

複製倉庫網址20211226-001

主題套用

修改 root\_config.yml 裡的主題設定。 

1
theme: next     # 預設值為 landscape

個人化調整

_config.next.yml 設定

根據 next-theme 官方說明(【必讀】更新說明及常見問題)建議:
為了避免更新出現衝突，使用 Hexo 官方支持的 root\_config.next.yml 方式做主題個人化設定。

  1. 確保使用 Hexo 5.0 以上的版本。
  2. 複製 主題資料夾\_config.yml 檔案重新命名並移到根目錄 root\_config.next.yml 。

樣式選擇

四選一，把想要的樣式註解取消，可以存檔後用 hexo s 看看差別再決定。我的 Blog 是用 Gemini 。

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

網站圖示變更

圖片路徑: 主題資料夾\source\images ，變更檔名即可。 

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

版權聲明

1
2
3
4
5
6
7
8
9
# 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       # 在 sidebar 顯示
  post: true           # 在文章最下方顯示

把想要的樣式註解取消。
NexT 有支援 font awesome ，所以可以找喜歡的 icon 直接做替換。

1
2
3
4
5
6
7
8
9
10
11
12
13
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       # 網站地圖(SEO)
  #commonweal: /404/ || fa fa-heartbeat        # 公益404

menu_settings:
  icons: true             # 顯示 menu 圖示
  badges: false           # 顯示項目內數量

側欄設定

1
2
3
4
sidebar:
  # Sidebar Position.
  position: left       # 設定左邊或右邊顯示
  #position: right

頭像設定

1
2
3
4
avatar:                             # sidebar 內頭像設定
  url: /images/avatar.jpg           # 預設路徑: `主題資料夾\source\images` (可改貼圖片連結)
  rounded: true                     # true (圓形)/ false(方形)
  rotated: false                    # 滑鼠點擊旋轉動畫

社群設定

  1. 把想要顯示的項目註解取消。
  2. NexT 有支援 font awesome ，所以可以找喜歡的 icon 直接做替換。
  3. 連結記得改成自己的連結網址。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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
      # 以下省略......

    social_icons:
      enable: true              # 社群連結圖示
      icons_only: true          # 只顯示圖示不顯示名稱
      transition: false         # 滑動到社群鏈結時的有轉場效果

側欄目錄設定(閱讀文章時)

1
2
3
4
5
6
toc:
  enable: true         # 在側欄自動生成並顯示文章目錄(依標題層級)
  number: true         # 幫文章目錄自動編號
  wrap: false          # 標題超出欄寬整行換行
  expand_all: True     # 展開所有目錄層級 (false 僅展開當前位置目錄)
  max_depth: 6         # 最大目錄層級數

頁腳設定

1
2
3
4
5
6
7
8
footer:
  since: 2021              # 指定網站開始年，若沒指定則顯示當下年度
  icon:                    # 年度和版權資訊中間的 icon
    name: fa fa-heart      # Font Awesome 的 icon 代號
    animated: false        # 開啟圖示動畫
    color: "#ff0000"       # 用16進位色碼改變 icon 顏色
  copyright:               # 若沒指定則套用 Hexo `_config.yml` 的作者名
  powered: False           # 顯示 Powered by Hexo & NexT

摘要及 Read More 功能

首頁預設顯示文章全文，如果希望每篇文章像瀏覽卡片一樣僅提供部分摘要，點擊文章標題再打開全文，官方提供兩種方式( <!-- more --> 或 excerpt_description)，這裡僅說明官方推薦的方式:

  • 在文章中使用 <!-- more --> 手動進行截斷，首頁預覽只會顯示到 <!-- more --> 前的文字。
    read more20211226-002
  • 完成以上設定後，首頁只看得到摘要，點擊文章標題進入內文。如果希望新增”閱讀全文”按鈕，則修改 root\_config.next.yml 設定值 
    1
    read_more_btn: true             # 開啟"閱讀全文"按鈕

    點擊”文章標題”和點擊”閱讀全文”的差異:
    文章標題: 從頁首標題開始顯示文章頁面。
    點擊閱讀全文: 跳至 <!-- more --> 後段落顯示文章頁面。

文章的 Front-matter 在首頁的顯示設定

1
2
3
4
5
6
7
post_meta:
  item_text: false        # 顯示項目文字
  created_at: true        # 顯示發佈日期
  updated_at:
    enable: true          # 開啟顯示更新日期功能
    another_day: true     # 僅在發佈日和更新日不同時顯示更新日期
  categories: true        # 顯示文章分類

添加文章字數與所需閱讀時間

試過 hexo-symbols-count-time 和 hexo-wordcount 兩樣插件，但是有幾篇文章不明原因沒辦法計算字數。原本打算放棄這個功能了，幸好在 next-theme 的 Repository 裡找到他們提供的插件 hexo-word-counter ，測試過後確定沒有問題。

安裝套件

1
2
npm install hexo-word-counter
hexo clean

修改 root\_config.yml 設定值

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true                 # 文章字數統計顯示
  time: true                    # 文章閱讀時間顯示
  total_symbols: true           # 網頁底部網站總字數統計顯示
  total_time: true              # 網頁底部網站總閱讀時間顯示
  exclude_codeblock: false      # 字數統計是否排除程式碼
  awl: 4                        # 平均文字長度，中文為 2, 英文為 5, 預設為 4
  wpm: 275                      # 一分鐘閱讀字數
  suffix: "mins."

修改 root\_config.next.yml 設定值

1
2
3
symbols_count_time:
  separated_meta: false         # true 在發布日期下一行/ false 和發布日期同一行
  item_text_total: false        # 網頁底部顯示項目文字

文章底部標籤圖示設定

預設文章底部顯示的標籤前綴會用 # ，若要改用圖示 取代: 

1
tag_icon: true

文章底部上一篇/下一篇連結

1
2
# Available values: left(上一篇在左邊) | right(上一篇在右邊) | false(關閉功能)
post_navigation: left

回到頂部功能

1
2
3
4
back2top:
  enable: true            # 功能開啟
  sidebar: true           # true 在側欄底部顯示 / false 在頁面右下角顯示
  scrollpercent: true     # 顯示閱讀進度百分比

閱讀進度條

1
2
3
4
5
6
7
reading_progress:
  enable: false              # 開啟功能
  start_at: left             # left 由左往右 / right 由右往左
  position: top              # 進度條在瀏覽器頁面的位置: top / bottom
  reversed: false            # true 顯示剩餘進度 / false 顯示已閱讀進度
  color: "#37c6c0"           # 進度條顏色
  height: 3px                # 進度條粗細

Github 右上角標

1
2
3
4
github_banner:
  enable: true                                # 開啟功能
  permalink: https://github.com/UserName      # Github 網址
  title: Follow me on GitHub                  # 滑鼠顯示文字

站內搜索功能

安裝套件 

1
npm install hexo-generator-searchdb

修改 root\_config.next.yml 設定值 

1
2
local_search:
  enable: True

新增 root\_config.yml 設定值 

1
2
3
4
5
6
# https://github.com/next-theme/hexo-generator-searchdb
search:
  path: search.xml
  field: all         # 搜尋範圍。可選 post (Default) / page / all
  content: true      # true 全文搜索 / false 在標題及 meta info 裡搜索
  format: html

NexT 主題的基本設定就到這裡啦~ 可以自定義設定的地方太多了，這一篇筆記寫了三天才結束!! 還有一些功能還沒寫到，像是評論功能、閱讀字數/時間、閱讀人數…等，預計要另外再開幾篇才能寫完。
雖然初期建置摸索真的花了很多時間，但是看到功能一個一個增加，實在是很有成就感啊!!

文章內容如有錯誤，歡迎留言討論！

Hexo
#Hexo #NexT

本 Blog 上的所有文章除特别聲明外，均採用 CC BY-SA 4.0 協議 ，轉載請註明出處！