版更HEXO NEXT 6 → 8，以非侵入式修改整合AdSense、like coin、修正gitlab-ci文章更新時間錯誤的問題

發表於 2021-06-13 更新於 2021-06-30 分類於 HEXO Disqus：

新版本的NEXT主題，調整了許多寫法，整合AdSense、like coin，再也不必侵入式修改，使未來版更主題更加輕鬆、簡單！且修正了使用gitlab-ci更新文章，文章更新時間會變成git push的bug

本文重點疏理

以非侵入式修改整合AdSense、like coin
修正使用gitlab-ci時，文章更新內容變成push時間
隱藏「歸檔」頁面時，最上面的鼓勵文字
NEXT主題使用npm安裝，未來版更最輕鬆

若訴求正巧與我一樣的話，已提供懶人包可直接使用！

前言

NEXT主題在HEXO生態圈佔據相當高的人氣，早期的版本若要融入常見的AdSense、like coin，都需要靠侵入式修改

盡管曾經有人提issue希望可以整合AdSense，但官方認為會破壞next的優雅性而拒絕

隨著HEXO引擎的強化，提供了filter功能便於主題創造自己的plugin生態圈，NEXT主題也於v8版本整合進去

雖然帶來了許多breaking change，但更有效的讓使用者於外部嵌入自己的程式碼！

6 → 8 版更心得

由HEXO系列文章可以知道我之前為了整合AdSense、Like Coin已做了許多侵入式修改
前陣子其實有想過版更至7版(當時尚未有8)，但侵入式修改陣痛太大…
盡管骨架已成功運作，但把文章轉移過來後，網頁變成一片白，找不到原因
後因工作繁忙就擱置沒在理會

趁閒看了一下NEXT主題，注意到了custom files
最後成功將以前侵入式修改最強烈的AdSense、like Coin抽離出來
修正掉使用gitlab-ci時更新文章內容會變成push時間的問題
並將NEXT主題調整成npm安裝，未來再也不必煩惱版更問題！

6 → 8 調整事項

最困難的侵入式修改解決後，僅剩文章內一些語法要修正
提供我遇到的狀況供參考
若是全新建立Blog，可以跳過這段

front-matter有寫permalink的話，所有連結尾端都要加/，否則點擊文章連結會變成下載HTML檔
標籤功能，以前可以使用<p class="note info">標籤內容</p>，但多行內容時，文字內容會跑掉。最後我全部修正成官方寫法

快速使用懶人包

若您的NEXT主題訴求恰巧跟我一樣的話，我已提供懶人包，只需要下列幾個簡單步驟即可馬上使用！

下載懶人包
執行npm i，安裝相關套件
打開_config.yml、_config.next.yml，依需求調整參數、安裝所需plugin (若全新建立BLOG，到此步就結束，可以開始進行部署)
轉移現有文章至source/_posts
npm run server，檢查文章是否需要調整
推送至您的GitHub / GitLab

若不打算隱藏「歸檔」頁面時，最上面的鼓勵文字
於_config.next.yml裡custom_file_path:的style: source/_data/styles.styl註解
因使用CSS隱藏，無法做成參數開關 (6版原生有這開關，但7版以後被官方拿掉了…)

自行整合

若為舊版更新過來，建議使用hexo init blog重新開始
因使用的 HEXO 引擎版本會影響主題能否順利啟動
若直接在現有版本做的話，容易發生預期之外的錯誤

整合AdSense、like coin

於source/_data建立下列檔案，並於AdSense側邊選單總覽 -> 按廣告單元挑想要的類型，複製程式碼至想要放廣告的地方

header.njk -> 放置AdSense啟動參數
sidebar.njk -> 單元廣告 (可選，未設置即由Google自動插入)
post-meta.njk -> 單元廣告 (可選，未設置即由Google自動插入)
post-body-end.njk -> 單元廣告 (可選，未設置即由Google自動插入)

若懶得參數化，複製完後就不用再調了
亦不必再於_config.next.yml加入AdSense等相關參數

_config.next.yml裡的custom_file_path放開相關註解

隱藏「歸檔」頁面時，最上面的鼓勵文字

6版本，是有cheer_enable的開關可以直接關閉，但於7之後拿掉了
增加source/_data/styles.styl檔案，並放開_config.next.yml裡的custom_file_path相關註解

.collection-title {
  display: none;
}

修正使用`gitlab-ci`時，文章更新內容變成`push`時間

官方已提供答案了
只是藏在一個不容易發現的地方

主要就是before_script那行git ls-files .....將文章更新時間調整成commit的時間

image: node:lts

before_script:
  # Set TimeZone, eg: Asia/Shanghai
  # - export TZ='Asia/Shanghai'
  # Restore last modified time
  - "git ls-files -z | while read -d '' path; do touch -d \"$(git log -1 --format=\"@%ct\" \"$path\")\" \"$path\"; done"

pages:
  stage: build
  cache:
    paths:
    - node_modules/
  script:
  - npm install
  - npx hexo deploy
  artifacts:
    paths:
    - public
  only:
  - master

參考資料

NEXT 主題官方教學
 IT邦幫忙 / (33)試著學 Hexo-番外篇之更新 NexT 主題

前言