將 NexT 升級至 8.29.0 版 feat. Claude

發表於 分類於 文章字數： 1.7k 所需閱讀時間 ≈ 4 分鐘

前言

忘了多久之前，只要幫 jute.im 推送更新文章，就會跳出錯誤訊息，由於沒有影響部落格運作，我就一直擺著沒有處理。upgradeNextVersionTo8.29.0Ep2中秋節連續幾天的假期，終於讓我提起勁來處理。

更新過程

問題診斷

upgradeNextVersionTo8.29.0Ep1
  1. 首先是把下列的錯誤訊息丟給 Google。
1
2
(node:34512)[DEP0169] DeprecationWarning: url.parse() behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for url.parse() vulnerabilities.
(Use node --trace-deprecation ... to show where the warning was created)
  1. Google 丟出來的資料中，有一筆訊息（如下），對我來說比較易讀易懂，有興趣的伙伴可以走傳送門：DEP0169：不安全的 url.parse() | Node.js API 文档。
1
url.parse() 的行为不标准且容易出错，这可能带来安全隐患。请改用 WHATWG URL API。url.parse() 的漏洞不会发布 CVE。
upgradeNextVersionTo8.29.0Ep3

  1. 之前，我就卡關在這裡，對錯誤訊息建議 Use node --trace-deprecation ... to show where the warning was created 似懂非懂的，原因是我試著用 Google 挖出來的資訊比較片段，加上我的英文閱讀能力不足，導致翻找出來的訊息，最終在我眼前似乎只能用「破碎」形容。但，時代不同，現在可以問 AI，於是乎接下來的步驟，我便請教最近開始接觸的 AI：Claude。

  2. 我把同樣的錯誤訊息丟給 Claude 後，順著 Claude 回應的建議，先在 PowerShell 下一道指令：$env:NODE_OPTIONS="--trace-deprecation"; npx hexo deploy（同樣的指令，在 CMD 下則是：set "NODE_OPTIONS=--trace-deprecation" && npx hexo deploy）後，在我的終端機畫面跳出下列訊息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(node:35008) [DEP0169] DeprecationWarning: url.parse() behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for url.parse() vulnerabilities.
at Object.urlParse [as parse] (node:url:137:13)
at Object.<anonymous> (D:\juteim\themes\next\scripts\helpers\next-config.js:14:21)
at Object.callWrap (D:\juteim\node_modules\nunjucks\src\runtime.js:217:14)
at Template.root [as rootRenderFunc] (eval at _compile (D:\juteim\node_modules\nunjucks\src\environment.js:527:18), <anonymous>:138:67)
at Template.render (D:\juteim\node_modules\nunjucks\src\environment.js:454:10)
at D:\juteim\themes\next\scripts\renderer.js:32:29
at _View._compiledSync (D:\juteim\node_modules\hexo\dist\theme\view.js:117:32)
at _View.renderSync (D:\juteim\node_modules\hexo\dist\theme\view.js:55:29)
at D:\juteim\node_modules\hexo\dist\plugins\helper\partial.js:25:56
at Cache.apply (D:\juteim\node_modules\hexo\node_modules\hexo-util\dist\cache.js:22:21)
at Object.fragmentCache (D:\juteim\node_modules\hexo\dist\plugins\helper\fragment_cache.js:9:26)
at Object.partial (D:\juteim\node_modules\hexo\dist\plugins\helper\partial.js:25:21)
at Object.callWrap (D:\juteim\node_modules\nunjucks\src\runtime.js:217:14)
at Template.root [as rootRenderFunc] (eval at _compile (D:\juteim\node_modules\nunjucks\src\environment.js:527:18), <anonymous>:12:66)
at eval (eval at _compile (D:\juteim\node_modules\nunjucks\src\environment.js:527:18), <anonymous>:39:16)
at eval (eval at _compile (D:\juteim\node_modules\nunjucks\src\environment.js:527:18), <anonymous>:34:46)

  1. 再把上面的錯誤訊息丟給 Claude，Claude 便說：從以上的訊息來看，應該跟 themes\next\scripts\helpers\next-config.js有關，而且問題出在 themes\next\scripts\helpers\next-config.js 的第 14 行。同時，建議我改掉第 14 行的寫法，或是直接更新 NexT。

  2. 雖然，Claude 的建議中，表示「升級到 NexT 8.x（長期，需要半天到一天）」，但，我考慮之後，最終的選擇是更新 NexT，因為，之前雖然像瞎子摸象一樣，亂抓問題，當時我試著更新過 NexT，錯誤訊息便不存在。

更新 NexT

更新並沒有花很多時間，有比較多的時間是花在更新之後，原本在 NexT 上的設定檔，無法直接用在新版本的 NexT，這個比較困擾我，尤其是 Google Adsense 不好搞定（當時，還因此滿懷念 WordPress 的）。但，無論如何，我決心跟 Claude 一起努力看看。

  1. 更新前，從 themes\next\package.json 確認我所目前使用的 NexT 版本是 7.8.0（如下圖）。upgradeNextVersionTo8.29.0Ep4

  2. 先下 npm install hexo-theme-next 安裝新版，同時，找到新版本安裝的路徑是 node_modules\hexo-theme-next。

  3. 將新主題的預設設定檔 node_modules\hexo-theme-next\_config.yml 搬到部落格根目錄，並且命名為 _config.next.yml，Claude 跟我說：「這樣設定跟主題程式分開，升級時不會被覆蓋。」

  4. 新舊版的設定項目有不少差異，我沒有做到逐項對照調整，主要進行的調整有三。
    (1)把預設的 scheme: Muse 改成 scheme: Gemini。
    (2)Menu Settings：取消註解 home、about、tags、categories、archives 與 sitemap，以及讓 badges: true。
    (3)Sidebar Settings：調整為 position: right。

搞定 Google Adsense

本來，我認為要搞定 Google Adsense 是比較麻煩的部分，但，問完 Claude 之後，我發現其實不難，Claude 跟我說「在 _config.next.yml 啟用自訂檔案」，跟著做以下步驟。

  1. 打開部落格根目錄的 _config.next.yml，找到 custom_file_path，取消註解需要的項目，我取消註解的項目是 head: source/_data/head.njk 與 sidebar: source/_data/sidebar.njk。upgradeNextVersionTo8.29.0Ep5

  2. 建立 source\_data\head.njk，寫入以下內容。
    ※client 等號右邊的 ca-pub- 後面換成我自己的 ID。

1
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
  1. 建立 source\_data\sidebar.njk，寫入以下內容。
    (1)data-ad-client 那一行等號右邊的 ca-pub- 後面換成我自己的 ID。
    (2)data-ad-slot 那一行等號右邊也是填入我自己的號碼。
1
2
3
4
5
6
7
8
9
<div class="sidebar-inner" style="margin-top: 12px;">
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-1234567890123456"
       data-ad-slot="1234567890"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script data-pjax>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

  1. 確認 ads.txt 還在，另外，Claude 建議我「特別注意：PJAX」，原因是「NexT 8 有 pjax 選項，開啟後點擊站內連結時只會替換頁面內容，不會整頁重新載入。這會導致一個很常見的狀況：第一頁有廣告，點到其他文章就沒了，因為廣告的程式碼不會再執行一次。」而最省事的處理方式，就是在 _config.next.yml 讓 pjax: false。

  2. 最後，有一件事要先確認：如果舊版本的 themes\next 資料夾還在，Hexo 會優先使用，所以我把舊的 themes\next 改名為 themes\nextOld，因為，如果真的需要去對照舊設定或是找必要檔案的話，還可以從 themes\nextOld 裡面去找。例如：我就從 themes\nextOld 去把 Favicon 複製到 node_modules\hexo-theme-next 去用。

後記

  1. theme-next.org，這是舊版 NexT（7.x 以前）的網址，該專案已經停止維護。新版 NexT 8.x 由另一個團隊接手，網址是 theme-next.js.org。

  2. NexT 的更新，大致在走完以上流程後就搞定，過程並沒有超過 30 分鐘，跟 Claude 估計的「升級到 NexT 8.x（長期，需要半天到一天）」不太一樣，我猜，應該是 Claude 推估後，認為我可能需要花半天到一天的時間才能搞定。

  3. 相較於多年前卡關所造成的停擺，這次的經驗讓我見識到 AI 確實好用。