Hexo - NexT 8 主題深度個性化方法

發表於 分類於

前言

不知不覺這個站點已經建立近半年了。正好又是假期，便想着能不能給站點加點新的東西，順便也學點新知識。希望達成的目標是：

  1. 對主題進行較深度的個性化；
  2. 不修改主題文件夾內的所有文件，以便更新。

之前一直使用對新手十分友好的 Redefine 主題，配置起來非常方便。但鑑於本次改造的目標是深度魔改，所以只好忍痛割愛，轉用擴展性更好的 NexT 主題。作為 Hexo 的常年大熱主題，前人的經驗在網絡上已經相當豐富，然而一旦涉及到深度美化，往往要改動主題源代碼，令我十分為難。幸好後來總算找到了一系列優雅的修改方法，兩個目標才得以完成。這一摸索的過程對仍然是新手的我來說實在是痛並快樂著，所以在此將我的修改方法記錄下來，以備不時之需。由於本人實在沒什麼技術可言，如果其中一些有更好的實現方法，還請告知我以助改進。

過程

準備

在最開始，如果你還在直接使用 /themes/next/_config.yml 作為 NexT 主題配置文件，強烈建議根據官方文檔指引改為使用 /_config.next.yml。

自定義 CSS

根據 NexT 文檔的介紹，可使用 styles.styl 文件來在不修改主題源代碼的情況下實現對網站樣式的修改，具體過程如下：

首先，在主題配置文件中找到 custom_file_path 一節，將style一行取消註釋：

1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

然後，在 /source/_data 下新建名為 styles.styl 的文件，直接在其中添加 CSS 規則集，NexT 就能直接用該文件覆蓋所選擇的元素的原有樣式。譬如，想讓站點的字號變大，只需要在該文件中添加以下代碼：

1
2
3
body{
  font-size: 1.5em;
}

比較方便且可視化的做法是，在測試頁使用 F12 進行修改，調整到滿意後再將代碼直接複製進 styles.styl；當然也可以自行撰寫新的規則，讓它能夠滿足更多細化的需要。

插入 HTML：通過注入器

根據 Hexo 文檔，Hexo 提供了注入器擴展，以「將靜態代碼片段注入生成的 HTML 的 <head> 和 / 或 <body> 中」。說人話，就是可以將一段自定義的 HTML 插入到網頁的相應位置，從而在網頁上添加新的元素內容。本站的頁眉與頁腳均以此法添加。

首先在在博客根目錄下找到 scripts 文件夾（如果沒有則新建），然後在其中新建 injector.js 文件，這樣博客啟動時就會自動加載這個腳本。隨後就可以向其中添加注入器，其格式為：

1
hexo.extend.injector.register(entry, value, to);

entry 值用於指示注入代碼的位置，value 值用於指示注入代碼的內容（也就是將自定義的代碼寫在這裏），to 值用於指示注入器會在哪些頁面生效。關於 entry 和 to 所支持的取值以及示例，請直接參照官方文檔，在此處不再贅述。

注入器可以配合 styles.styl 使用，以達到結構與樣式分離的目的。

根據 NexT 文檔，該主題同樣提供了注入功能，並且比起 Hexo 注入器支持更多注入點。但我並沒能完全理解其使用方式，還請不吝賜教。不過幸好，NexT 還提供了另外的方法來在特定位置插入代碼，參見下一節。

插入 HTML：通過自定義文件

運用與 styles.styl 類似的方法，同樣可以向網頁中插入 HTML 代碼片段。讓我們回到這裏：

1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl

只需將需要添加代碼的部分取消註釋，然後在 /source/_data 下新建對應名稱的文件，在其中撰寫 HTML 代碼，就可以實現功能。譬如，想要在 header 部分添加頁眉，就取消掉 header 一行的註釋並新建文件，隨後可以這樣寫：

1
<div class="custom-header">我是頁眉</div>

然後在 styles.styl 中給 custom-header 添加想要的樣式。

修改生成文本：通過修改默認翻譯

根據 NexT 文檔，可以使用數據文件來修改當前語言的默認翻譯。藉助這一功能，可以將網頁中自動渲染生成的文本改為想要的文本。

首先，在 /source/_data 下新建 languages.yml。然後打開 /themes/next/languages，在其中找到當前語言的對應文件，打開它，就能看到所有生成文本對應的翻譯。在 languages.yml 中添加你想要的內容，覆蓋便會完成。更多詳細內容可以在 /themes/next/languages 中的 README.md 中瞭解，此處簡單舉一例：

譬如，想要修改文章末尾附帶的版權聲明內容，讓它變得更禮貌一些，那麼首先在語言文件中找到版權聲明對應的翻譯（以 zh-TW.yml 爲例）：

1
2
3
4
5
6
7
8
copyright:
  author: 本文作者
  link: 文章連結
  post_author: 原作者
  post_link: 文章最初發表於
  license_title: 版權聲明
  license_content: "本網誌所有文章除特別聲明外，均採用 %s 許可協議。轉載請註明出處！"
  license_content_reprint: "本文章為轉載文章，已獲轉載許可。轉載請註明出處！"

然後回到 /source/_data/languages.yml，在其中添加新的文本：

1
2
3
zh-TW:
  copyright:
    lincense_content: "拙文採用 %s 許可協議，轉載煩請註明出處。"

修改完成。

修改生成文本：通過 JavaScript

修改生成文本還有一種略顯粗暴的方法，就是使用 js 直接修改 HTML 內容。此處直接通過舉例說明：

首先獲取需要修改處的類名。比方說希望修改側邊欄處的「文章目錄」為「章節」，那麼在測試頁 F12，獲得其類名為 sidebar-nav-toc。

然後在 /source/js 下新建一個 chapters.js，在其中添加用於修改的代碼：

1
2
const ch = document.getElementsByClassName("sidebar-nav-toc");
ch[0].innerHTML = "章節";

最後使用注入器或自定義文件，將調用該腳本的 HTML 代碼插入網頁，具體請參照先前的章節。

更多

如果你和我一樣也是對代碼幾乎一竅不通的初心者，這些使我受益匪淺的文章 / 站點可能會對你有幫助：