(33)试着学 Hexo-番外篇之更新 NexT 主题

前言

接下来这一篇将会介绍如何更新 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 [email protected]

(当然，你还是可以使用 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 就好了。