HTML博客归档页制作教程

HTML博客归档页的制作远不止按年份简单罗列文章，其核心在于通过科学的数据预处理与结构化组织，让用户一眼把握内容的时间分布并高效定位目标——无论是前端用JavaScript基于ISO标准日期精准分组并倒序排序，还是后端在Django中借助annotate和严格排序的regroup实现，抑或Spring Boot+Thymeleaf下用LinkedHashMap保障年份顺序与锚点友好展示，关键都在于避免低效循环、确保日期格式统一、提前提取聚合字段，并始终以用户真实浏览路径（如按年、按月甚至时间范围筛选）为设计导向，真正让归档页成为信息导航的利器而非形式化的陈列架。

归档页不是简单按年份堆文章，核心是让访问者一眼看清时间分布、快速定位目标内容。直接用 for 循环遍历所有文章再手动分组，容易在数据量变大时卡顿，且无法支持「某年某月有几篇」的聚合统计。

用 JavaScript 按年份分组文章列表（纯前端方案）

适用于静态博客或后端未提供归档结构 API 的场景。关键不是渲染，而是先做数据预处理：

• 必须确保每篇文章的日期字段是标准 ISO 格式（如 "2023-05-12T08:30:00Z"），否则 new Date() 解析可能出错
• 避免在循环中反复调用 getFullYear() —— 先用 map() 提取年份，再用 reduce() 分组，性能更稳
• 分组后记得对每个年份内的文章按时间倒序排列，否则最新文章会沉底

示例逻辑片段：

const grouped = blogs.reduce((acc, blog) => {
  const year = new Date(blog.date).getFullYear();
  if (!acc[year]) acc[year] = [];
  acc[year].push(blog);
  return acc;
}, {});
<p>Object.keys(grouped).forEach(year => {
grouped[year].sort((a, b) => new Date(b.date) - new Date(a.date));
});
</p>

Django 模板里用 {% regroup %} 实现服务端归档

这是最轻量、最符合 Django 习惯的做法，但很多人卡在「为什么 regroup 不生效」——根本原因是被分组字段必须是**已排序的 QuerySet**，且分组字段需为字典属性（不能是方法调用）。

• 视图中必须显式调用 .order_by('-create_time')，且排序字段要和 {% regroup %} 的 by 字段一致（比如 create_time__year）
• 模板中不能写 {% regroup blogs by create_time.year %}，因为 .year 是 Python 方法，Django 模板不支持；得提前在视图里把年份抽成字段：annotate(year=ExtractYear('create_time'))
• 如果用了分页，{% regroup %} 必须在分页之后执行，否则只分当前页数据

Spring Boot + Thymeleaf 归档页的 key 配置点

Thymeleaf 的 th:each 和 Map 结构配合很自然，但容易忽略两件事：一是后端传入的归档 Map 必须是 LinkedHashMap（保证年份顺序），二是前端展示时年份标题的 HTML 层级容易混乱。

• Controller 中别用 HashMap 构造 archiveMap，否则年份可能乱序；改用 new LinkedHashMap<>() 并按年份降序插入
• Thymeleaf 模板里用 th:each="item : ${archiveMap}" 时，item.key 是年份（String），item.value 是该年文章列表，别误写成 item.year
• 每个年份块外层建议包一层
  或带 id 的

  ，方便锚点跳转（比如 URL 带 #2022）

归档页真正的难点不在渲染，而在于数据组织方式是否与用户浏览路径匹配——比如用户想看「2022 年下半年」的文章，但你的归档只到年份层级，那就得补上月份聚合或加搜索过滤，而不是硬塞一个「全部展开」按钮。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML博客归档页制作教程》文章吧，也可关注golang学习网公众号了解相关技术文章。