(33)試著學 Hexo-番外篇之更新 NexT 主題

前言

接下來這一篇將會介紹如何更新 NexT 主題與介紹 Hexo5 之後的 NexT 之後有什麼樣的改變。

NexT

在前一個章節我們有介紹到 Hexo5 之後的主題可以支援 npm 安裝,而在這邊 NexT 也已經可以在 npm 下載,透過這種方式最主要好處在於「更新」,在原本的作法我們都是透過 git clone 的方式回來,因此若要更新主題就必須使用 git pull 等方式更新合併,但這個方式其實並不是那麼好用,一方面主題必須加入版本控制,另一方面我們若要做一些調整其實就相對很不方便(例如版型的小調整)。

因此這邊我們將會透過 npm 來安裝 NexT 囉。

請在剛剛建立好的 Hexo5 專案輸入以下指令

1
npm install --save hexo-theme-next

你也可以直接輸入以下任一指令

安裝最新版本:

1
npm install hexo-theme-next@latest

指定特定版本:

1
npm install hexo-theme-next@8.0.0

(當然,你還是可以使用 git clone 的方式,如果你會有需要大量客製化建議改走原本的建立方式,因為檔案會建立在原本的 themes/next 底下。)

在這邊先講一個簡單觀念,npm 下載的檔案都會在 node_modules 底下,這代表什麼呢?在前面「試著學 Hexo - 認識 Hexo 目錄結構」有簡單說到這個資料夾是放置「Hexo 所需要運作的套件暫存處」,因此在這個資料夾底下我們都不會去動到甚至修改,因為這資料夾都是透過 npm 來還原,使用這個方式的好處在於更新與一些設置的方便性,後面介紹你會更有感覺。

否則在原本作法上,更新就如同前面說的一樣「很麻煩」,而且在版本控制上時常會踩雷,例如:themes 底下的主題無法加入版本控制,必須刪除主題底下的隱藏資料夾 .git 才能夠一併加入到版本控制內,否則在轉移電腦使用時會出現問題。

當你輸入完畢之後,一樣到 hexo/_config.yml 搜尋 theme: 並改成 theme: next 就可以套用主題囉。

新版 NexT 特色

在 Hexo5 之後的 NexT 設置上變得很特別,你會找不到 themes/_config.yml,在此是因為改走 npm 安裝的 NexT 必須自己建立一個主題專用的 _config.yml,依照官方說明你必須輸入以下指令(請 Hexo 根目錄輸入)

1
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

此時就會在 Hexo 根目錄下建立一個 _config.next.yml,而這個檔案就是我們關於主題相關的設置

_config.next.yml

裡面的內容基本上大同小異,因此這邊主要介紹我覺得最具特色的地方,也就是關於客製化的部分,在原本的作法我們都必須直接修改 NexT 的原始檔,因此就會導致無法更新主題,所以在一次的版本上 NexT 提供了部分頁面的客製化,其中包含了以下(截取至 _config.next.yml)

1
2
3
4
5
6
7
8
9
10
11
ustom_file_path:
#head: source/_data/head.njk # head
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk # 側邊欄
#postMeta: source/_data/post-meta.njk # 文章標題底下
#postBodyEnd: source/_data/post-body-end.njk # 文章結尾
#footer: source/_data/footer.njk # footer 結尾
#bodyEnd: source/_data/body-end.njk
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl

(另外附帶一提,這一次的 NexT 也將模板改成 njk)

相信聰明的你一看就知道我們客製化的部分就會直接放在 source 底下與以往直接修改 NexT 原始碼有很大的不同。

而增加的方式也變得很簡單,舉例來講我要將以下我的 Google AD 程式碼放到文章結尾處,那麼我就只需要在 post-body-end.njk 底下新增以下程式碼就可以了

1
2
3
4
5
6
7
8
9
{% if theme.google_adsense.google_ad_client_id %}
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: '{{ theme.google_adsense.google_ad_client_id }}',
enable_page_level_ads: {{ theme.google_adsense.enable_page_level_ads }}
});
</script>
{% endif %}

關於 Google AD 的部分設置會針對 _config.next.yml 結尾處增加以下程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Google AdSense
google_adsense:
enable: true
google_ad_client_id: #
enable_page_level_ads: true
## siderbar_enable
siderbar_enable: true
siderbar_data_ad_slot: #
## post header
postheader_enable: true
postheader_data_ad_slot: #
## post footer
postfooter_enable: true
postfooter_data_ad_slot: #

觀念可以參考先前我寫的這一篇「替 Hexo NexT 增加 Google AdSense」概念都是相同的,因此這一段其實還需要做調整。

回歸正題,透過這種方式我們就可以大幅度的客製化自己的主題並不修改到 NexT 原始碼,在主題設置上也可以比較方便,其餘的部分我就不詳細說了,其實看官方文件就很詳細囉

Custom Files

最後

最後的最後我忘記補充一段,就是關於先前文章的問題,其實文章轉移很簡單,就一樣將文章原始檔整個丟到 source 就好了。

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
當然你也可以成為 讚賞公民 每個月請我喝一杯咖啡,又或者是 一次性金額抖內

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ