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

本文重點疏理

  1. 以非侵入式修改整合AdSense、like coin
  2. 修正使用gitlab-ci時,文章更新內容變成push時間
  3. 隱藏「歸檔」頁面時,最上面的鼓勵文字
  4. 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,可以跳過這段

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

快速使用懶人包

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

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

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

自行整合

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

整合AdSense、like coin

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

  1. header.njk -> 放置AdSense啟動參數
  2. sidebar.njk -> 單元廣告 (可選,未設置即由Google自動插入)
  3. post-meta.njk -> 單元廣告 (可選,未設置即由Google自動插入)
  4. 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相關註解

1
2
3
.collection-title {
display: none;
}

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 主題