zudo-doc

Type to search...

to open search from anywhere

ドキュメントの書き方

作成2026年3月22日Takeshi Takatsudo

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

ドキュメントの作成

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

---
title: マイページ
description: このページの簡単な説明。
sidebar_position: 1
---

ここにコンテンツを記述します。

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

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

📝 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

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

アドモニション

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

📝 Note

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

💡 Tip

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

ℹ️ Info

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

⚠️ Warning

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

🚨 Danger

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

カスタムタイトル

📝 カスタムタイトル

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

アドモニションの構文

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

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

:::note[任意のタイトル]

ここにコンテンツを記述します。

:::

JSXコンポーネント構文

<Note>
自動生成タイトルのデフォルトノート。
</Note>

<Warning title="注意">
カスタムタイトルの警告。
</Warning>

各アドモニションタイプは、ボーダーとタイトルの色にパレットスロットがマッピングされています:

タイプパレットスロット一般的な色
Notep4
Tipp2
Infop6シアン
Warningp3
Dangerp1

💡 Tip

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

i18n(国際化)

zudo-docは英語と日本語をすぐに使える状態でサポートしています。日本語ドキュメントは src/content/docs-ja/ で英語のディレクトリ構造をミラーリングします。

💡 Tip

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

MDXの機能

ドキュメント内でReactコンポーネントを使用できます。インタラクティブなコンポーネントはAstroアイランドとしてハイドレートされ、残りは純粋なHTMLとしてJavaScriptゼロで配信されます。

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

<MyComponent client:load />

ℹ️ Info

インタラクティブ性が必要なコンポーネントには client:load を使用してください。静的HTMLのみをレンダリングするコンポーネントでは省略します。

ナビゲーション

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

  • サイドバーsidebar_position でソートされたアイテムを持つ折りたたみ可能なカテゴリ
  • 目次 — 右サイドバーにh2〜h4の見出し(ワイドスクリーンで表示)
  • 前/次リンク — ドキュメント間のボトムナビゲーション
  • パンくずリスト — タイトルの上に表示されるカテゴリパス

Revision History

AI Assistant

Ask a question about the documentation.