Blog Index
博客列表页
Aliases:博客列表页文章列表博客首页资讯列表页文章列表页博客目录blog 首页
What is it
An index of posts by date or topic: a featured story leads, then cards show thumbnail, title, excerpt and date, with category nav and pagination.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- The site publishes a steady stream of articles
- Users browse by topic, tag or time
- You want to spotlight a few key posts
✕ When not to use
- There are only a handful of static items
- Content needs heavy retrieval, not browsing — a search page fits better
- A single article already is the whole product page
Variants
Card Grid
卡片网格
Equal-height visual cards with a unified thumbnail ratio
Compact List
紧凑列表
Title, excerpt and date only — maximum information per screen
Featured Hero
头条英雄区
A large visual promotes one post, with a normal list below
Page structure
- 01
Header
Site nav, search entry and subscribe button, consistent sitewide.
- 02
Featured post
One pinned post with a large image or headline, the strongest first-screen weight.
- 03
Category nav
Horizontal tags or category links that filter the list on switch.
- 04
Post list
Repeated cards or rows, each with thumbnail, title, excerpt and metadata.
- 05
Pagination
Page numbers or a load-more button, replaceable by infinite scroll.
- 06
Newsletter
An email capture before the footer, turning one-off visits into returns.
Implementation
flexgridgrid-template-columns: repeat(auto-fill, minmax(240px, 1fr))gapaspect-ratio: 16 / 9Lay the list out with an auto-fill grid and stack thumbnail and text inside each card with flex; lock thumbnails to one aspect-ratio so heights do not jump. Keep the featured post before the list in the DOM for correct keyboard and screen-reader order; keep pagination as real links and announce load-more via aria-live.
Related concepts
A self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsContainsA page-numbered control that slices long result sets into discrete pages: users explicitly click a page number or prev / next to fetch that slice, so the current position is always known, shareable and reversible. The controlled counterpart to infinite scrolling's endless drift — the default for search results and admin tables.
ComponentsContainsReplaces pagination with automatic loading: as the user scrolls to the bottom, the next page of content appends seamlessly, bridged by a loading indicator or sentinel element. It solves the broken browsing rhythm of hunting for a "next page" button — attention stays on the feed while long lists arrive in imperceptible chunks.
PatternsUses patternNarrows a large list to whatever matches the current input: every keystroke filters the list in place, with hit counts and an empty-state hint. Finding becomes pruning — no submit, no page jump, feedback stays right in front of the user.
PatternsUses patternA page for one article: header with title, author and date, a body at a comfortable measure, a table of contents, and an author card with related posts below.
PagesSimilar