归档页须用JavaScript动态生成年月分组：统一ISO日期格式，按yearMonth=date.slice(0,7)分组并倒序排序；用<details>/<summary>实现原生折叠；HTML先输出完整结构再JS增强以保障SEO和弱网体验；时间显示应截取字符串而非依赖toLocaleDateString()。
归档页必须用 JavaScript 动态生成年月分组，别硬编码
静态写死 2023年12月、2024年1月 看似省事，但每发一篇新文章就得手动改 HTML，漏一次就断档。真实博客文章数据通常来自 JSON 文件或内联 data-posts 属性，靠 JS 解析时间戳、按年月聚类才是可持续做法。
关键点：
- 所有文章日期字段统一用 ISO 格式字符串（如
"2024-03-15T09:22:00Z"），避免new Date("2024/3/15")在 Safari 上解析失败 - 用
Array.prototype.reduce()按yearMonth = date.slice(0, 7)（即"2024-03"）分组，比正则或getYear()/getMonth()更稳 - 分组后记得对年月键排序：
Object.keys(groups).sort((a, b) => b.localeCompare(a))，否则 2024-10 会排在 2024-9 前面
点击年月展开文章列表时，用 details/summary 而非手写 JS 折叠
不用监听 click、不操作 classList、不写 CSS 动画——原生 <details> 就是为此设计的。它自带状态管理、键盘可访问（空格/回车切换）、语义正确，且默认展开/收起行为符合用户直觉。
实操注意：
立即学习“前端免费学习笔记（深入）”；
-
<details>内部直接放<ul>或<ol>，别套<div>，否则屏幕阅读器可能跳过列表语义 - 用
<summary>2024年3月（12篇）</summary>，括号里的数字建议 JS 动态注入，避免 DOM 更新后数字不同步 - 如果要默认展开最新月份，加
open属性到对应<details>标签即可，无需 JS
SEO 和加载性能：归档页不能等 JS 执行完才显示内容
搜索引擎爬虫和弱网用户看到空白页几秒，是归档页最常被忽略的问题。服务端渲染（SSR）不现实，但可以“渐进增强”：先输出完整 HTML 结构（含所有年月标题和文章链接），再用 JS 补充交互逻辑并隐藏冗余内容。
具体做法：
- 初始 HTML 中，每个年月块都用
<section class="archive-group">包裹，内部含<h3>和已渲染的<ul> - JS 加载后，遍历这些
section，把它们替换成<details>，并移除初始的<ul>（防止重复）——或者更简单：CSS 先设.archive-group { display: none; }，JS 初始化后再显式 show 对应块 - 避免在
DOMContentLoaded里做大量 DOM 插入，改用document.createDocumentFragment()批量挂载
时间格式本地化别用 toLocaleDateString() 直接拼接
想显示“2024年3月”，写 new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long' }) 看似合理，但中文环境下会出“2024年3月15日”，多出“15日”。这不是 bug，是 API 本意如此。
安全做法：
- 从 ISO 字符串中直接截取：
dateStr.substring(0, 4) + '年' + parseInt(dateStr.substring(5, 7), 10) + '月'，干净无歧义 - 如果需适配多语言（比如同时支持英文归档页），建一个映射表：
{ '01': { zh: '1月', en: 'January' } }，而不是依赖浏览器 locale - 注意月份补零问题：
dateStr.substring(5, 7)是"03"，转数字再转回字符串才能得"3月"，否则直接拼会变成"03月"
