(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 就好了。