前言
這一年多好久沒有更新自己的博客了，攢了不少筆記要整理，剛好換了電腦需要重新配環境，於是決定趁這個機會給自己用來搭建博客的 hexo 和 next 主題升個級（其實是重新安裝），然後把筆記整理整理潤色一下重新發到博客上。
雖然這兩者的安裝已經非常傻瓜式了，但是實際上一通操作下來還是踩了一些坑，於是決定簡單整理一下以便後續查閱。
這篇文章寫於 2023 年中旬，截止到目前 2024 年 3 月，hexo 7.0 正式版已經發布有一段時間的，經過慎重的考慮，筆者決定還是回到博客園，不自己折騰了 orz
一、安裝 Hexo
按官方文檔安裝 Hexo：https://hexo.io/zh-cn/docs/
在根目錄的 /source/_post 文件夾中放上文章或文件夾即可。
二、安裝 Next 主題
可以選擇直接 npm install hexo-theme-next --save 安裝，也可以直接將 hexo 源碼拉到根目錄的 /theme 文件夾，比較方便後續升級和 diy：
cd 根目錄
git clone <https://github.com/next-theme/hexo-theme-next> themes/next
在 hexo 配置文件中指定 theme: next 後，執行 hexo server -g 命令即可在本地服務預覽內容。
更多內容參見： https://blog.pantato.com/2022/08/18/hexo博客next8-0主題深度配置/
三、踩坑
1、標籤、分類目錄不顯示
默認情況下，next 主題只開放文章和歸檔兩個菜單欄，左側菜單欄頭像下的“標籤”和“分類”根本無法點擊，需要額外的配置纔可以使用。
在配置文件中開啓菜單欄
首先，確認在 next 主題的配置文件中開啓了對應的側邊欄菜單：
menu:
home: / || fa fa-home # 主頁
tags: /tags/ || fa fa-tags # 標籤
categories: /categories/ || fa fa-th # 分類
archives: /archives/ || fa fa-archive # 歸檔
創建頁面
配置後頁面點擊分類後會顯示 Can not get /tags/ （大概是這個報錯）表示找不到頁面，此時則需要進入 hexo 根目錄，並執行下述命令創建頁面：
hexo new page "categories"
hexo new page "tags"
此時根目錄的 /source 目錄下會分別出現兩個文件夾 categories 和 tags ，裏面都有一個 index.md 文件，點擊進入後爲其添加 type ：
---
title: categories
date: 2023-08-11 16:22:41
type: categories # 填寫對應的頁面類型
---
此時重新編譯運行即可。
2、生成摘要
next6 以上的版本就沒有集成自動摘要插件了，對此官方也給出了一些處理方式，參見：https://github.com/next-theme/hexo-theme-next/issues/4 中的 auto_excerpt 部分內容。
在文章頭部配置
你可以直接在文章的 md 文件頭部裏面配置:
---
title: next5主題自定義摘要
date: 2020-12-21
tags: [雜七亂八]
categories: [雜七亂八]
description: 這裏是一段摘要
---
在文章內容中添加 <!-- more -->
或者在文章的內容中添加 <!-- more --> 然後在其之前的內容將會自動提取爲摘要。
安裝hexo-excerpt插件
也可以通過 npm install hexo-excerpt --save 命令安裝 hexo-excerpt 插件，然後重啓項目後即可生效。安裝插件後，可按文檔在 hexo 配置文件中配置相應參數：
excerpt:
depth: 3
excerpt_excludes: []
more_excludes: []
hideWholePostExcerpts: true
通過 js 手動截取
若不滿意可參照我以前的思路編寫 js 手動截取：https://www.cnblogs.com/Createsequence/p/14407015.html
不過在 hexo8 中由於頁面佈局調整，因此 js 也需要調整：
window.onload = function() {
return getAbstract();
}
/**
* 截取摘要
*/
function getAbstract() {
let arts = document.getElementsByTagName('article');
if (arts.length <= 1) {
console.log("不在主頁！");
return ;
}
for (let i = 0; i < arts.length; i++) {
let dom = arts[i];
// process post body
let button = dom.getElementsByClassName("post-button")[0];
let body = dom.getElementsByClassName("post-body")[0];
body.removeChild(button);
// resolve abstract content
let content = body.textContent;
content = content.substring(0, 250) + "......";
body.innerHTML = content;
// append post button
body.appendChild(button);
}
}
3、樣式
如果對默認的樣式不滿意，可以進入 next 主題的根目錄下的 /source/css/_variables/base.styl 文件調整相應的參數。比如我覺得默認的字體有點太大了，就可以修改字體配置的文件：
// Font size
$font-size-base = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 1em;
$font-size-smallest = .75em;
$font-size-smaller = .8125em;
$font-size-small = .875em;
$font-size-medium = 1em;
$font-size-large = .9em; // ，默認爲 1.125em
$font-size-larger = 1em; // 默認爲 1.25 em
$font-size-largest = 1.25em; // 默認爲 1.5em
4、指定文件輸出路徑
如果需要改變 hexo generate 命令生成的靜態文件的輸出路徑，可以參照 https://github.com/hexojs/hexo/issues/1585，直接修改 hexo 配置文件中下述部分即可：
# Directory
source_dir: source
public_dir: ./../docs # 原本爲 public，即 hexo 根目錄的 public 文件夾下
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: