支持标签云筛选的博客归档页需用语义化html结构（如、）、data-category驱动交互，通过频次归一化（1–4档）控制标签权重，点击筛选时更新url hash并同步视觉状态，显隐控制用classlist.toggle，空结果显示提示。
开发一个支持标签云筛选的博客文章归档页，核心是让标签可点击、文章可响应、状态可追踪——不是堆样式，而是用语义化结构打底，靠数据属性驱动交互。
用语义化结构组织归档页骨架
归档页本质是“文章集合 + 分类入口”，HTML 结构要清晰分层：
- 用
<main></main>包裹主体内容，明确页面主要内容区域 - 每篇文章用
@#@#@#@#@#@#@#@#@#@0，不写 class 名如tag-react - 标签云区域单独放在文章列表上方或侧边，也用
<ul class="tag-cloud"></ul>，每个<li>内嵌<a data-category="css" data-weight="3">CSS</a>
标签云渲染与权重归一化
标签云不是词堆砌，得体现热度差异，且必须可访问、可响应：
- 从文章数据中统计每个标签出现频次，取最大值后将所有频次映射为整数档 1–4：
Math.min(4, Math.max(1, Math.round((count / max) * 4))) - 每个
<a></a>必须带data-weight="3"，禁用原始数字（如 1200）直接当字号依据 - CSS 中用
em单位定义字号：a[data-weight="1"] { font-size: 0.85em; }，a[data-weight="4"] { font-size: 1.35em; } - 容器设
display: flex; flex-wrap: wrap; gap: 0.5rem;，避免 float 或 white-space: nowrap - 超长标签加
max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
点击筛选逻辑用 dataset + filter 实现
筛选不是切换 class，而是比对数据、控制显隐：
- 所有文章项缓存一次：
const articles = document.querySelectorAll("article");，避免反复查 DOM - 监听标签云点击，用
event.target.dataset.category拿到当前筛选值 - 维护一个活跃分类数组
activeCategories = []，多选时判断article.dataset.tags?.split(",").some(tag => activeCategories.includes(tag.trim())) - 显隐控制统一用
el.classList.toggle("hidden", shouldHide)，CSS 定义.hidden { display: none; }或更优的opacity: 0; pointer-events: none; - 空结果时插入或显示
<p class="no-results">暂无匹配文章</p>，别留白
状态同步不能只靠视觉
用户刷新页面、点浏览器返回键、分享链接时，筛选状态还得在：
- 点击标签后更新 URL hash：
location.hash = `#filter=${category}`，支持书签和分享 - 页面加载时读取
location.hash，提取 category 并自动激活对应标签、执行筛选 - 每次筛选前清除所有标签的
data-active，再给当前设data-active="true"，避免多个高亮 - 重置按钮不重建 DOM，只遍历 articles 移除
.hidden，保留原始结构和事件绑定 - 若文章异步加载（如分页），确保原始 article 节点始终可引用，不要依赖 innerHTML 字符串还原
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
