toc-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: Table of Contents (TOC)

组件：目录（TOC）

Guides TOC implementation for long-form articles, guides, and whitepapers. TOCs improve UX and SEO by enabling quick navigation and reducing bounce rates.

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.

指导长文、教程和白皮书的TOC实现方案。TOC可实现快速导航、降低跳出率，从而提升UX和SEO效果。

调用规则：首次使用时，如果对用户有帮助，可以先用1-2句话介绍本技能的覆盖范围和价值，再提供核心输出。后续调用或用户要求跳过说明时，直接输出核心内容即可。

Initial Assessment

初步评估

Check for product marketing context first: If

.claude/product-marketing-context.md

.cursor/product-marketing-context.md

exists, read it for content structure.

Identify:

Content type: Blog article, guide, whitepaper, documentation
Length: TOC most valuable for 1000+ word content
Platform: Web, mobile, both

首先检查产品营销上下文：如果存在

.claude/product-marketing-context.md

或

.cursor/product-marketing-context.md

文件，请读取其中的内容结构信息。

确认以下信息：

内容类型：博客文章、教程、白皮书、文档
长度：1000字以上的内容使用TOC收益最高
适配平台：Web、移动端、两端适配

Placement Strategies

放置策略

Placement	Best For	Pros	Cons
After intro	Most articles	Natural flow; visible early	Can scroll out of view
Floating sidebar	Very long content	Always visible	More complex; mobile challenges
Collapsible	Long articles	Less intrusive	May be overlooked
Top of article	Mobile-first	Accessible on all devices	Takes space

放置位置	适用场景	优点	缺点
引言之后	大多数文章	符合阅读流，用户很早就可以看到	滚动页面后会移出视野
悬浮侧边栏	超长内容	始终可见	实现更复杂，移动端适配难度高
可折叠样式	长文章	侵入性更低	可能会被用户忽略
文章顶部	移动端优先的内容	所有设备都可访问	占用页面空间

Technical Implementation

技术实现

Heading Structure

标题结构

One
```
<h1>
```
per page
```
<h2>
```
for major sections
```
<h3>
```
for subsections; avoid skipping levels
Headings >=15 characters for SEO

每个页面仅1个
```
<h1>
```
```
<h2>
```
用于划分主要章节
```
<h3>
```
用于子章节，避免跳级使用标题
标题长度≥15个字符以利于SEO

Jump Links

跳转链接

Assign unique IDs to headings (e.g.,
```
id="keyword-optimization"
```
)
Use kebab-case for IDs
Link TOC entries via anchor tags (
```
#section-id
```
)
Descriptive anchor text; include target keywords naturally

给标题分配唯一ID（例如
```
id="keyword-optimization"
```
）
ID使用kebab-case命名
通过锚点标签（
```
#section-id
```
）关联TOC条目
锚点文本描述清晰，自然融入目标关键词

Semantic HTML

语义化HTML

html

<nav aria-label="Table of contents">
  <ol>
    <li><a href="#section-1">Section Title</a></li>
  </ol>
</nav>

html

<nav aria-label="Table of contents">
  <ol>
    <li><a href="#section-1">Section Title</a></li>
  </ol>
</nav>

SEO Best Practices

SEO最佳实践

Practice	Purpose
Schema.org TableOfContents	Help search engines understand structure
Keywords in headings	Natural integration; avoid stuffing
Jump links in SERP	Google may feature TOC links; increases CTR; see serp-features

实践方案	作用
使用Schema.org TableOfContents规范	帮助搜索引擎理解内容结构
标题中包含关键词	自然融入，避免关键词堆砌
SERP中展示跳转链接	Google可能会展示TOC链接，提升点击率，参考serp-features

UX Guidelines

UX指南

Visibility & Interaction

可见性与交互

Clear visual hierarchy; indent nested items
Highlight current section when scrolling (optional)
Smooth scroll behavior for jump links

清晰的视觉层级，嵌套条目缩进显示
滚动页面时高亮当前章节（可选）
跳转链接使用平滑滚动效果

Mobile

移动端适配

Minimum 16px font size
Touch targets >=44x44px
Responsive layout; consider collapsible on small screens

字号不小于16px
点击热区≥44x44px
响应式布局，小屏幕下建议使用可折叠样式

Accessibility

可访问性

Requirement	Practice
ARIA	`aria-label="Table of contents"` on nav
Keyboard	All links keyboard-accessible
Screen readers	Proper heading structure; TOC aids skimming

要求	实践方案
ARIA	nav元素上添加 `aria-label="Table of contents"`
键盘操作	所有链接支持键盘访问
屏幕阅读器适配	正确的标题结构，TOC便于快速浏览内容