Hexo6 升级踩坑指南

前言

这一年多好久没有更新自己的博客了，攒了不少笔记要整理，刚好换了电脑需要重新配环境，于是决定趁这个机会给自己用来搭建博客的 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: