Blog Post
博客文章页
Aliases:博客文章页文章详情页单篇文章页正文页博客正文文章内容页读文章的页面
What is it
A 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.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Presenting one standalone article with a title and author
- The body is long and needs a table of contents or progress cue
- You want to guide readers on to related posts or subscribe
✕ When not to use
- The content is a short note or card summary
- Multiple items must be compared — a list page fits better
- The post is mainly an interactive tool, not prose
Variants
Standard
标准文章
Single-column body with header metadata, the general default
Long-form with TOC
长文带目录
A persistent sidebar TOC that highlights the current section
Tutorial
教程步骤
Numbered steps with code blocks and callouts
Page structure
- 01
Header
Site nav and search, kept reachable so readers can leave or look things up.
- 02
Article head
Title, author, date, reading time and topic tags decide whether reading continues.
- 03
Table of contents
Essential for long posts; lists sections with anchor jumps and collapses on narrow screens.
- 04
Body
Keeps a 45–75 character measure and comfortable leading; code, quotes and images get their own styles.
- 05
Author card
Avatar, bio and social links give the piece a source and trust.
- 06
Related posts
Three to five recommendations at the end extend the session instead of ending it.
Implementation
max-width: 65chline-height: 1.7position: stickyscroll-margin-top: 5remtext-wrap: prettyCap the body at a 45–75ch measure with generous line-height; keep the TOC sticky in a side column and reserve the sticky header height with scroll-margin-top on anchors. Pace headings, code and quotes with spacing variables; a reading-progress bar can use scroll-driven animation and must respect prefers-reduced-motion.
Related concepts
A small round or rounded-square image representing a user or organisation: photo, initials or an icon placeholder. Appears with names in navs, comments and member lists; can carry a status dot or stack several people together.
ComponentsContainsA hierarchical path like "Home / Library / Page" that states where the user sits in the information architecture: every ancestor is a link back, and the last item marks the current page. The cheapest way to keep users oriented — the name comes from the breadcrumbs Hansel dropped to find his way home. Usually placed above the page title.
ComponentsContainsLayer the information: show only the most common and necessary parts first, hiding secondary details behind "expand", "next step" or "show more" until the user asks for them. It solves the problem of overwhelming users at once — the initial cognitive load stays low and the surface easy to learn, while depth remains available on demand for advanced users.
PatternsUses patternElements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.
MotionUsed withAn index of posts by date or topic: a featured story leads, then cards show thumbnail, title, excerpt and date, with category nav and pagination.
PagesSimilar