Hexo Theme NexT 主題個性化配置最佳實踐

一般情況下，當我們在使用 Hexo 的 NexT 主題時，都希望把博客改造成自己喜歡的風格。NexT 主題經過不斷的迭代積累，目前提供了非常豐富的配置來滿足使用者的個性化需求。

經過一段時間的摸索，我總結了一些有關 NexT 主題配置的最佳實踐方案，能夠優雅的對博客進行個性化改造及持續升級。核心思想就是，使用官方的推薦的方式配置主題，多挖掘博客自帶的功能，儘可能少得修改源碼。下面分享我的做法。

版本

• Hexo 3.9.0
• NexT 7.2.0

一些踩過的坑

目前，網上有很多 Hexo NexT 個性化配置資料，比如像 博客的美化配置（NexT主題） 這樣的方案。

起初，我根據自己的需要按照上面博客裏的方法進行配置是沒什麼太大問題的。但是當我嘗試升級 NexT 主題的時候，問題就來了。上述博客裏的方案，很多功能的實現需要修改 NexT 源碼，當 pull NexT 最新代碼與本地分支 merge 時，會產生大量的衝突，非常不方便。

後來經過查閱官方博客 NexT - Docs，我發現隨着 NexT 版本的迭代，現如今的 NexT 已經集成了很多上面博客裏提到的功能，我們通過修改配置文件即可使用，絕大部分的功能已經不再需要修改源碼實現了。

另外，NexT 也建議大家使用 Hexo 官方推薦的 Data Files 系統（Hexo 3.x 即以上）來分離個人配置，稍後我會詳細介紹。這樣就可以在儘可能少地修改 NexT 工程代碼的情況下進行個性化配置，方便主題升級。

改造前的工作

在 hexo 和 next 的根目錄下，都存在一個叫做 _config.yml 的配置文件。在改造之前，讓我們來規定一下兩個文件的叫法以方便區分。

• hexo/_config.yml：site config file
• next/_config.yml：theme config file

Clone NexT

直接把 NexT 工程從 GitHub 上克隆下來放在 Hexo 的 theme/next 中，這樣方便未來主題的升級工作。

NexT 工程地址：hexo-theme-next

個性化配置分離

如果能把個性化的配置內容分離出來，也就是說在其他地方通過某種方式配置個性化的設置而不直接修改主題的 theme config file 的話，那麼我們在 pull 最新的 NexT 代碼時，就不會對 theme config file 產生衝突。

NexT 官方博客中的 Data Files 一文詳細說明了如果使用 Data Files 系統進行個性化配置。

不過 Data Files 需要 Hexo 的版本在 3.x 之上，所以文中提供兩種配置方法供大家選擇。

Hexo 2.x

如果是 Hexo 2.x 版本（當然 3.x 也支持這種方式），可以通過在 site config file 中編寫主題的配置，而不需要修改 theme config file，也不需要添加任何新的文件。

步驟：

1. 檢查一下是否存在 hexo/source/_data/next.yml 文件，如果存在則刪除。
2. 在 site config file 添加 theme_config: 節點。
3. 需要修改的配置內容從 theme config file 文件中拷貝到 site config file 的 theme_config: 節點下。注意縮進。

Hexo 3.x

如果是 Hexo 3.x 的話，可以將 theme config file 需要修改的配置放入 hexo/source/_data/next.yml 中，不需要修改 theme config file。

步驟：

1. 確定是否使用的是 Hexo 3.x 及以上的版本。
2. 在 hexo/source/_data/ 目錄中新建 next.yml 文件（如果 _data 文件夾不存在，則新建一個）。
3. 如果 next.yml 中設置 override: false，那麼只需要將需要的配置項從 site config file 和 theme config file 文件中拷貝過來。
4. 如果 next.yml 中設置 override: ture，那麼需要將所有 theme config file 中的內容拷貝過來。

個性化改造

有關配置文件各項配置的使用，官方博客 NexT - Docs 中給出了詳細的闡述，這裏我只記錄了一些比較好玩的功能。有關博客名稱、頭像等這種基本配置我就不再說明了。

第三方庫使用 CDN

第三方庫可以放在 next/source/lib/ 目錄下，也可以使用 CDN 在加載這些庫。如果想要減少服務器流量壓力的話，可以通過配置 CDN 地址，使第三方庫通過 CDN 加載，提高站點打開速度。

NexT 提供了 CDN 的配置地址，並給出了推薦的 URL，例子如下。

# Script Vendors. Set a CDN address for the vendor you want to customize.
# Be aware that you would better use the same version as internal ones to avoid potential problems.
# Please use the https protocol of CDN files when you enable https on your site.
vendors:
  # Internal path prefix. Please do not edit it.
  _internal: lib

  # Internal version: 3.4.1
  # Example:
  # jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
  # jquery: //cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  jquery:

  # Internal version: 4.7.0
  # See: https://fontawesome.com
  # Example:
  # fontawesome: //cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css
  # fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
  fontawesome:

Footer / 頁腳設置

footer:
  # © 和年份中間的圖標
  icon:
    # 圖標名
    name: user
    # 圖標的一個動畫效果，類似於心跳
    animated: true
    # 圖標顏色，可格局需要自行修改
    color: "#808080"

  # Powered by Hexo 字樣，不喜歡可以設置爲 false
  powered:
    enable: true
    # Version info of Hexo after Hexo link (vX.X.X).
    version: true
    
  # 主題字樣，不喜歡可以 false
  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: true
    # Version info of NexT after scheme info (vX.X.X).
    version: true

  # 備案信息，如果網站有備案號，可以在這裏填寫備案號
  beian:
    enable: false
    icp:

Creative Commons / 文章版權

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# 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
creative_commons:
  license: by-nc-nd
  post: true
  language: deed.zh

在文章 .md 文件中的上部，添加 copyright: true。

有關 Creative Commons 大家可以到 creativecommons 中查看。

返回頂部按鈕

back2top:
  enable: true
  # 是否在側邊欄顯示
  sidebar: false
  # 是否顯示頁面瀏覽百分比
  scrollpercent: false

Tag 標籤前圖標修改

文章標籤的顯示默認前面“#”號，可以通過設置將“#”換爲圖標。

tag_icon: true

界面加載進度條

NexT 集成了 theme-next-pace。資源庫需要自行下載或者使用 CDN 的方式。

pace:
  enable: false
  # Themes list:
  # 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

vendors:
  # Internal version: 1.0.2
  # See: https://github.com/HubSpot/pace
  # Example:
  # pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
  # pace: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js
  # pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
  # pace_css: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-minimal.min.css
  pace:
  pace_css:

訪問量統計

NexT 集成了已經集成好了不蒜子。

# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: false
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

如果對顯示的文案不滿意的話，可以修改 /next/layout/_third-party/analytics/busuanzi-counter.swig 文件中的相關內容。

背景綵帶

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# size: The width of the ribbon.
# alpha: The transparency of the ribbon.
# zIndex: The display level of the ribbon.
canvas_ribbon:
  enable: true
vendors:
  # Internal version: 1.0.0
  # See: https://github.com/zproo/canvas-ribbon
  # Example:
  canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js

字數統計

NexT 集成了 hexo-symbols-count-time 插件。

步驟：

1. npm install hexo-symbols-count-time --save
2. 在 site config file 中添加 symbols_count_time 配置。

symbols_count_time:
  # 文章上部是否顯示字數
  symbols: true
  # 文章上部是否顯示閱讀時間
  time: true
  # 站點底端是否顯示站點總字數
  total_symbols: true
  # 站點底端是否顯示總閱讀時間
  total_time: false
  # 是否移除代碼塊
  exclude_codeblock: false

3. 在 next.yml 中配置 symbols_count_time 節點。

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false
  awl: 4
  wpm: 275
  suffix: mins.

其中：

• awl：平均字符長度，默認爲 4。
  • 漢字 ≈ 2
  • 英文 ≈ 4
  • 俄文 ≈ 6
• wpm：閱讀速度。
  • 慢 ≈ 200
  • 正常 ≈ 275
  • 快 ≈ 350
• suffix：後綴，默認爲 mins.。

對中文用戶來說：漢字的平均長度 ≈ 1.5，如果僅用中文書寫沒有英文的話，建議 awl 和 wmp 分別設置爲 2 和 300。如果中英混合，建議 awl 和 wmp 分別設置爲 4 和 275。

GitHub Fork Me

在站點右上角添加 GitHub 標識，例如“Fork me on GitHub”。

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: false
  permalink: https://github.com/yourname
  title: Follow me on GitHub

圖片延遲加載

對於圖片進行延遲加載，訪問到圖片位置時纔去請求圖片資源，這樣可以提高博客的訪問速度，節省流量。

步驟：

1. npm install hexo-lazyload-image --save
2. 在 site config file 中添加 lazyload 配置。

# Lazyload
## Depends on hexo-lazyload-image
lazyload:
  enable: true
  onlypost: false
  # 圖片尚未加載完時，顯示指定圖片。目錄地址爲博客根目錄下的 source/
  loadingImg: /uploads/loading.gif

修改配色

NexT 主題默認色系是黑白色系。目前官方尚未提供顏色修改的配置，所以我們可以通過修改相關 .styl 文件來修改主題顏色。

相關文件：

• themes/next/source/css/_common/components/post/post-title.styl
• themes/next/source/css/_schemes/Pisces/_brand.styl
• themes/next/source/css/_variables/base.styl
• themes/next/source/css/_variables/Pisces.styl

這其中比較複雜，這裏我就不一一介紹了（我也沒完全弄清楚這些參數到底對應主題哪個部分的顏色），大家一點點嘗試修改相關配色。

鏈接持久化

Hexo 默認的文章鏈接是“年/月/日/標題”。之所以要做鏈接持久化是因爲，中文 url 不利於 SEO，另外如果標題修改了，會導致鏈接發生變化，不利於文章的推廣。所以我們要做的就是把標題轉成唯一的英文或數字字符串。這裏推薦 rozbo 大神的 hexo-abbrlink。

步驟：

1. npm install hexo-abbrlink --save
2. 在 site config file 中添加

permalink: posts/:abbrlink/

# abbrlink config
abbrlink:
  alg: crc32  #support crc16(default) and crc32
  rep: dec    #support dec(default) and hex

• alg 是算法。有 crc16 和 crc32 兩種。
• rep 是進制。有 dec（十進制） 和 hex（十六進制） 兩種。

樣例：

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html

crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

crc16 算法下的十進制編碼最大爲 65535，這對個人博客來說足夠了。

有關作者寫的詳細介紹 hexo-abbrlink介紹 感興趣可以看下。

---

本博客 GitHub 地址：https://github.com/MartinMa94/matalking-blog

---

想要對 NexT 主題配置更深入的瞭解及進階使用，推薦閱讀官方博客 NexT，寫得非常全面。

---

本文作者： 馬叨叨
本文鏈接： https://www.martinmyz.cn/a/3849174810/
版權聲明： 本博客所有文章除特別聲明外，均採用 BY-NC-ND 許可協議。轉載請註明出處！