我的Hexo博客搭好了11 - 怎么创建文章系列导航

Witt181
21 阅读6分钟

文章系列导航

  1. 第01篇 - 选择困难症发作
  2. 第02篇 - 搭建过程之：披荆斩棘，晋级啦！
  3. 第03篇 - 搭建过程之：一路踩坑
  4. 第04篇 - 备份Hexo博客的源码目录，上传到Gitee仓库
  5. 第05篇 - 更换Hexo主题
  6. 第06篇 - 怎么给文章分类、打标签、展示目录
  7. 第07篇 - 怎么制作/about/、/categories/、/tags/页面
  8. 第08篇 - 让世界找到我——SEO大冒险(站点地图制作和提交)
  9. 第09篇 - 添加统计字数和阅读时长的插件
  10. 第10篇 - 怎么插入图片和视频
  11. 第11篇 - 怎么创建文章系列导航
  12. 第12篇 - 自动提交URL到搜索引擎(IndexNow + Google Search Console)
  13. 持续更新中...

写系列文章时，手动维护每篇文章的导航列表太麻烦了。每次新增一篇文章，都要去修改所有相关文章的导航代码，简直是噩梦。

1 临时解决方案

在实现自动化方案之前，我使用了一个临时方案：在每一篇文章的末尾都手动编写前端HTML代码来创建系列导航。

步骤：

在文章的 Markdown 文件末尾，添加以下HTML代码：

<div class="series-nav">
  <hr>
  <div class="series-title">本系列文章</div>
  <ul class="series-list">
    <li class="series-current">第01篇 - 选择困难症发作</li>
    <li><a href="/2026/01/10/personal_blog_02/">第02篇 - 搭建过程之：披荆斩棘，晋级啦！</a></li>
    <li><a href="/2026/01/10/personal_blog_03/">第03篇 - 搭建过程之：一路踩坑</a></li>
    <li><a href="/2026/01/10/personal_blog_04/">第04篇 - 备份Hexo博客的源码目录，上传到Gitee仓库</a></li>
    <li><a href="/2026/01/10/personal_blog_05/">第05篇 - 更换Hexo主题</a></li>
    <li><a href="/2026/01/10/personal_blog_06/">第06篇 - 怎么给文章分类、打标签、展示目录</a></li>
    <li><a href="/2026/01/10/personal_blog_07/">第07篇 - 怎么制作/about/、/categories/、/tags/页面</a></li>
    <li><a href="/2026/01/10/personal_blog_08/">第08篇 - 让世界找到我——SEO大冒险(站点地图制作和提交)</a></li>
    <li><a href="/2026/01/10/personal_blog_09/">第09篇 - 添加统计字数和阅读时长的插件</a></li>
    <li><a href="/2026/01/10/personal_blog_10/">第10篇 - 怎么插入图片和视频</a></li>
  </ul>
  <hr>
</div>

缺点：

  • 维护成本高：每次新增一篇文章，都要去修改所有相关文章的导航代码
  • 容易出错：手动维护容易遗漏或写错链接
  • 不灵活：如果系列文章顺序调整，需要手动修改所有文件

所以，我决定实现一个自动化的方案，下面就是具体的实现步骤。

好在 Hexo 和 Next 主题提供了灵活的扩展机制，我们可以实现一个自动化的系列导航功能。只需要在文章的 front matter 中添加几个字段，系统就会自动生成导航列表。

2 创建 Hexo Helper 函数

首先，我们需要创建一个 Helper 函数来获取同一系列的所有文章。

步骤：

  1. 在 Hexo 项目根目录下创建 scripts/helpers/ 目录（如果不存在的话）。
  2. 创建文件 scripts/helpers/series-nav.js，内容如下：
/* global hexo */

'use strict';

/**
 * Get all posts in the same series, sorted by series_order
 * @param {Object} post - Current post object
 * @returns {Array} Array of posts in the same series
 */
hexo.extend.helper.register('get_series_posts', function(post) {
  if (!post || !post.series) {
    return [];
  }

  const seriesName = post.series;
  const allPosts = this.site.posts.toArray();
  
  // Filter posts with the same series name
  const seriesPosts = allPosts.filter(p => {
    return p.series === seriesName && p.published;
  });

  // Sort by series_order if available, otherwise by date
  seriesPosts.sort((a, b) => {
    const orderA = a.series_order !== undefined ? a.series_order : (a.date ? a.date.valueOf() : 0);
    const orderB = b.series_order !== undefined ? b.series_order : (b.date ? b.date.valueOf() : 0);
    return orderA - orderB;
  });

  return seriesPosts;
});

这个函数的作用是：

  • 根据文章的 series 字段，找出所有同系列的文章
  • 按照 series_order 字段排序（如果没有则按日期排序）
  • 只返回已发布的文章

3 创建系列导航模板

接下来，我们需要创建一个模板文件，用于在文章末尾自动生成系列导航。

步骤：

  1. 在 source/_data/ 目录下创建文件 post-body-end.swig（如果目录不存在则创建）。
  2. 文件内容如下：
{%- if page.series %}
  {%- set seriesPosts = get_series_posts(page) %}
  {%- if seriesPosts.length > 0 %}
    <div class="series-nav">
      <hr>
      <div class="series-title">本系列文章</div>
      <ul class="series-list">
        {%- for seriesPost in seriesPosts %}
          {%- set displayTitle = seriesPost.series_title or seriesPost.title %}
          {%- if seriesPost.path === page.path %}
            <li class="series-current">第{% if loop.index < 10 %}0{% endif %}{{ loop.index }}篇 - {{ displayTitle }}</li>
          {%- else %}
            <li><a href="{{ url_for(seriesPost.path) }}">第{% if loop.index < 10 %}0{% endif %}{{ loop.index }}篇 - {{ displayTitle }}</a></li>
          {%- endif %}
        {%- endfor %}
      </ul>
      <hr>
    </div>
  {%- endif %}
{%- endif %}

这个模板会：

  • 检查当前文章是否有 series 字段
  • 如果有，获取同系列的所有文章
  • 生成导航列表，当前文章会自动高亮显示
  • 自动为文章编号（第01篇、第02篇...）

4 配置 Next 主题

现在需要告诉 Next 主题使用我们创建的模板文件。

步骤：

  1. 打开 themes/next/_config.yml 文件。
  2. 找到 custom_file_path 配置项。
  3. 取消注释 postBodyEnd 这一行，并设置路径：
custom_file_path:
  # ... 其他配置 ...
  postBodyEnd: source/_data/post-body-end.swig
  # ... 其他配置 ...

这样 Next 主题就会在文章末尾自动注入我们的系列导航模板了。

5 在文章中使用

配置完成后，就可以在文章中使用系列导航功能了。

步骤：

  1. 打开要添加系列导航的文章文件。
  2. 在 front matter 中添加以下字段：
---
title: 你的文章标题
date: 2026-01-11 20:25:33
categories: 
  - 博客搭建
tags: 
  - Hexo
series: 我的博客搭好了      # 系列名称（同一系列使用相同值）
series_order: 11            # 文章在系列中的顺序
series_title: 怎么创建文章系列导航  # 可选，导航中显示的标题
---

字段说明：

  • series（必需）：系列的唯一标识名称，同一系列的所有文章必须使用相同的值
  • series_order（必需）：文章在系列中的顺序，用于排序
  • series_title（可选）：导航中显示的标题，如果不设置，将使用文章的 title 字段

6 样式说明

系列导航的样式已经在 source/_data/styles.styl 中定义好了，包括：

  • 导航容器的边框和背景色
  • 当前文章的高亮样式
  • 链接的悬停效果

如果你想要自定义样式，可以修改 source/_data/styles.styl 文件。

7 优势

使用这个自动化方案后：

  • 无需手动维护：新增文章时，只需在 front matter 中添加系列信息，导航会自动更新
  • 自动排序：根据 series_order 自动排序，不用担心顺序问题
  • 自动高亮：当前文章会自动高亮显示
  • 统一风格：所有系列导航的样式保持一致

再也不用每次新增文章都去修改其他文章的导航代码了！

avatar
文章
阅读
粉丝