博客首页禁用container-fluid，应选container以保障阅读体验；主内容区用col-lg-8、侧边栏用col-lg-4，外层包裹row和container；图片需fallback处理；分页需手动重初始化高亮与懒加载；主题色与深色模式须手动适配关键样式。
别用 container-fluid 做博客首页——它会让文字线长失控，小屏撑满、大屏超百字符，阅读体验直接下降。
主内容区和侧边栏怎么分栏才不翻车
Bootstrap 的栅格本身不管内容语义，只管排列。博客需要主内容 + 侧边栏（分类/标签/最新文章），container 才是安全选择：它带固定最大宽度和居中，避免眼睛疲劳。
-
col-lg-8给主内容区，col-lg-4给侧边栏，外层必须包row和container - 别在
col里再嵌套container，内边距会叠加错乱 - 侧边栏要加背景色？直接给
col-lg-4加bg-light，别额外套div再设padding
card 里的图片挂了怎么办
card-img-top 不做 fallback，一旦图片 404 或路径错，整个 card 高度塌陷，下面的 card-body 上移，视觉节奏全乱。
- 最简方案：
- 更稳方案：用
background-image替代aspect-ratio: 16/9或padding-bottom技巧维持比例 - 服务端生成缩略图时，统一返回 200 状态码并内置默认占位图，比前端 JS 补救更可靠
分页点击后新内容不生效
Bootstrap 的 pagination 是纯静态结构，没状态管理。点“下一页”后，你得手动清空旧 DOM、插入新内容、再重新初始化依赖项。
- 别用
innerHTML = htmlString直接替换整个列表容器；改用documentFragment批量append，减少重排 - 每次加载后必须手动调用
hljs.highlightAll()（若用 highlight.js）、lozad().observe()（若用 lozad） - 分页链接的
href建议保留真实 URL（如/page/2/），便于 SEO 和后退刷新，JS 只负责拦截点击、取数据、更新 DOM
自定义主题色为什么改了 $primary 没用
Bootstrap 5 的 $primary 变量只影响按钮、链接、边框、焦点环等几十处样式。但博客常用的「文章标题悬停色」「代码块背景」「引用块边框」这些，都不在默认变量链里。
- 改完
$primary后，.blog-title:hover、pre、blockquote这些仍按原样渲染 - 必须单独写 CSS 覆盖，或扩展 SCSS 变量映射（如新增
$blog-title-hover并在对应组件中引用） - 深色模式需手动适配关键样式，Bootstrap 5 原生不接管
prefers-color-scheme下的pre背景、code颜色等
真正难的不是搭出结构，而是让每张图不塌、每页代码高亮、每个分页链接能后退、每个主题色在深色模式下依然可读——这些细节没人替你兜底。
