一、背景与动机

我的博客（misaka10013.cn）从建站起就一直用 Hexo 4.2.0 + NexT 6.0.0，跑了 6 年没动过框架。
最近几次想加新功能、调页面，每次让 AI 配合干活，对方都吐槽版本太老——依赖过时、插件不兼容、配置语法都变了。早就该升了，但一直懒得动。

最近我主要有点新想法：

1. 多语言支持。 我想加中英日三语——一是练外语，切换着看自己写的文章；二是 SEO 问题，不管国内国外，我的博客文章都不容易被搜到，多语言版本对搜索引擎更友好。

2. 想试试新主题。 看上了安知鱼（AnZhiYu）主题，颜色丰富、圆角卡片、渐变动画，和 NexT 的性冷淡风格是两个极端。既然要改，不如直接升到最新版本，一次性解决。

二、升级框架（Hexo 4→8 + NexT 6→8）

总思路

经过和AI的初步沟通讨论，以及对博客情况的了解后，初步定下执行方案。从 master 分支分出 next8 分支，在分支上完成升级、主题迁移、功能移植、多语言开发，全部测试通过后再合并回 master 上线。全程不影响线上运行的旧版。

分工

• 我（御坂）：定方案、验步骤、拍板决策
• AI：具体执行、评估影响、踩坑反馈

升级清单

三、多语言方案

需求对齐过程

因为需要和AI协同，所以一定需要和AI对齐颗粒度。我先让 AI 针对我粗略的需求提具体实现方法，然后采用苏格拉底式来不断问我话，逐步对齐需求：

1. 三语 UI（中英日）——✅ 必须
2. 切换按钮全站侧边栏常驻——✅ 必须
3. 语言站首页只显示对应语言文章——✅ 必须
4. 文章页：有译文→跳转，无译文→按钮置灰禁用+文内提示——✅ 折中方案
5. 翻译是用户的活，AI 只搭框架——✅ 明确
6. 日文站初期可空首页——✅ 接受

最终方案：单构建 + 薄脚本

最终方案是单构建 + 一个 scripts/i18n-blog.js 搞定所有逻辑。

1.定义译文路由：post_permalink 过滤器（优先级 9）

• 要解决的问题：默认情况下，所有文章都使用相同的 URL 结构，无法区分语言版本。
• 脚本做法：在 Hexo 生成文章永久链接时进行拦截并改写。
  • 如果文章是默认语言（如 zh-CN），保持原有路径，例如 /p/xxx.html。
  • 如果文章是译文（如 en），强制改写成 /en/p/xxx.html。

效果：同一篇文章的不同语言版本拥有独立且规范的 URL，便于 SEO 和后续的切换跳转。

2.生成各语言独立的列表页面：覆盖 index / archive / category / tag 生成器

• 要解决的问题：Hexo 默认的生成器把所有的文章混在一起生成首页和归档，无法按语言区分。
• 脚本做法：
  • 重写这些生成器的逻辑。
  • 针对每一种语言，分别生成该语言的首页、归档页、分类页、标签页。
  • 生成时只筛选属于该语言的文章。
  • 如果该语言下没有任何文章，则生成一个占位页，而不是直接返回 404。

效果：

• 每个语言站拥有自己的首页和内容列表，互不干扰。
• 访问 /en/ 时至少能看到占位提示，不会有空页面报错，用户体验更完善。

3.1 增加语言切换器（Select 下拉框）和文章插入语言横幅提示

• 让脚本会分析当前页面是否存在其他语言的对应版本。

• 有译文：切换选项高亮/可点击，并指向正确的译文地址。

• 无译文：切换选项置灰（disabled），并通过 title 属性提示“该文章暂无英文版”等。

• 当文章存在其他语言版本时，在文章正文顶部插入提示横幅。

• 例如：“本文还有英文版：English Version”

• 若当前是英文版，则显示：“此文章的中文版：中文原文”

效果：用户在页面上的语言切换完全依据实际内容是否存在来决定，避免了用户跳转到不存在的页面，整个交互体验非常智能。

4.核心实现：i18n_map 生成器

• 要解决的问题：前端 JS 需要一份字典，用来快速进行语言跳转。
• 脚本做法：在构建时额外生成一个静态 JS 文件：/js/i18n-map.js。

该文件内包含一个映射表，例如：

1
2
3
4
5
6

window.I18N_MAP = {
  "my-post": {
    "zh-CN": "/p/my-post.html",
    "en": "/en/p/my-post.html"
  }
};

效果：这份数据把每篇文章的唯一标识（abbrlink）与所有语言版本的路由关联起来，前端可以直接读取该表实现快速切换，无需请求服务器，提升响应速度。

5.整体工作流程

在这个脚本的调度下，Hexo 的构建顺序为：

1
2
3
4
5
6
7

graph TD
    A[构建开始] --> B[Step 1: 修正译文永久链接]
    B --> C[Step 2: 按语言生成列表页]
    C --> D[Step 3: 注入语言切换器逻辑与翻译横幅]
    B --> E[Step 4: 生成前端语言映射数据 i18n-map.js]
    D --> F[静态站点生成完毕]
    E --> F

翻译工作流（以后我执行）

1
2
3

AI 翻译初稿 → 本人细改 → 放到 source/_posts/en/ 目录
→ front-matter 写 lang: en + 和原文相同的 abbrlink
→ 本地预览验证 → git push 上线

切换器交互逻辑

四、主题试驾（安知鱼）

零污染共存方案

不破坏现有 NexT 配置，本地双服务器跑，便于我逐步根据页面需求，迁移老主题的定制配置：

1
2

端口 4100 → NexT 主题（hexo server -p 4100）
端口 4200 → 安知鱼主题（hexo server --config "_config.yml,_config.anzhiyu_test.yml" -p 4200）

_config.anzhiyu_test.yml 仅通过一行配置，实现以后可以一个配置切换主题，方便我可以随时切换回性冷淡风格：

1

theme: anzhiyu

启动时 Hexo 合并两个配置文件，安知鱼覆盖 theme 字段，其他配置（文章、多语言脚本等）共享主配置。

安知鱼配置体系

重要： 安知鱼的所有配置在博客根目录的 _config.anzhiyu.yml 中修改，不用碰 themes/anzhiyu/ 内的文件。

功能迁移清单

原博客的定制小功能迁移，一部分保留到新主题，一部分不要了。

五、当前配置与操作指南

多语言配置说明

修改 _config.yml 中的以下字段：

1
2
3
4
5
6
7

# 语言顺序：第一个是默认语言（中文）
language: [zh-CN, en, ja]

# 多语言插件配置
i18n_blog:
  default_language: zh-CN     # 默认语言
  langs: [en, ja]             # 启用的其他语言

写新文章

中文文章（默认语言）：

文件位置：source/_posts/
示例：source/_posts/我的新文章.md

front-matter 示例：

1
2
3
4
5
6
7
8
9

---
title: 我的新文章
tags:
  - 标签1
  - 标签2
categories:
  - 技术笔记
date: 2026-08-28 17:20:00
---

不需要写 lang 字段，abbrlink 在构建时自动生成。

英文译文（需要中文版同时存在）：

文件位置：source/_posts/en/
示例：source/_posts/en/my-new-article.md

front-matter 示例：

1
2
3
4
5
6
7
8
9
10
11

---
title: My New Article
tags:
  - tag1
  - tag2
categories:
  - 技术笔记
date: 2026-08-28 17:20:00
lang: en
abbrlink: 12345678    # 和中文版相同的 abbrlink
---

关键： lang: en 必须写，abbrlink 必须和中文版相同。

日文文章（目前空站，有译文时再放）：

文件位置：source/_posts/ja/
front-matter 写 lang: ja + 相同 abbrlink。

文章配置图

新主题具有给文章配置首页预览图和文章背景图功能。在博客文章的yaml配置中增加图片配置并在目录添加图片。如果找不到图片，博客默认使用系统自带的兜底图片随机选封面。图片需要准备19:9比例的。

1
2

cover: /img/covers/dd1.webp      # 首页缩略图（2026-09-04 C6 转 webp 省 28.9%）
top_img: /img/covers/dd2.webp    # 文章页顶部大图（2026-09-04 C6 转 webp 省 49.7%）

本地预览方法

站点本地预览：

1
2
3

cd D:\1\coding\hexo-blog-master
npx hexo clean   #清缓存
npx hexo server -p 4100   #启动本地服务

然后本地查看。http://localhost:4100

NexT 主题（端口 4100）：

在博客根目录执行：

1
2

cd D:\1\coding\hexo-blog-master
hexo server -p 4100

访问 http://localhost:4100

安知鱼主题（端口 4200）：

在博客根目录执行：

1
2

cd D:\1\coding\hexo-blog-master
hexo server --config "_config.yml,_config.anzhiyu_test.yml" -p 4200

访问 http://localhost:4200

注意： 修改 _config.anzhiyu.yml 或 source/css/ 等文件后，需要重启 server 才能生效。按 Ctrl+C 停止，重新执行上面的命令。

上线操作

CNB 云原生构建，push 到 master 分支后自动部署。无需本地 hexo g。

1
2
3
4

cd D:\1\coding\hexo-blog-master
git add -A
git commit -m "更新内容"
git push origin master

注意： 沙箱环境 git push 会报凭据错误，请在本机终端（cmd/PowerShell）中执行上述命令。

安知鱼配置迁移期间预览

当前线上仍是 NexT 主题。安知鱼的试驾配置在以下文件中，尚未 commit 到 master：

等我完成菜单、友链、评论等配置迁移后，再决定是否将安知鱼正式上线。

六、待办与展望

• SEO 专项：hreflang alternates、sitemap 多语言条目、robots.txt——当前搜”misaka10013”主要出 GitHub，博客可见度需要提升
• 重点文章翻译工程：挑重点文章，用 AI 翻译初稿后自己细改，逐步丰富英文版内容
• 安知鱼正式上线：配置迁移完成后，决定是否切换
• OSS 密钥轮换：deploy 段的明文密钥在 git 历史中，建议轮换