前言

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

NexT

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

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

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

npm install --save hexo-theme-next

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

安裝最新版本：

npm install hexo-theme-next@latest

指定特定版本：

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 根目錄輸入)

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

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

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

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 底下新增以下程式碼就可以了

{% 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 結尾處增加以下程式碼

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