list

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: List Layout

组件：List Layout

Guides list layout design for linear, stacked content display. Lists are compact, text-heavy; users scan by title or metadata. Used for blog indexes, documentation, search results, and dense content.

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

指导线性堆叠内容展示的列表布局设计。列表结构紧凑、以文本为主；用户通过标题或元数据快速扫描。适用于博客索引、文档、搜索结果和高密度内容场景。

调用时：首次使用时如果适用，可以先用1-2句话介绍本技能涵盖的内容及重要性，再提供核心输出。如果是后续调用或用户要求跳过介绍，可直接给出核心输出。

When to Use List

列表适用场景

Use list when	Use grid when
Text-heavy; scan by title	Visual content; equal emphasis
Many items; compact display	Fewer items; browsing
Blog index, docs, search results	Products, templates, gallery
F-pattern reading (top-left, left column)	Discovery, exploration

See grid for grid layout; card for card structure.

适用列表的场景	适用网格的场景
文本为主，用户通过标题扫描	视觉内容，各内容权重均等
条目数量多，需要紧凑展示	条目数量少，适合浏览
博客索引、文档、搜索结果	产品、模板、图库
F型阅读模式（左上优先，沿左侧列扫描）	内容发现、探索场景

参考 grid 了解网格布局；参考 card 了解卡片结构。

List Structure

列表结构

Element	Purpose
Items	Single column; stacked vertically
Per item	Title, optional metadata (date, author), excerpt, link
Spacing	Consistent gaps; dividers or alternating background
Density	Compact (docs) vs relaxed (blog)

元素	作用
条目	单列垂直堆叠排列
单条目构成	标题、可选元数据（日期、作者）、摘要、链接
间距	间距统一；可使用分割线或交替背景区分条目
密度	紧凑型（文档场景）/宽松型（博客场景）

List Variants

列表变体

Variant	Use
Simple list	Title + link; minimal (nav, TOC)
Rich list	Title, excerpt, date, author
Table-like	Columns for metadata (date, status)
With thumbnail	Small image + text

变体类型	使用场景
简单列表	仅标题+链接，极简结构（导航、目录）
富内容列表	标题、摘要、日期、作者
类表格列表	元数据分列展示（日期、状态）
带缩略图列表	小图+文本

Best Practices

最佳实践

Principle	Practice
Scannable	Clear titles; consistent hierarchy
Compact	Less vertical space than grid
Link area	Full row or title clickable
Metadata	Date, author, category; secondary styling

原则	实践方案
易扫描	标题清晰，层级一致
紧凑性	比网格布局占用更少垂直空间
点击区域	整行可点击或仅标题可点击
元数据	日期、作者、分类使用次级样式展示

F-Pattern

F型阅读模式

Users read top-left first, then scan left column. Place primary content (titles) left-aligned; metadata secondary.

用户会首先阅读左上角内容，然后沿左侧列向下扫描。请将核心内容（标题）左对齐，元数据设为次级展示内容。

Infinite Scroll

无限滚动

If using infinite scroll for list (e.g., blog index, search results): crawlers cannot access content loaded on scroll. Provide paginated component pages or use traditional pagination for SEO-critical content. See site-crawlability for search-friendly infinite scroll implementation.

如果为列表（如博客索引、搜索结果）使用无限滚动：爬虫无法访问滚动后加载的内容。对于对SEO要求高的内容，请提供分页组件页面或使用传统分页方案。参考 site-crawlability 了解对搜索引擎友好的无限滚动实现方案。