博客应采用多页布局：首页列表+独立文章页+归档页+分类页，避免单页滚动模板；需语义化html、响应式断点适配内容密度、禁用干扰动画、完善打印样式。

博客页面该用单页还是多页布局

博客内容天然需要归档、分类、分页和SEO索引，强行塞进单页滚动模板（比如 Buje 或 Hero）会破坏语义结构，也导致文章无法被搜索引擎单独收录。真实博客应优先选「多页结构」：首页列表 + 独立文章页 + 归档页 + 分类页。

常见错误是把 Future Imperfect 这类单页博客模板直接当主力站用——它只适合极简个人日志，且所有文章都挤在同一个 HTML 文件里，一发更新就得重刷整页，加载慢、无独立 URL、不支持服务端渲染。

• 首页用 index.html 做文章摘要流（含标题、摘要、日期、分类标签）
• 每篇文章单独一个 post-xxx.html，带完整 <article></article> 语义标签
• 归档页用 archive.html 按年/月聚合链接，不是靠 JS 动态生成
• 避免把所有 CSS/JS 打包进一个大文件，否则某篇长文加载时会卡住整个导航

内容展示区域必须保留语义化 HTML 标签

很多免费模板（如 Strata、Landed）为视觉效果滥用 <div> 套娃，把正文包裹在七八层 <code>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></article> 必须包裹单篇内容，不能只用 <section></section> 替代
• 图片需带 alt 属性，且避免用背景图方式嵌入正文配图（background-image 不被爬虫抓取）
• 代码块用 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;，别用 &lt;code&gt;&lt;div class=&quot;code-block&quot;&gt; &lt;h3&gt;响应式断点要匹配内容密度，不是盲目套 Bootstrap&lt;/h3&gt; &lt;p&gt;像 &lt;code&gt;Boxify&lt;/code&gt; 或 &lt;code&gt;AppPonsive&lt;/code&gt; 这类基于 Bootstrap 的模板，默认在 &lt;code&gt;768px&lt;/code&gt; 切换栅格，但博客文字密度高，小屏下过宽的行宽（&gt;80ch）会导致阅读疲劳。实际应把主内容区最大宽度设为 &lt;code&gt;65ch&lt;/code&gt;，并在 &lt;code&gt;480px&lt;/code&gt; 就启用窄列模式。&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow artxards&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; rel=&quot;nofollow&quot; href=&quot;/xiazai/skill7761&quot; title=&quot;Article To Html&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg&quot; alt=&quot;Article To Html&quot; onerror=&quot;this.onerror='';this.src='/static/lhimages/moren/morentu.png'&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill7761&quot; title=&quot;Article To Html&quot; class=&quot;overflowclass&quot;&gt;Article To Html&lt;/a&gt; &lt;p class=&quot;overflowclass&quot;&gt;文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。&lt;/p&gt; &lt;/div&gt; &lt;a rel=&quot;nofollow&quot; href=&quot;/xiazai/skill7761&quot; title=&quot;Article To Html&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;p&gt;关键不是“有没有响应式”，而是断点是否服务于内容可读性：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;桌面端：主内容区 &lt;code&gt;max-width: 720px&lt;/code&gt;，左右留白明显&lt;/li&gt; &lt;li&gt;平板端（&lt;code&gt;768px&lt;/code&gt;）：去掉侧边栏，正文占满宽度，字号微调&lt;/li&gt; &lt;li&gt;手机端（&lt;code&gt;480px&lt;/code&gt;）：行高拉到 &lt;code&gt;1.6&lt;/code&gt;，段间距加大，禁用浮动相关样式&lt;/li&gt; &lt;li&gt;慎用 &lt;code&gt;vw&lt;/code&gt; 单位做字体大小——iOS Safari 对它解析不稳定，容易导致文字突然缩放&lt;/li&gt; &lt;/ul&gt; &lt;h3&gt;CSS 动画仅用于装饰性交互，别动内容流&lt;/h3&gt; &lt;p&gt;像 &lt;code&gt;zMarketing&lt;/code&gt; 的卡片悬停放大、&lt;code&gt;Hyperspace&lt;/code&gt; 的淡入动画，用在博客上容易分散注意力。内容页的核心动效只该出现在两个地方：目录锚点平滑滚动、代码块复制按钮反馈。&lt;/p&gt; &lt;p&gt;其他所有动画都属于干扰项：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;禁止对 &lt;code&gt;&lt;p&gt;&lt;/p&gt;&lt;/code&gt;、&lt;code&gt;&lt;h2&gt;&lt;/h2&gt;&lt;/code&gt; 等内容标签加 &lt;code&gt;animation&lt;/code&gt; 或 &lt;code&gt;transition&lt;/code&gt; &lt;/li&gt; &lt;li&gt;菜单下拉可用 &lt;code&gt;transform: scaleY()&lt;/code&gt;，但别用 &lt;code&gt;opacity&lt;/code&gt; 渐变——影响可访问性&lt;/li&gt; &lt;li&gt;如果用了 &lt;code&gt;ScrollTrigger&lt;/code&gt; 或 &lt;code&gt;Waypoints&lt;/code&gt; 实现视差，确保关闭 JS 后内容仍能正常阅读（即降级为静态布局）&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;最易被忽略的是打印样式表——90% 的博客模板没写 &lt;code&gt;@media print&lt;/code&gt;，导致用户 Ctrl+P 时出现乱码、背景图遮挡文字、侧边栏堆叠在正文上。哪怕只加一行 &lt;code&gt;body { background: #fff; color: #000; }&lt;/code&gt; 都比默认强得多。&lt;/p&gt; &lt;/div&gt;&lt;/code&gt;</pre>