我的博客丑了三个月，换了个主题当场封神：Hexo博客换NexT主题全流程
我的 Hexo 博客上线好几个月了，一直用默认的 landscape 主题。说实话，丑得我都不想打开第二眼——没有侧边栏、没有分页、文章列表一拉到底，旧文章永远沉在底部不见天日。
上周我终于忍不了了，花 10 分钟换了 NexT 主题，顺便把品牌定制也做了。现在打开博客，我自己都想多刷几遍。
下面是把整个过程拆成 8 步的完整教程，每一步都有命令，小白也能照抄。
首先，进入你的博客项目目录：
1
cd 你的博客目录
看一下当前用的是不是默认主题：
1
grep 'theme:' _config.yml
如果输出 theme: landscape，说明你跟我一样在用默认主题，这篇文章就是为你写的。
Hexo 生态里有几千个主题，我列三个最主流的选择：
我选 NexT 的理由很简单：3 万 star 的社区冗余。 一个主题用的人越多，你遇到的每个问题基本都能在搜索引擎里找到答案。这对小白来说就是最大的安全感。
如果你是 pnpm 用户（和我一样），一行搞定：
1
pnpm add hexo-theme-next --save
如果是 npm 用户：
1
npm install hexo-theme-next --save
装好后，修改站点配置文件 _config.yml，把主题名换成 next：
1
theme: next
就这么简单，现在运行 hexo server 看看效果——你的博客已经换皮了。
默认效果其实就能打 60 分，但我们要的是 90 分——不急，后面一步步调。
NexT 8.x 最核心的一个概念：不要在 node_modules 里直接改主题文件。
为什么？因为 node_modules 里的一切改动用 npm install 或 pnpm install 后会被覆盖，你的定制全丢。
正确做法：在你的项目根目录新建一个文件叫 _config.next.yml，NexT 会自动读取这个文件来覆盖默认配置。
1
touch _config.next.yml
下面我把 _config.next.yml 里要写的内容逐项拆开讲。
打开 _config.next.yml，填入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
scheme: Gemini
darkmode: true
menu:
home: / || fa fa-home
archives: /archives/ || fa fa-archive
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
about: /about/ || fa fa-user
sidebar:
position: left
display: post
avatar:
url: /images/avatar.png
rounded: true
reading_progress:
enable: true
color: "#4fc3f7"
codeblock:
border_radius: 8
copy_button:
enable: true
pjax: true
fancybox: true
mediumzoom: true
lazyload: true
bookmark:
enable: true
color: "#4fc3f7"
每一项我都加了注释说明它是干什么的。你现在只需复制粘贴，以后想调再回来看注释。
这一步走完，你的博客已经能打到 75 分了——有侧边栏、有进度条、代码块有了复制按钮。剩下的 15 分，我们留给”品牌定制”。
找一张正方形的图片（推荐 512×512 以上），放进 source/images/ 目录。
1
2
mkdir -p source/images
cp /你的图片路径/你的头像.png source/images/avatar.png
打开 _config.yml（注意，这个是站点主配置，不是主题配置），修改以下字段：
1
2
3
4
5
title: 你的博客名
subtitle: 一句话介绍你的博客
description: 你的博客是干什么的（写清楚，搜索引擎要靠这个收录）
keywords: 关键词1,关键词2,关键词3
author: 你的名字
因为菜单里配了 about: /about/，你必须建一个对应的页面，否则点进去是 404：
1
hexo new page about
这会在 source/about/index.md 生成一个文件。打开它，用第一人称写一段话告诉读者你是谁、这个博客写什么。
在 _config.next.yml 中加上页脚设置：
1
2
3
4
5
6
footer:
since: 2026
icon:
name: fa fa-snowflake
color: "#4fc3f7"
copyright: 你的名字 — 一句话介绍
让你的读者能在博客里搜关键词：
1
pnpm add hexo-generator-searchdb --save
然后在 _config.yml 中添加：
1
2
3
4
search:
path: search.xml
field: post
content: true
让你的博客能被 RSS 阅读器抓取：
1
pnpm add hexo-generator-feed --save
然后在 _config.yml 中添加：
1
2
3
4
5
feed:
enable: true
type: atom
path: atom.xml
limit: 20
1
hexo clean && hexo generate && hexo server
打开浏览器访问 http://localhost:4000，确认一切正常。
1
2
3
git add -A
git commit -m "主题迁移：从 landscape 到 NexT"
git push
GitHub Actions 构建完成后，打开你的博客域名验证效果。
现象：hexo generate 报一堆 Cannot find module 'hexo-util' 错误，首页文章显示全文（摘要机制失效）。
原因：pnpm 默认不提升依赖（strict hoisting），NexT 的脚本找不到它依赖的模块。
修复（必须做，不能跳过）：
1
2
echo 'shamefully-hoist=true' > .npmrc
CI=true pnpm install
然后验证修复效果：
1
hexo generate 2>&1 | grep -c "Cannot find module"
输出必须为 0，否则说明还有问题。
Hexo 8.1.2 彻底移除了 <!-- more --> 和 excerpt_length 的摘要截断功能。
唯一替代方案：每篇文章的 front-matter 里手动加 description 字段：
1
2
3
4
---
title: "文章标题"
description: "80-150 字的中文摘要，告诉读者这篇文章讲什么"
---
没有 description 的文章会显示全文——首页瞬间被长文淹没。
别慌，这是 CDN 缓存。
你 curl 验证看到的可能是旧页面。正确的验证姿势：
1
2
3
4
5
curl -sL "https://你的域名/"
curl -sL "https://你的域名/?nocache=$(date +%s)"
走完上面 8 步，你的博客已经脱胎换骨：
- ✅ 有侧边栏、分页、暗色模式
- ✅ 代码块一键复制、图片点击放大
- ✅ 本地全文搜索
- ✅ RSS 订阅
- ✅ 品牌定制——标题、头像、页脚都是你自己的味道
- ✅ 3 个坑提前帮你填平了
整个过程不用写一行 CSS，不用改一行模板代码。NexT 把 90% 的事情都替你做好了，你只需要写一个 50 行的 YAML 文件。
你的博客不应该只是”能用”——它值得”好看”。
关联阅读：
「每天帮你踩一个 AI 的坑，省下一小时。」