博客列表页
Blog Index
别名:博客列表页文章列表博客首页资讯列表页文章列表页博客目录blog 首页
这是什么
按时间或主题聚合文章的内容索引页：顶部先给一条编辑推荐的头条，再用卡片流或列表铺开全部文章，每项含题图、标题、摘要、分类与日期；分类导航与搜索负责收窄范围，分页或无限滚动负责继续加载。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 站点有持续更新的文章或资讯
- 用户需要按主题、标签或时间浏览
- 希望突出少数重点文章
✕ 不适用场景
- 只有零星几条静态内容
- 内容需要强检索而非浏览（用搜索结果页更合适）
- 单篇文章本身就是完整产品页
常见形式
卡片网格
Card Grid
图文卡片等高排列，题图统一比例，适合视觉型内容
紧凑列表
Compact List
只留标题、摘要与日期，一屏信息量最大
头条英雄区
Featured Hero
顶部大图推荐一篇，下方退回常规列表
页面结构
- 01
顶栏
站点导航、搜索入口与订阅按钮，保持全站一致。
- 02
头条推荐
一条大图或加大标题的置顶文章，占首屏最强视觉权重。
- 03
分类导航
横向标签或分类链接，切换后列表即时过滤。
- 04
文章列表
卡片或列表项重复排列，每项包含题图、标题、摘要与元信息。
- 05
分页
页码或「加载更多」，也可换用无限滚动。
- 06
订阅区
页尾邮箱收集，把一次性访客转成回访读者。
实现要点
flexgridgrid-template-columns: repeat(auto-fill, minmax(240px, 1fr))gapaspect-ratio: 16 / 9列表容器用 grid 自适应列数，卡片内部用 flex 纵向排布题图与文本；题图统一 aspect-ratio 防止高度跳动。头条在 DOM 中排在列表之前，保证键盘与读屏顺序正确；分页保留真实链接，加载更多用按钮并给 aria-live 反馈。
相关概念
用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件包含组件用带页码的控件把长结果集切分为离散页面：用户显式点击页码或上一页 / 下一页 按钮取回对应片段，当前位置永远可知、可分享、可回退。与无限滚动的"失控 漂移"相对，它是数据浏览中最可控的方式，也是搜索结果与后台表格的默认选择。
组件包含组件用"滚动到底自动追加下一页"取代传统分页：用户持续下滑，新内容不断出现， 底部以加载指示或哨兵元素衔接。它解决的是浏览节奏被打断的问题—— 用户不必寻找"下一页"按钮，注意力始终停留在内容流上，长列表被拆成一次次无感的追加。
交互模式使用模式用即时过滤把大列表缩到与当前输入相关的一小部分：用户在搜索框敲字，列表随之实时收窄， 并显示命中数量与空结果提示。它把"查找"变成"修剪"，不用提交、不用等跳转，反馈就在眼前。
交互模式使用模式围绕单篇文章组织的阅读页：文章头给出标题、作者、发布时间与预计阅读时长，正文保持一行 45～75 字符的舒适行宽，侧栏或文首提供可跳转的目录，文末用作者卡与相关文章把读者留在站内。
页面相似概念