Homepage Layout

首页布局自检

> 适用：lihongwei-cn GitHub Pages 主页 index.html

检查并修复主页布局，确保每项标准都达标。

检查清单

逐项验证，不达标的立即修复：

• [ ] 无横向滚动条：body { overflow-x: hidden } 已设置
• [ ] 容器不溢出：.container 使用 max-width 而非 width，且 width: 100%
• [ ] 仪表盘自适应：.dashboard 使用 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
• [ ] 卡片不重叠：每个 .card 的 .card-body { min-width: 0 }，文本有 overflow: hidden; text-overflow: ellipsis; white-space: nowrap
• [ ] 分类区块等宽等高：同一行的 .cat-section 高度一致，不会因内容多少而参差
• [ ] 响应式断点合理：小屏（≤540px）下 grid-template-columns: 1fr
• [ ] 所有分类都有至少 1 个项目：空分类应从 HTML 中移除
• [ ] 所有卡片链接可达：href 指向存在的目录，且该目录包含 index.html

修复流程

1. 读 index.html，核对以上清单
2. CSS 问题直接改 index.html
3. 链接验证：检查每个 href 是否存在对应目录
4. 修改完成后 git add + git commit + git push

新增项目时的额外检查

当新增项目页面时，除了以上检查，还需：

1. 确认新项目归类到哪个 .cat-section
2. 若现有分类都不合适，新建分类区块
3. 在 stats.json 中添加新项目的初始计数
4. 各子页面添加 page counter（使用 counterapi.dev，命名空间 lihongwei-cn/）
5. 子页面 footer 添加 GitHub 链接和 counter 显示

关键 CSS 约束

这些值不可随意改动，否则会造成布局问题：

.container { max-width: 1100px; width: 100%; }
.dashboard { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
body { overflow-x: hidden; }
.card-body { min-width: 0; }
@media(max-width: 540px) { .dashboard { grid-template-columns: 1fr; } }

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: LiHongwei-cn
• Source: LiHongwei-cn/lihongwei-cn
• License: MIT
• Homepage: https://lihongwei-cn.github.io/lihongwei-cn/

Install and usage instructions live in the source repository linked above.