TOC Export
ページの目次を `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)で有効化します。
export default defineConfig({
markdown: {
features: {
tocExport: {},
},
},
});見出しの深さを制限する場合:
tocExport: { maxDepth: 2 },オプション
| オプション | デフォルト | 説明 |
|---|---|---|
maxDepth | 3 | 見出しの最大深度(絶対値、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" は、このサイトの hierarchical な Heading Links 方式を反映しています(h3 の id に h2 の祖先がプレフィックスされます)。flat 方式では単に id: "background" になります。
補足
このエクスポートは見出しリンクパスの後に実行されるため、
idスラッグは最終的で重複が解消されており、設定された 見出し ID 方式 に従います。tocExportは Heading Marker TOC とは独立して動作します — 一方を有効化しても他方に干渉しません。zudo-doc の既存の TOC アイランドはこのエクスポートで駆動されていません。両者は別々の仕組みです。