Skip to content
界面图谱Interface Atlas
☰
中文
PagesPage / Content

Documentation Page

文档页

Aliases:文档站帮助文档开发者文档使用手册说明文档API 文档帮助中心页面

What is it

A long-lived, reading-first content page: a collapsible docs tree on one side, the article column carrying heading hierarchy, paragraphs, code blocks and callouts, and on wide screens a page TOC marking the current position. Permanent links and prev/next links chain pages into a site; search is the primary entry; the structure is stable enough to memorize.

Interactive playground

Try it. Make an informed choice.

Loading lab…

✓ When to use

  • Product docs, API references, tutorials
  • Long-lived content needing stable structure and deep links
  • Readers follow along and need copyable code

✕ When not to use

  • Time-sensitive marketing — a landing page or blog fits better
  • Content needing collaborative editing — use an editor or wiki
  • Purely presentational visual pages

Variants

Three-column Docs

三栏文档

Tree + article + TOC, the desktop standard

Sidebar Docs

侧栏文档

Tree + article, friendly to mid-size screens

API Reference

API 参考

Description left, code right — entry-style layout

Single-page Manual

单页手册

All sections on one page, navigated by TOC

Page structure

  1. 01

    Doc tree

    Left nav grouped by version and section, collapsible and searchable.

  2. 02

    Article

    Clear heading hierarchy, short paragraphs, shareable anchors.

  3. 03

    Code blocks

    Syntax highlighting plus one-click copy, labelled with language and file name.

  4. 04

    On-page TOC

    A right-hand TOC for long pages, highlighting the active section.

  5. 05

    Prev/next

    Chained in reading order to reduce navigation cost.

Implementation

gridgrid-template-columns: 240px minmax(0, 1fr) 180pxposition: stickyoverflow-x: auto

Three columns via grid (240px / 1fr / 180px); hide the TOC on mid screens and turn the tree into a drawer on mobile. Cap article width around 70ch; code blocks scroll horizontally with a copy button; the TOC highlights the current section via IntersectionObserver; each page gets a stable slug permalink and prev/next links.

Related concepts

Sidebar侧边栏

A vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.

ComponentsContains
Breadcrumb面包屑

A 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.

ComponentsContains
Command Palette命令面板

A floating search panel summoned with ⌘K / Ctrl+K: type to filter commands, pages or content, navigate with arrow keys, execute with Enter. Popularized by macOS Spotlight; now standard in power-user products.

ComponentsContains
Tabs标签页

A row of switchable labels that divide one region into mutually exclusive views: the tab headers stay visible and clickable, and only the active tab's panel shows while the rest stay hidden. Packs several tightly related contents into one area to switch in place instead of full-page navigation. Arrow-key navigation between tabs makes it a classic accessibility showcase.

ComponentsContains
Alert警告提示

An inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.

ComponentsContains

Sources

Markdown for agents · JSON