Hexo Blog 03：繼續探索 NexT

發表於 更新於 分類於 ， 閱讀次數： Disqus： 文章字數： 2.7k 所需閱讀時間 ≈ 10 分鐘

前一篇系列文章：更換 Hexo 主題，初探 NexT 最後建出了最基本的 NexT 主題 Blog，看起來簡潔有力，但還是缺很多 Blog 的常見功能。本來以為要到處搜尋 Plugins 之類的，但 NexT 的官方文檔 已經列出了大量的選項與 Plugins，很多功能只要在 config 中啟用就好。

下面我會列出非常必須或啟用後覺得特別有感的功能，並提供我自己的設定給各位參考，此外非常建議大家優先閱讀官方文檔自行嘗試。

成品

跟著我設定會變成這樣

環境

Hexo: 6.3.0

hexo-cli: 4.3.0

NexT: 8.14.0

主題樣式

NexT 提供了四種主題樣式，每種都可以對應黑暗模式，大家可以善用本地預覽來挑選自己喜歡的。

(身為眼睛天天被摧殘的碼農，我是一定要開啟黑暗模式的啦!)

_config.next.yml
1
2
3
4
5
6
7
8
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

# Dark Mode
darkmode: true

側邊欄位置

預設在左邊，我因為其他版面配置考量，所以改成右邊。

有一些功能顯示的位置跟側邊欄位置相關，像是：返回最上按鈕、書籤。

_config.next.yml
1
2
3
4
sidebar:
  # Sidebar Position.
  #position: left
  position: right

側邊欄 (sidebar)

首頁文章折疊與閱讀全文按鈕

首頁預設是把每篇文章完整呈現出來，其實滿不符合一般人的期望，開啟此功能可以只顯示文章摘要，讓想看完整文章的讀者可以點擊 閱讀全文 按鈕進入該文章頁面閱讀。

  1. 修改設定檔

    _config.next.yml
    1
    2
    3
    # Read more button
    # If true, the read more button will be displayed in excerpt section.
    read_more_btn: true

  2. 在文章設置斷點

    在文章的 Markdown 檔案中插入 <!-- more --> 標記，這樣標記之前的內容會顯示在首頁，標記之後的內容則會隱藏。

閱讀全文按鈕

訪客人次/總閱讀次數

NexT 提供了 不蒜子 的網站記數功能，只要 enable: 設為 true 就能啟用。

_config.next.yml
1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  enable: true
  total_visitors: true # 網站總訪客人數，顯示在頁面底部
  total_visitors_icon: fa fa-user
  total_views: true # 網站總閱讀次數，網頁每次刷新都會加一 (快樂表)，顯示在頁面底部
  total_views_icon: fa fa-eye
  post_views: false # 文章總閱讀次數，網頁每次刷新都會加一 (快樂表)，顯示在文章標題下方。我個人是使用 firestore 實現非快樂表的此功能
  post_views_icon: far fa-eye

頁面底部的訪客人數與閱讀次數

文章閱讀次數 (Firestore)

使用 firestore 功能實現的文章閱讀次數，但其實應該說是文章訪客人數，同個瀏覽器重複進入文章是不會增加記數的。

需要去 Google Firebase 建立新專案，並且取得 apiKey 與 projectId。

按照 NexT 文檔 就可以完成。

要注意的是 apiKey 必須進入 Authentication 頁面啟用該功能後才會生成。

之後需要進入 Firestore Database 頁面建立新資料庫，讀取規則需照如下設定：

1
2
3
4
5
6
7
8
9
10
11
12
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /articles/{document=**} {
      allow read, create: if true;
      allow write: if request.resource.data.count==resource.data.count+1;
    }
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

之後再調整主題設定就好：

_config.next.yml
1
2
3
4
5
6
7
8
# Another tool to show number of visitors to each article.
# Visit https://console.firebase.google.com/u/0/ to get apiKey and projectId.
# Visit https://firebase.google.com/docs/firestore/ to get more information about firestore.
firestore:
  enable: true
  collection: articles # Required, a string collection name to access firestore database
  apiKey: OOOOO # Required
  projectId: OOOOO # Required

文章標題下方的眼睛是 firestore 計算的文章訪客人數

這功能設置起來是真的滿麻煩，目前也不是很彈性，想快速有這種功能只要將前面 不蒜子 的網站記數功能 post_views: 設為 true 就好了。

但使用 firestore 的方式可以將專案結合其他 Google 的統計功能。

程式碼區塊複製按紐

預設程式碼區塊是沒有複製按鈕的，不過也只要 enable: 設為 true 就能啟用。

_config.next.yml
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: stackoverflow-dark
  prism:
    light: prism
    dark: prism-dark
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Available values: default | flat | mac
    style: flat

返回最上按鈕調整

其實預設就有開啟這功能，不過我比較喜歡有顯示百分比的。

可以選擇要不要放在側邊欄裡面，如果不要的話就會出現在側邊欄另一邊的下面。

_config.next.yml
1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

顯示瀏覽百分比的返回最上按鈕

頁面載入進度條

顯示在瀏覽器上方，讓頁面載入時有個視覺回饋。

_config.next.yml
1
2
3
4
5
6
7
8
9
10
11
# Progress bar in the top during page loading.
# For more information: https://github.com/CodeByZach/pace
pace:
  enable: true
  # All available colors:
  # black | blue | green | orange | pink | purple | red | silver | white | yellow
  color: blue
  # All available themes:
  # 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

閱讀進度條

顯示在瀏覽器上方 (同頁面載入進度條) 或下方，跟返回最上按鈕的百分比是一樣意思，就是多一種視覺回饋，預設是藍色。

_config.next.yml
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

閱讀進度條設成 left 跟 top 後，跟頁面載入進度條其實是差不多的東西

書籤

記住讀者的閱讀位置，這樣下次到訪時會從記錄的位置開始。

啟用後側邊欄另一邊的上面會有個書籤的圖標，點擊後就會記錄了。

也能設成自動記錄，但我個人覺得自動記錄很惱人，所以採用手動模式。

2022/12/20 更新：後來覺得這個功能整個惱人，所以關掉了。

_config.next.yml
1
2
3
4
5
6
7
8
# Bookmark Support
bookmark:
  enable: false
  # Customize the color of the bookmark.
  color: "#fff"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: manual

文章字數統計/閱讀時間估計

這是 Blog 中很常見的功能，但預設是沒啟用的。

照 官方文檔 操作即可啟用：

  1. 安裝

    command line tool
    1
    2
    $ npm install hexo-word-counter
    $ hexo clean

  2. 調整專案設定

    _config.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Hexo Word Counter: https://github.com/next-theme/hexo-word-counter
    symbols_count_time:
      symbols: true # 文章字數統計，顯示在文章標題下方
      time: true # 文章閱讀時間估計，顯示在文章標題下方
      total_symbols: true # 全文章字數統計，顯示在頁面最下方
      total_time: true # 全文章閱讀時間估計，顯示在頁面最下方
      exclude_codeblock: false # 排除程式碼區塊
      wpm: 275 # 每分鐘閱讀幾個字
      suffix: "mins."

  3. 調整主題設定

    _config.next.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Post meta display settings
    post_meta:
      item_text: false # 文章標題下方的標示是否顯示說明文字

    # Post wordcount display settings
    # Dependencies: https://github.com/next-theme/hexo-word-counter
    symbols_count_time:
      separated_meta: false # 文章標題下方的標示是否獨立一行顯示
      item_text_total: true # 頁面最下方的標示是否顯示說明文字

文章標題下方的文章字數統計與閱讀時間估計

頁面最下方的全文章字數統計與全文章閱讀時間估計

關於 (About)、標籤 (Tags) 與 分類 (Categories) 頁面

NexT 預設沒有幫使用者建立這三個常用的頁面，不過建立步驟也很簡單，使用的是 NexT Custom Pages 機制：

使用建立新頁面指令：

command line tool
1
$ hexo new page custom-name

指令中的 custom-name 分別換成 about、tags 與 categories 就能創造出不同的三種頁面（此指令可以自訂任何頁面，不限於這三種）。

該指令會在 Blog 專案根目錄中的 source 資料夾中建立 custom-name/index.md 檔案。

修改 custom-name/index.md：

  • 關於（about）頁面的 front-matter 只需要自訂 title 即可，接著下面可以像一般 post 文章一樣寫入自定義內容。

    about/index.md
    1
    2
    3
    4
    title: 關於
    ---

    Hi 歡迎你來到這一頁，在這文字媒介式微的時代，你能看到我在這寫的廢話真的算緣分。

    （除了 type: tags 與 type: categories 的 Custom Pages 都能當成一般文章編輯內容）

  • 標籤（tags）頁面 與 分類（categories）頁面的 front-matter 還需要加上 type，並且下面不能加上自定義內容（加了也沒用）。

    tags/index.md
    1
    2
    3
    4
    ---
    title: 標籤
    type: tags
    ---
    categories/index.md
    1
    2
    3
    4
    ---
    title: 分類
    type: categories
    ---

    （NexT 主題對這兩種 type 的 Custom Pages 做了特殊處置，即顯示所有 tags 或顯示所有 categories。）

修改主題設定檔：

將本來被註解的 about、tags 與 categories 開啟。

_config.next.yml
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

完成上述操作後，重新部署 Blog 就能看到側邊欄的 menu 會出現 關於、標籤 與 分類 按鈕，點擊後可以進入各獨立頁面。

關於頁面 (About)
標籤頁面 (Tags)
分類頁面 (Categories)

站內搜尋

可以在站內搜尋自己文章，啟用後側邊欄會有個放大鏡圖標的搜尋鈕。

照 官方文檔 操作即可啟用：

  1. 安裝

    command line tool
    1
    $ npm install hexo-generator-searchdb

  2. 調整專案設定

    _config.yml
    1
    2
    3
    4
    5
    6
    # Local Search: https://github.com/next-theme/hexo-generator-searchdb
    search:
      path: search.xml
      field: post
      content: true
      format: html

  3. 調整主題設定

    _config.next.yml
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local Search
    # Dependencies: https://github.com/next-theme/hexo-generator-searchdb
    local_search:
      enable: true
      # If auto, trigger search by changing input.
      # If manual, trigger search by pressing enter key or search button.
      trigger: auto
      # Show top n results per article, show all results by setting to -1
      top_n_per_article: 1
      # Unescape html strings to the readable one.
      unescape: false
      # Preload the search data when the page loads.
      preload: false

站內搜尋範例

相關文章

在每篇文章的側邊欄列出關聯的文章 (NexT 8.14.0 之前是在每篇文章最後，並且有很多問題)，這功能我是覺得滿推薦啟用的。

照 NexT 文檔 操作才會成功，若是直接照 插件 README 設定會失敗，因為 NexT 已經進行實現了，我們只需要安裝跟啟用就好。

  1. 安裝
command line tool
1
2
$ npm install hexo-related-posts
$ hexo clean
  1. 調整主題設定來啟用
_config.next.yml
1
2
3
4
5
6
# Related popular posts
# Dependencies: https://github.com/sergeyzwezdin/hexo-related-posts
related_posts:
  enable: true
  title: # Custom header, leave empty to use the default one
  display_in_home: false

相關文章範例

結語

啟用以上功能後，Blog 頁面整個豐富了起來，但目前還是只能供讀者閱讀而已，下次再加上能讓讀者與作者交流的功能。

下一篇系列文章：NexT 主題加入留言與聊天室機制

參考資料

Hexo × NexT × Firestore 顯示瀏覽人次