[隨手紀錄] HEXO 維護相關問題紀錄

發表於 2021-08-22 更新於 2023-06-10 分類於魔改系列 , 部落格閱讀次數 × 文章字數 × 1,292 所需閱讀時間 ≈ 00:02:21

本篇主要是隨手紀錄 HEXO 維護心得，供自己使用。

版本更新

HEXO 升級

將 hexo v4.2.1 更新到 v5.4.0，並可適應 node.js v16 之步驟整理如下：

切換到專案目錄下並啟用 node.js。
安裝套件npm install -g npm-upgrade後，專案目錄下執行npm-upgrade能協助檢查並修改 package.json 內的版本資料至最新。
執行npm update直接更新所有 module 套件版本。
測試 hexo 指令時出現以下訊息，原因為自 5.0 版本開始更名，更新用戶需自行修改_config.yml將名稱use_date_for_updated改為updated_option。
Deprecated config detected: "use_date_for_updated" is deprecated, please use "updated_option" instead. See https://hexo.io/docs/configuration for more details.

啟動hexo s會出現以下資訊，是因為hexo-renderer-stylus內建套件所包的nib/stylus的版本是 0.54.5 與 node.js 16 版本不相容（最新 0.54.8 才解決）

(node:6868) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6868) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:6868) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:6868) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:6868) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:6868) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

網路爬文的 uninstall/install hexo-renderer-stylus 是沒意義的，目前 v2.0.1 仍然是舊的 stylus v0.54.5。
手動更新hexo-renderer-stylus內包含的 stylus 版本，切換到模組位置 cd /node_modules/nib。
再利用npm-upgrade來幫忙檢查更新 package.json 資訊，確認可升級到 0.54.8 並修改完成後，輸入npm update直接更新即可完成
事後發現使用一些其他套件使用又會發生一樣的事情，搞不定，因為 warning 不影響，所以暫時忽略。..，等 hexo 更新。

theme next 升級

只要在抓取一次 next 到 theme 目錄下即可，但 next 因為版本差異上設定檔案有出路，因此不適合直接更新版本，而是用 theme 來做切換新舊。

專案主目錄下輸入git clone https://github.com/next-theme/hexo-theme-next themes/next-v8.7.0，這裡建議另名到新的 next 版型不要舊版重疊
到 hexo 的_config.yml調整theme: next-v8.7.0
比對兩者 theme 內的_config.yml逐項改回原本設定。

調整

優化

調整themes/next/_config.yml即可使用以下功能。

next 主題參數

busuanzi_count 可開啟訪客瀏覽記數

如果不滿意 layout 可調整themes\next\layout\_partials\footer.njk適時添加說明文字。

wordcount

安裝 npm install hexo-word-counter 可啟用閱讀文字紀錄

因不滿意他的文字效果沒有單位量，所以需要修改此模組，但避免異動版本升級與異地差異，所以使用補釘包插件來處理。這方式專門做類似的模組差異修改用途。

安裝修改補釘模組 npm install patch-package --save-dev

增加 script 指令，到 package.json 補上

"scripts": {
  "postinstall": "patch-package"
}

初始安裝你的目標模組，已存在就不需要再安裝一次
直接修改你的目標模組，這裡舉例模組名稱為 hexo-word-counter ，路徑為 node_modules\hexo-word-counter\lib\helper.js
此時你只是修改本地模組檔案，遠端或其他電腦不會有變動。
透過指令 npx patch-package hexo-word-counter，此時會去將目標模組有異動的代碼記錄起來。每次修改都執行此指令
最後再用指令 npm run postinstall 將修改包以補丁方式整合到專案 GIT 內
其他電腦或遠端 npm install 就會將此 patch 修改包自動應用進去。

custom_file_path 添加自訂代碼與樣式

自訂 CSS 方法。關閉註解 source\_data\styles.styl 並對應位置至主目錄之路徑添加即可。其他檔案設定亦同能協助在指定網頁位置插入部分代碼，例如bodyEnd: source/_data/body-end.njk能在 body 底部設定指定代碼

修改頁面 UI

檔案位置在 themes\next\layout\_layout.njk

修改 article 段落

調整首頁文章列表或單一文章的位置在 themes\next\layout\_macro\post.njk

添加自訂 JS 檔案

由於 custom_file_path 只能匯入程式碼到頁面去，如果需要添加 js 檔案並宣告執行，需要多一個步驟

將 js 檔案放置在主題目錄下 theme\source，在這個目錄下皆會自動時輸出到網站目錄上。
透過 theme 的設定檔custom_file_path將宣告代碼寫入<script src="YOUR JS PATH"></script>

指定文章隱藏

可指定文章不在網站上出現，除非輸入絕對路徑 URL 才能看到。

安裝套件 npm install hexo-hide-posts --save

在文章前置輸入關鍵字 hidden:true 即可

---
title: 'Lorem Ipsum'
date: '2019/8/10 11:45:14'
hidden: true
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

可調整關鍵字命名，在主站_config.yml下添加代碼

# hexo-hide-posts
hide_posts:
  # Change the filter name to fit your need
  filter: lokihide
  # Generators which you want to expose all posts (include hidden ones) to.
  # Common generators: index, tag, category, archive, sitemap, feed, etc.
  public_generators: []
  # Add "noindex" meta tag to prevent hidden posts from being indexed by search engines
  noindex: true

透過 cmd 指令 hexo hidden:list 可察看有那些文章被設定隱藏。