zudo-doc
GitHub リポジトリ

検索したい単語を入力

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

ドキュメントの書き方

作成 2026年3月13日更新 2026年8月12日Takeshi Takatsudo

zudo-docでのドキュメントページの作成と整理方法。

ドキュメントの作成

src/content/docs/.mdx ファイルを作成します。フロントマターでメタデータを指定してください:

---
title: My Page
description: A brief summary of this page.
sidebar_position: 1
---

Your content here.

フロントマターフィールド

フィールド必須説明
titlestringはいページタイトル(サイドバーとヘッダーに表示)
descriptionstringいいえタイトルの下に表示される説明文
sidebar_positionnumberいいえカテゴリ内の並び順(小さい値が先)
sidebar_labelstringいいえサイドバーの表示名を上書き

Warning

ドキュメントのコンテンツ内で # h1 見出しを使用しないでください。フロントマターの title がページタイトル(h1)として自動的にレンダリングされます。コンテンツは ## h2 見出しから始めてください。

Note

利用可能なすべてのフィールドの完全なリファレンスはフロントマターガイドをご覧ください。

ディレクトリ構造

ディレクトリを使ってドキュメントをカテゴリに整理します:

src/content/docs/
  getting-started/
    introduction.mdx      # sidebar_position: 1
    installation.mdx       # sidebar_position: 2
    writing-docs.mdx       # sidebar_position: 3
  guides/
    configuration.mdx      # sidebar_position: 1
    sidebar.mdx            # sidebar_position: 2

各ディレクトリは自動的にサイドバーの折りたたみ可能なカテゴリになります。カテゴリ名はディレクトリ名から自動生成されます(ケバブケースからタイトルケースに変換)。

ドキュメント間のリンク

相対ファイルパスを使って他のドキュメントにリンクできます:

[Installation guide](./installation.mdx)
[Frontmatter reference](../guides/frontmatter.mdx)
[Back to index](./index.mdx)

これらの相対パスはビルド時に正しいURLに自動的に解決されます。リンクリゾルバーが動作するには .md/.mdx 拡張子が必要です。これによりファイルリンクとURLリンクを区別します。

アンカーやクエリ文字列も含めることができます:

[Frontmatter fields](../guides/frontmatter.mdx#required-fields)

Tip

相対リンクはビルド時に検証されます。リンク先のファイルが存在しない場合、ビルド出力に警告が表示されます。これにより壊れたリンクを早期に検出できます。

外部リンクやドキュメント以外のページへのリンクには、通常のURLを使用してください:

[External site](https://example.com)
[API reference](/api/v1)

アドモニション

zudo-docはDocusaurusスタイルのアドモニションをサポートしています。グローバルに登録されているため、インポート不要です:

Note

これはノートです — 読者が知っておくべき一般的な情報に使用します。

Tip

これはヒントです — 役立つ提案やベストプラクティスに使用します。

Info

これは情報ブロックです — 追加のコンテキストや背景情報に使用します。

Warning

これは警告です — 潜在的な問題や注意点をフラグするために使用します。

Danger

これは危険アラートです — データ損失や破壊的変更に関する重大な警告に使用します。

Caution

これは**注意(caution)**アラートです — 高深刻度で danger に準じる位置づけです。GitHubスタイルの [!CAUTION] アラートもこの表示になります。

カスタムタイトル

カスタムタイトル

title プロップを使って、任意のアドモニションにカスタムタイトルを設定できます。

アドモニションの構文

2つの構文がサポートされています。どちらもインポート不要です。

ディレクティブ構文(コンテンツ作成者向け推奨):

:::note[Optional Title]

Content here.

:::

JSXコンポーネント構文

<Note>
Default note with auto-generated title.
</Note>

<Warning title="Be Careful">
Warning with a custom title.
</Warning>

各アドモニションタイプは、ボーダーとタイトルの色にセマンティックカラートークンがマッピングされています:

タイプカラートークン一般的な色
Noteaccentオレンジ
Tipsuccess
Infoinfo
Warningwarning
Dangerdanger
Cautiondanger

Tip

アドモニションやコードブロックなど、利用可能なすべてのコンポーネントの一覧はコンポーネントリファレンスをご覧ください。

i18n(国際化)

デフォルトのスキャフォールドは1つのロケールだけで、src/content/docs-ja/ ディレクトリもロケールルートもありません。スキャフォールディング時に i18n 機能を選ぶと、セカンダリ言語、そのミラーリングされたコンテンツディレクトリ、pages/[locale]/docs/[[...slug]].tsx が追加されます。後から zudoDoc({ ... })locales フィールドでロケールを追加することもできます。

Tip

翻訳と言語ルーティングの管理に関する詳しい手順はi18nガイドをご覧ください。

MDXの機能

ドキュメント内でPreactコンポーネントを使用できます。素の MDX コンポーネントインポートはサーバーでレンダリングされ、JavaScriptゼロの HTML として配信されます。

新しくスキャフォールドされたプロジェクトには src/components/ ディレクトリはありません — カスタムコンポーネントが必要になったら自分で作成します。@/* パスエイリアスは src/* にマップされるので、src/components/my-component.tsx のファイルは次のようにインポートします:

import MyComponent from "@/components/my-component";

<MyComponent />

Info

コンポーネントを単にインポートするだけではサーバー側でのみレンダリングされ、JavaScriptはゼロです。ドキュメント全体でコンポーネントを登録する場合やインタラクティブアイランドを追加する場合は、カスタムコンポーネント を参照してください。グローバル登録には mdxExtras を、クライアントハイドレーションには実験的な Island() レシピを使います。

ナビゲーション

zudo-docは以下を自動生成します:

  • サイドバーsidebar_position でソートされたアイテムを持つ折りたたみ可能なカテゴリ

  • 目次 — 右サイドバーにh2〜h4の見出し(ワイドスクリーンで表示)

  • 前/次リンク — ドキュメント間のボトムナビゲーション

  • パンくずリスト — タイトルの上に表示されるカテゴリパス

Revision History

Takeshi Takatsudo作成: 2026-03-14T08:07:11+09:00更新: 2026-08-13T06:21:55+09:00

AI Assistant

Ask a question about the documentation.

Preview theme

Loading theme previews…