ページスラッグとページツリー

概要アンカーリンクをコピー

Fumadocs は loader() を使用して、コンテンツディレクトリからページスラッグとページツリー(サイドバーの項目)を生成します。 ルーティングは、お使いの React フレームワークが処理します。

ファイルシステムベースのルーティングと同じ要領で、フォルダーとページを定義できます。

出力をさらにカスタマイズしたい場合は、ローダープラグインを使用できます。

ファイルアンカーリンクをコピー

MDX & Markdown ファイルでは、フロントマターでページ情報をカスタマイズできます。

---
title: My Page
description: Best document ever
icon: House
---

## Learn More

Fumadocs は、以下のプロパティをもとにページツリーを構築します。

スラッグアンカーリンクをコピー

ページのスラッグは、そのファイルパスから生成されます。

フォルダーアンカーリンクをコピー

複数のページをまとめて整理できます。Metaファイルを作成すると、フォルダーをカスタマイズできます。

フォルダーグループアンカーリンクをコピー

デフォルトでは、ファイルをフォルダーに入れるとその slugs が変わります。 フォルダー名を括弧で囲むと、子ファイルの slugs に影響を与えないようにできます。

ルートフォルダーアンカーリンクをコピー

フォルダーをルートフォルダーとして指定します。その場合、開いているルートフォルダー内のアイテムのみが表示されます。

{
  "title": "Name of Folder",
  "description": "The description of root folder (optional)",
  "root": true
}

たとえば、ルートフォルダー framework を開いている場合、他のフォルダー(例: headless)はサイドバーやその他のナビゲーション要素に表示されません。

ルートタイプアンカーリンクをコピー

root には文字列も指定でき、これはルートフォルダーのタイプを表します。 同じ親スコープ内にある同じタイプのルートフォルダーは、同じドキュメントの異なるバージョンのように、互いに切り替え可能なものとして扱われます。

{
  "title": "1.0.0",
  "root": "version"
}

root: true は単なるデフォルトのタイプで、タブとして表示されます。

同じタイプの別のルートフォルダーに切り替えると、ページはその構造的射影、つまりルートフォルダーからの相対パスが同じページに対応付けられます。

Metaアンカーリンクをコピー

フォルダー内に meta.json ファイルを作成すると、そのフォルダーをカスタマイズできます。

{
  "title": "Display Name",
  "icon": "MyIcon",
  "pages": ["index", "getting-started"],
  "defaultOpen": true
}

コンテンツソースが対応している場合は、メタファイルをコード(meta.ts または meta.js)で記述し、データをデフォルトエクスポートとして公開できます。

Pagesアンカーリンクをコピー

フォルダー内のアイテムはデフォルトでアルファベット順に並びます。pages を使用すると、アイテムを追加したり、並び順を指定したりできます。

{
  "pages": ["index", "getting-started"]
}

{
  "pages": [
    "components",
    "---My Separator---",
    "...folder",
    "...",
    "!file",
    "!otherFolder",
    "[Vercel](https://vercel.com)",
    "[Triangle][Vercel](https://vercel.com)"
  ]
}

フォルダーのインデックスアンカーリンクをコピー

フォルダーがインデックス項目を持つ場合、そのフォルダーはクリック可能になり、クリックするとインデックス項目に移動します。

デフォルトでは、各フォルダー内の index ファイルがインデックス項目になります。フォルダーのインデックス項目は任意に指定することもでき、パスまたはリンクを指定できます。

{
  // フォルダー内に "overview.mdx" ファイルがあると仮定します
  "pagesIndex": "overview"
}

アイコンアンカーリンクをコピー

Fumadocs にはアイコンライブラリが含まれていないため、ランタイムでアイコン名を JSX 要素に変換し、コンポーネントとしてレンダリングする必要があります。

そのためには、loader() に icon ハンドラーを追加します。

i18n ルーティングアンカーリンクをコピー

i18n ルーティングのスタイルは、用途に応じて定義できます。

import type { I18nConfig } from 'fumadocs-core/i18n';

export const i18n: I18nConfig = {
  // デフォルト
  parser: 'dot',
  // または
  parser: 'dir',
};

パスパラメーターアンカーリンクをコピー

[name] という名前のフォルダーは、パラメーターの値ごとに生成されます。値は、そのフォルダーのメタファイルの staticParams に列挙してください。

{
  "title": "Framework",
  "staticParams": [{ "framework": "waku" }, { "framework": "astro" }]
}

meta ファイルは、生成されるすべてのフォルダーに適用されます。各ページは params を props として受け取るほか、loader() から page.params としても取得できます。

meta.ts では、代わりに params を受け取る関数をエクスポートすることもできます。その場合は、staticParams を名前付きエクスポートとして併せてエクスポートします。

const names = { waku: 'Waku', astro: 'Astro' };

export const staticParams = [{ framework: 'waku' }, { framework: 'astro' }];

export default ({ framework }: { framework: keyof typeof names }) => ({
  title: names[framework],
});

ページのパラメーターアンカーリンクをコピー

ページのフロントマターにも staticParams を指定できます。親フォルダーでも指定されている場合、そのページは両方に共通する値に対してのみ生成されます。

---
title: Fumadocs MDX
staticParams:
  - framework: waku
---

静的パスアンカーリンクをコピー

固定のパスに置かれたファイルは、動的に生成されるファイルよりも優先されます。たとえば、astro/deploy.mdx は [framework]/deploy.mdx から生成される astro ページを置き換えます。meta ファイルについても同様です。

ローカライズされたページアンカーリンクをコピー

i18n を使用する場合、各ロケールのファイルはフォールバックロケールのファイルよりも優先されます。/cn/docs/astro/deploy の場合は、次のうち最初に見つかったファイルが使用されます。

1. astro/deploy.cn.mdx
2. [framework]/deploy.cn.mdx
3. astro/deploy.mdx
4. [framework]/deploy.mdx

ローカライズされたページでは、まず meta.cn.json から staticParams が読み込まれます。dir パーサーを使用する場合は、言語ごとのフォルダーにそれぞれの値を記述します。