博客应采用多页布局：首页列表+独立文章页+归档页+分类页，避免单页滚动模板；需语义化HTML、响应式断点适配内容密度、禁用干扰动画、完善打印样式。
博客页面该用单页还是多页布局
博客内容天然需要归档、分类、分页和SEO索引，强行塞进单页滚动模板（比如 Buje 或 Hero）会破坏语义结构，也导致文章无法被搜索引擎单独收录。真实博客应优先选「多页结构」：首页列表 + 独立文章页 + 归档页 + 分类页。
常见错误是把 Future Imperfect 这类单页博客模板直接当主力站用——它只适合极简个人日志，且所有文章都挤在同一个 HTML 文件里，一发更新就得重刷整页，加载慢、无独立 URL、不支持服务端渲染。
- 首页用
index.html做文章摘要流（含标题、摘要、日期、分类标签） - 每篇文章单独一个
post-xxx.html，带完整<article>语义标签 - 归档页用
archive.html按年/月聚合链接，不是靠 JS 动态生成 - 避免把所有 CSS/JS 打包进一个大文件，否则某篇长文加载时会卡住整个导航
内容展示区域必须保留语义化 HTML 标签
很多免费模板（如 Strata、Landed）为视觉效果滥用 <div> 套娃，把正文包裹在七八层 div.container > div.row > div.col 里。这会让屏幕阅读器失效，也阻碍 CSS 选择器精准控制排版。
真正利于内容展示的结构应直接暴露语义层级：
立即学习“前端免费学习笔记（深入）”；
<main role="main">
<article>
<header><h1>标题</h1></header>
<section><p>段落</p></section>
<footer><time datetime="2026-05-08">2026年5月8日</time></footer>
</article>
</main>
-
<article>必须包裹单篇内容，不能只用<section>替代 - 图片需带
alt属性，且避免用背景图方式嵌入正文配图（background-image不被爬虫抓取） - 代码块用
<pre><code>，别用<div class="code-block">
响应式断点要匹配内容密度，不是盲目套 Bootstrap
像 Boxify 或 AppPonsive 这类基于 Bootstrap 的模板，默认在 768px 切换栅格，但博客文字密度高，小屏下过宽的行宽（>80ch）会导致阅读疲劳。实际应把主内容区最大宽度设为 65ch，并在 480px 就启用窄列模式。
关键不是“有没有响应式”，而是断点是否服务于内容可读性：
- 桌面端：主内容区
max-width: 720px，左右留白明显 - 平板端（
768px）：去掉侧边栏，正文占满宽度，字号微调 - 手机端（
480px）：行高拉到1.6，段间距加大，禁用浮动相关样式 - 慎用
vw单位做字体大小——iOS Safari 对它解析不稳定，容易导致文字突然缩放
CSS 动画仅用于装饰性交互，别动内容流
像 zMarketing 的卡片悬停放大、Hyperspace 的淡入动画，用在博客上容易分散注意力。内容页的核心动效只该出现在两个地方：目录锚点平滑滚动、代码块复制按钮反馈。
其他所有动画都属于干扰项：
- 禁止对
<p>、<h2>等内容标签加animation或transition - 菜单下拉可用
transform: scaleY()，但别用opacity渐变——影响可访问性 - 如果用了
ScrollTrigger或Waypoints实现视差，确保关闭 JS 后内容仍能正常阅读（即降级为静态布局）
最易被忽略的是打印样式表——90% 的博客模板没写 @media print，导致用户 Ctrl+P 时出现乱码、背景图遮挡文字、侧边栏堆叠在正文上。哪怕只加一行 body { background: #fff; color: #000; } 都比默认强得多。
