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默認的語法高亮的主題比較一般，我們可以換成其他的主題，比如我所使用的就是黑色的主題。
打開主題配置文件，修改如下配置：
# 語法高亮主題
# Code Highlight theme
# Available value:
# normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties指定Markdown的解析器
上邊我們設置了語法高亮後，雖然在本地調試沒有問題，然而當我們將博客部署到GitHub Pages和 Coding Pages後卻發現，前者的頁面不支持語法高亮，而後者支持。百度後才知道原來是因為 GitHub 默認使用的 Markdown 解析器不支持語法高亮，解決方法如下：
打開站點配置文件_config.yml，在末尾添加如下內容：
markdown: redcarpet
redcarpet:
extensions: ["fenced_code_blocks", "autolink", "tables", "strikethrough"]接下來重新執行部署三連命令，就會發現 GitHub Pages 上部署的頁面語法高亮顯示成功了。
推薦一些寫得很齊全的文章鏈接
- hexo的next主題個性化配置教程
- 打造個性超贊博客Hexo+NexT+GithubPages的超深度優化
Hexo瞎折騰系列(1) - 準備工作與簡單美化