zudo-doc
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

TOC Export

作成 2026年5月28日更新 2026年6月6日Takeshi Takatsudo

ページの目次を `export const toc` 名前付きエクスポートとして出力します。

tocExport 機能はドキュメントの見出しを走査し、処理した各ファイルの先頭に MDX の名前付きエクスポート(export const toc)を挿入します。これによりサイドバーやフローティング TOC コンポーネントに構造化された目次を提供します。

zfb 0.1.0-next.14 以降が必要

tocExport を有効化すると、zfb 0.1.0-next.13 ではビルドが壊れていました。挿入される export const toc = [...] 行がインデントされた列で出力されるため、MDX がそれを ESM エクスポートではなくコンテンツとして解析し、コーパス全体で約 153 件の esbuild Expected "}" エラーが発生していました(#1814)。zfb 0.1.0-next.14(アップストリーム Takazudo/zudo-front-builder#599 — エクスポートが列 0 へホイストされるよう修正)で解決され、zudo-doc の zfb.config.ts で有効化されています。このページを含むコーパス内のすべてのページが、実際の export const toc を持つようになりました。

設定

オブジェクト型の機能であるため、オプションオブジェクトを渡す必要があります(true のショートハンドは受け付けません)。デフォルト(maxDepth: 3)で有効化します。

zfb.config.ts
export default defineConfig({
  markdown: {
    features: {
      tocExport: {},
    },
  },
});

見出しの深さを制限する場合:

zfb.config.ts
tocExport: { maxDepth: 2 },

オプション

オプションデフォルト説明
maxDepth3見出しの最大深度(絶対値、2〜6)。2 = h2 のみ、3 = h2 + h3。

エクスポートされる構造

この機能は、エントリが次の型に従う export const toc を挿入します。

type TocEntry = {
  depth: number; // absolute heading depth: 2 | 3 | 4 | 5 | 6
  id: string; // slug assigned by the heading-links pass
  text: string; // plain-text heading content (hash-link stripped)
  children: TocEntry[]; // nested sub-headings within maxDepth
};

出力例

h2 と h3 の見出しを持つドキュメントの場合、挿入されるエクスポートは次のようになります。

export const toc = [
  {
    depth: 2,
    id: "introduction",
    text: "Introduction",
    children: [{ depth: 3, id: "introduction-background", text: "Background", children: [] }],
  },
  { depth: 2, id: "conclusion", text: "Conclusion", children: [] },
];

ネストした id: "introduction-background" は、このサイトの hierarchicalHeading Links 方式を反映しています(h3 の id に h2 の祖先がプレフィックスされます)。flat 方式では単に id: "background" になります。

補足

  • このエクスポートは見出しリンクパスの後に実行されるため、id スラッグは最終的で重複が解消されており、設定された 見出し ID 方式 に従います。

  • tocExportHeading Marker TOC とは独立して動作します — 一方を有効化しても他方に干渉しません。

  • zudo-doc の既存の TOC アイランドはこのエクスポートで駆動されていません。両者は別々の仕組みです。

Revision History

Takeshi Takatsudo作成: 2026-05-29T01:44:41+09:00更新: 2026-06-07T04:16:15+09:00

AI Assistant

Ask a question about the documentation.