HTML无原生话题归档功能，需JS动态分组或构建时生成；“长期无回复”依赖JS定时比对时间戳；CSS选择器无法可靠实现归档筛选；静态站点归档字段易因YAML语法错误失效。
HTML里没有原生的“话题归档”功能
HTML 是标记语言，不负责数据归类或动态筛选。所谓“话题归档”，本质是后端或前端 JS 根据内容结构（比如 data-topic 属性、class 命名规则、标题层级）提取并重组 DOM；纯静态 HTML 文件本身无法自动识别“哪些文章属于‘CSS’话题”。
常见错误现象：<div class="archive"></div> 里空空如也，或手动复制粘贴导致更新遗漏；误以为加个 <meta name="topic" content="JS"> 就能让浏览器自动归档——浏览器完全忽略这种写法。
- 真正可行路径：用 JS 读取所有文章区块（如
article[data-topic]），按值分组，再插入对应容器 - 若无 JS，只能靠构建时处理：用 Hugo/Jekyll 等生成器，在编译阶段按 front matter 中的
topic字段输出不同页面 - 注意
data-属性需小写、不含空格，data-topic="html-encoding"比data-topic="HTML 编码"更可靠
“长期无回复”提示不是 HTML 标准行为
这个提示几乎只出现在论坛、博客评论区等交互场景，HTML 本身既不定义“回复”概念，也不内置超时逻辑。它一定是 JS 定时检查了某个接口（如 /api/comments/123）返回的 last_reply_at 时间戳，再和当前时间比对后渲染的 DOM。
容易踩的坑：new Date().getTime() - lastReplyTime > 30 * 24 * 60 * 60 * 1000 这种硬编码在跨时区页面会出错；更糟的是直接把“30天”写死在 HTML 里，导致运营想改成 7 天就得改代码。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：服务端在返回评论数据时，附带一个布尔字段
is_stale或字符串字段stale_label，前端只做条件渲染 - 若必须前端判断，用
Intl.DateTimeFormat解析时间，别信new Date("2023-01-01")在 Safari 的兼容性 - 别忘了考虑未登录用户看不到完整时间戳的情况——此时“长期无回复”可能根本不该显示
为什么不能只靠 CSS 或属性选择器实现归档筛选
有人试过写 [data-topic="css"] { display: block; } 再配合 JS 切换 class 控制显隐，这看似简单，但实际卡在三个地方：DOM 加载顺序、CSS 优先级污染、以及最致命的——语义断裂。
例如点击“HTML”标签后，页面滚动到顶部，但 URL 没变，刷新就回到默认状态；又或者 data-topic 值拼写不一致（"html" vs "HTML"），导致归档漏项。
- 真实项目中，归档入口（如导航栏）应是带
href的链接，指向/topics/html/这类真实路由，而非仅靠 JS 操作 DOM - 如果坚持单页应用式切换，必须同步操作
history.pushState()和window.location.hash，否则前进后退失效 - CSS 选择器匹配大小写敏感，
[data-topic=html]不会选中data-topic="HTML"，统一转小写再设属性更稳妥
静态站点生成时归档字段的常见陷阱
当你在 Markdown 文件 front matter 写 topic: HTML & CSS，Jekyll/Hugo 实际解析出的是字符串还是数组？取决于你用没用 YAML 列表语法。一个符号之差，归档页就崩了。
典型错误：YAML 中 topic: HTML, CSS 被当做一个字符串，而非两个值；而 topic: [HTML, CSS] 又因未加引号，被 YAML 解析为变量引用报错。
- 正确写法是
topic: ["HTML", "CSS"]或topic: [ "HTML", "CSS" ]（注意引号和空格） - Hugo 用户注意
.Params.topic默认是字符串，要用delimit .Params.topic ","手动拆分，不如一开始就存数组 - 生成归档页时，别直接遍历所有页面再
if page.topic contains "html"——性能差，且大小写、空格、连字符都得额外 normalize
归档逻辑越早下沉到数据层（比如 CMS 字段类型、YAML schema 校验），后期维护成本越低。手写 HTML + JS 硬凑的“伪归档”，三个月后自己都看不懂哪段在过滤哪段在排序。
