博客首页应使用container而非container-fluid以保障阅读体验，主内容区与侧边栏用col-lg-8和col-lg-4布局；card图片需fallback处理；pagination需手动重初始化高亮与懒加载；主题色需扩展自定义规则；深色模式需手动适配关键样式。
用 Bootstrap 4/5 做博客首页，别碰 container-fluid 默认全宽
Bootstrap 的响应式栅格本身不负责内容结构，只管排列。博客首页需要主内容区 + 侧边栏（分类、标签、最新文章），container 才是安全选择——它带固定最大宽度和居中，避免文字线长过长影响阅读。用 container-fluid 后，小屏上内容被拉满，大屏上每行超百字符，眼睛累，用户划走快。
实操建议：
- 主内容区用
<div class="col-lg-8">，侧边栏用<div class="col-lg-4">，外层包<div class="row">和<div class="container"> - 别在
col内再嵌套container，会导致内边距错乱 - 如果要用背景色区分侧边栏，直接给
col-lg-4加bg-light，别额外套div再设 padding
card 组件渲染文章列表时，图片加载失败会塌陷
博客列表常用 card 展示标题、摘要、封面图。但 card-img-top 没做 fallback 处理，一旦图片 404 或路径错，整个 card 高度骤降，下面的 card-body 上移，视觉节奏全乱。
实操建议：
- 给
<img>加onerror="this.style.display='none'"，隐藏坏图但保留占位空间 - 更稳的做法：用
background-image替代<img>，配合aspect-ratio: 16/9（需 CSS 支持）或 padding-bottom 技巧维持比例 - 服务端生成缩略图时，统一返回 200 状态码并内置默认占位图，比前端 JS 补救更可靠
分页组件 pagination 在动态加载时无法复用
Bootstrap 的 pagination 是纯静态 HTML 结构，没有绑定事件或状态管理。点击“下一页”后，你得自己清空旧文章、插入新 DOM、再重新初始化任何依赖（比如懒加载图片、代码高亮），否则新内容里的 pre 不高亮、img 不懒加载。
实操建议：
- 不要用
innerHTML = htmlString直接替换整个列表容器；改用documentFragment批量 append，减少重排 - 每次加载后手动调用
hljs.highlightAll()（若用 highlight.js）、lozad().observe()（若用 lozad） - 分页链接的
href建议保留真实 URL（如/page/2/），便于 SEO 和后退刷新，JS 只负责拦截点击、取数据、更新 DOM
自定义主题色时，别只改 $primary 变量就以为完事了
Bootstrap 5 的 SCSS 主题变量（如 $primary）会影响按钮、链接、边框、焦点环等几十处样式。但博客常用的「文章标题悬停色」「代码块背景」「引用块边框」这些，都不在默认变量链里，改了 $primary 后它们还是蓝灰原色。
实操建议：
- 用
@include theme-colors()生成所有主题类（text-primary、bg-primary等），但额外颜色要自己写规则，比如.post-title:hover { color: $accent-color; } - 深色模式适配不能只靠
prefers-color-scheme，Bootstrap 5.3+ 才原生支持data-bs-theme="dark"，老版本得手动加 class 并覆盖关键属性 - 字体层级别动
$font-size-base就完事——标题行高、段落间距、引用块缩进都得同步调，否则文字挤在一起或空得离谱
真正麻烦的从来不是搭出一个能看的页面，而是让每篇文章的代码块语法高亮对齐、每张图在 Retina 屏不模糊、每个分页请求回来后焦点自动落到首篇文章上——这些细节没标准组件兜底，得一行行补。
