AgentSkillsCN

docusaurus-doc-title-with-top-layout

在 Docusaurus 站点的着陆页中添加双栏布局与 DocsSitemap。左侧栏固定侧边栏，包含标题、标语、Logo 以及快捷链接；右侧栏则展示可展开/折叠的文档站点地图。当用户提出“带有顶部布局的文档标题”、“Docusaurus 着陆页”、“双栏文档布局”，或希望打造一个包含文档站点地图的完整着陆页时，可使用此技能。

SKILL.md
--- frontmatter
name: docusaurus-doc-title-with-top-layout
description: >-
  Add a two-column landing page layout with DocsSitemap to a Docusaurus site. Left column has sticky
  sidebar with title, tagline, logo, and quick links. Right column shows expand/collapse docs
  sitemap. Use when the user says 'doc title with top layout', 'docusaurus landing page', 'two
  column docs layout', or wants a full landing page with docs sitemap.
user-invocable: true

Docusaurus DocsSitemap with Two-Column Landing Page

Add a two-column landing page layout: left sticky sidebar (title, tagline, logo, links) + right column with expand/collapse DocsSitemap.

Prerequisites

  • •gray-matter and clsx npm dependencies
  • •Docusaurus site with sidebars.ts (or .js)

Step 1: Detect Docusaurus Root

Find the directory containing docusaurus.config.ts (or docusaurus.config.js). This is the Docusaurus root directory, referred to as {DOCUSAURUS_ROOT} in the steps below. All file paths in this skill are relative to this root.

Step 2: Create doc-titles generation script

Same as /docusaurus-doc-title skill. Create {DOCUSAURUS_ROOT}/scripts/generate-doc-titles.js that scans all markdown files and outputs src/data/doc-titles.json.

Step 3: Create the DocsSitemap component

Create {DOCUSAURUS_ROOT}/src/components/DocsSitemap/index.tsx that reads sidebars.ts and doc-titles.json, rendering each sidebar as a collapsible <details>/<summary> section.

Key features:

  • •generateLabel() converts sidebar IDs to display names (e.g., inboxSidebar -> INBOX)
  • •Handles autogenerated sidebars by resolving docs from doc-titles.json by dirName/ prefix
  • •Animated chevron rotates on open
  • •Each section is open by default

Step 4: Copy the logo SVG

Copy the bundled logo from this skill's assets to the target project:

code
{SKILL_DIR}/assets/logo.svg → {DOCUSAURUS_ROOT}/static/img/logo.svg

If static/img/logo.svg already exists in the target project, keep the existing one (it may be project-specific). Only copy if no logo exists.

Step 5: Create the two-column landing page

Read assets/index.tsx from this skill directory and copy it to:

code
{DOCUSAURUS_ROOT}/src/pages/index.tsx

Read assets/index.module.css from this skill directory and copy it to:

code
{DOCUSAURUS_ROOT}/src/pages/index.module.css

If an existing src/pages/index.js redirect file exists, remove it (it conflicts with index.tsx).

After copying, customize the links section in index.tsx for the project (title, URLs).

Step 6: Update config

In docusaurus.config.ts (or .js):

  • •Ensure routeBasePath is /docs (not /)
  • •Update search plugin's docsRouteBasePath to /docs if applicable

Delete docs/intro.md if it has slug: /.

Step 7: Wire up scripts and gitignore

In package.json:

json
"start": "pnpm run generate && docusaurus start",
"build": "pnpm run generate && docusaurus build",
"generate": "pnpm run generate:doc-titles",
"generate:doc-titles": "node scripts/generate-doc-titles.js"

Add to .gitignore:

code
src/data/doc-titles.json

Install gray-matter if not already present.

Step 7: Verify

Run pnpm run generate then pnpm run build. Verify:

  • •Landing page shows two-column layout with logo on the left
  • •Logo appears inside an orange rounded-corner container, white-inverted
  • •Right column shows expandable sidebar sections with all doc links
  • •Responsive: single column on mobile (< 996px)
  • •Left column is sticky on scroll

Assets

  • •assets/logo.svg - Default logo SVG. Target: {DOCUSAURUS_ROOT}/static/img/logo.svg
  • •assets/index.tsx - Landing page component with two-column layout. Target: {DOCUSAURUS_ROOT}/src/pages/index.tsx
  • •assets/index.module.css - Landing page CSS module. Target: {DOCUSAURUS_ROOT}/src/pages/index.module.css