Hexo瞎折騰系列(1)
前言
網上有不少相關的帖子，不過版本會比較舊，而不同版本可能存在程式碼不同的問題，不過大部分還是大同小異，本系列就不囉嗦重複了，基本只會按照本人所使用的版本以及個人所使用到的內容來進行介紹。
該系列是對我所使用的Next主題進行個性化定製，涉及到js和css等的修改，還有各種外掛的使用；另一個系列是針對Next主題進行一些寫作技巧的介紹與運用，希望能對大家有所幫助。有疑問的朋友可以給我留言，我會盡可能回覆O(∩_∩)O。
我所使用的Hexo和NexT的版本如下：
hexo: 3.7.1
next: 5.1.4關於配置檔案
對於使用了Next主題的Hexo靜態部落格，存在著兩個至關重要的配置檔案`_config.yml`。在本系列中，統一將位於站點根目錄下的該檔案稱為`站點配置檔案`，將位於`themes\next`目錄下的該檔案稱為`主題配置檔案`。
準備工作：新增美化部落格的相關檔案
本系列會使用到大量的css與JavaScript的相關內容，為了更有效率與可觀賞性的美化部落格，我們將這些美化相關的東西都儘可能地寫到一類檔案中，方便日後查詢與修改。譬如下邊的幾個檔案裡，就存放了部落格的大部分美化內容：
- themes/next/source/css/_custom/custom.styl
- themes/next/source/js/src/custom.js
- themes/next/layout/_partials/head/custom-head.swig
- themes/next/layout/_custom/custom-foot.swig
除了第一個檔案custom.styl
<html>
<head>
....
{{ custom.styl }} //css
....
{{ custom-head.swig }} //js
....
</head>
<body>
....
....
{{ custom-foot.swig }} //js
{{ custom.js }} //js
</body>
</html>這裡的custom.styl
custom-head.swig是原本的NexT主題自帶的，另外兩個是我自己新增的，之所以又添加了另外兩個js檔案，是因為在頁面的不同地方引入js檔案會對頁面產生不一樣的效果與影響。
新增 custom-foot.swig 檔案
在themes/next/layout/_custom/目錄下新增custom-foot.swig檔案，該檔案內容如下：
{#
Custom foot in body, Can add script here.
#}
<!-- 自定義的js檔案 -->
<script type="text/javascript" src="/js/src/custom.js"></script>接著修改themes\next\layout\_layout.swig，在body標籤的閉合標籤前新增一行程式碼，表示將我們新新增的custom-foot.swig檔案包括進去：
<body>
....
{% include '_custom/custom-foot.swig' %}
</body>
</html>這個檔案的作用是負責引入我們想要的js檔案，比如其他第三方js的cdn等等。因為頁面在引入js檔案時是阻塞式的，如果我們在頁面的最開始就引入這些js檔案，而這些檔案又比較大，會造成頁面在渲染時長時間處於白屏狀態。
新增 custom.js 檔案
在themes/next/source/js/src目錄下新增custom.js檔案，該檔案用來存放我們自己寫的js函式等等，需要注意的是，我們之前是在custom-foot.swig檔案中的script標籤裡引入了該檔案，也就是說，在該檔案裡，我們不能再自己新增script標籤了，直接書寫js函式就行了，如下所示：
/* 返回隨機顏色 */
function randomColor() {
return "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")";
}頁面的簡單美化
由於很多大佬的部落格都有很詳盡的美化教程，這裡我就不贅述了，只簡單介紹下比較少人講述到的部分簡單美化。
改變頁面的字型大小
開啟 themes\next\source\css\_variables\base.styl，該檔案儲存了一些基礎變數的值，我們找到$font-size-base，將值改為16px。
// Font size
$font-size-base = 16px這個檔案裡定義了很多常量，有興趣的可以自己去琢磨琢磨，修改一些其他的變數。
文章啟用tags和categories
可能是該版本的NexT主題的關係，在我第一次使用NexT主題時，折騰了很久都沒辦法讓選單欄裡的tags和categories的頁面生效，一直顯示白屏。後來終於在知乎找到答案，首先我們需要將某篇文章設定tags和categories，如下：
---
title: Test
tags:
- MyTag
categories:
- MyCategory
date: 20xx-xx-xx xx:xx:xx
---接下來是重點了，首先確定是否已經在主題配置檔案中啟用了tags和categories這兩個選單，如下：
menu:
home: / || fas fa-home
archives: /archives/ || fas fa-archive
categories: /categories/ || fas fa-th
tags: /tags/ || fas fa-tags接著確定是否在source目錄下是否已經存在tags和categories這兩個資料夾，如果不存在需要執行下邊的命令：
hexo n page tags
hexo n page categories執行之後會在source目錄下生成對應的兩個資料夾，在資料夾下會存在一個index.md檔案，開啟這兩個index.md檔案，分別新增type: tags和type: categories，如下：
---
title: 標籤
date: 20xx-xx-xx xx:xx:xx
type: tags
------
title: 分類
date: 20xx-xx-xx xx:xx:xx
type: categories
---接下來重新使用本地除錯三連，就可以看到tags和categories這兩個選單的頁面顯示正常了。
去掉圖片邊框
NexT主題預設會有圖片邊框，不太好看，我們可以把邊框去掉。開啟 themes\next\source\css\_custom\custom.styl，新增如下CSS程式碼：
/* 去掉圖片邊框 */
.posts-expand .post-body img {
border: none;
padding: 0px;
}
.post-gallery .post-gallery-img img {
padding: 3px;
}修改語法高亮的主題
語法高亮就是在引入程式碼時讓程式碼呈現特定的樣式，而在Markdown檔案中語法高亮的使用方法是在引入程式碼的前一行新增三個反引號加上使用的語言名字，然後在引入程式碼的下一行使用三個反引號結尾。
如下所示的格式，就表示html程式碼的語法高亮：
<h2>Hello World!</h2>其原始碼如下：
```html
<h2>Hello World!</h2>
```
由於NexT預設的語法高亮的主題比較一般，我們可以換成其他的主題，比如我所使用的就是黑色的主題。
開啟主題配置檔案，修改如下配置：
指定Markdown的解析器
上邊我們設定了語法高亮後，雖然在本地除錯沒有問題，然而當我們將部落格部署到GitHub Pages和 Coding Pages後卻發現，前者的頁面不支援語法高亮，而後者支援。百度後才知道原來是因為 GitHub 預設使用的 Markdown 解析器不支援語法高亮，解決方法如下：
開啟站點配置檔案_config.yml，在末尾新增如下內容：
markdown: redcarpet
redcarpet:
extensions: ["fenced_code_blocks", "autolink", "tables", "strikethrough"]接下來重新執行部署三連命令，就會發現 GitHub Pages 上部署的頁面語法高亮顯示成功了。