メインコンテンツにスキップ
バージョン: 3.5.2

ページの作成

このセクションでは、Docusaurusでページを作成する方法を学びます。

@docusaurus/plugin-content-pages プラグインを使用すると、ショーケースページ、プレイグラウンドページ、サポートページのような単独のスタンドアロンページを作成できます。ReactコンポーネントまたはMarkdownを使用できます。

注意

ページにはサイドバーはありません。サイドバーがあるのはドキュメントのみです。

情報

オプションの完全なリストについては、ページプラグインのAPIリファレンスドキュメントを確認してください。

Reactページを追加する​

Reactは、ページを作成するためのUIライブラリとして使用されます。すべてのページコンポーネントはReactコンポーネントをエクスポートする必要があり、Reactの表現力を活用して、リッチでインタラクティブなコンテンツを構築できます。

ファイル/src/pages/helloReact.jsを作成します

/src/pages/helloReact.js
import React from 'react';
import Layout from '@theme/Layout';

export default function Hello() {
  return (
    <Layout title="Hello" description="Hello React Page">
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '50vh',
          fontSize: '20px',
        }}>
        <p>
          Edit <code>pages/helloReact.js</code> and save to reload.
        </p>
      </div>
    </Layout>
  );
}

ファイルを保存すると、開発サーバーは自動的に変更をリロードします。次に、http://localhost:3000/helloReactを開くと、作成した新しいページが表示されます。

各ページにはスタイルは設定されていません。ナビゲーションバーやフッターを表示する場合は、@theme/LayoutからLayoutコンポーネントをインポートし、コンテンツをそのコンポーネントでラップする必要があります。

ヒント

.tsx拡張子 (helloReact.tsx) を使用してTypeScriptページを作成することもできます。

Markdownページを追加する​

ファイル/src/pages/helloMarkdown.mdを作成します

/src/pages/helloMarkdown.md
---
title: my hello page title
description: my hello page description
hide_table_of_contents: true
---

# Hello

How are you?

同様に、http://localhost:3000/helloMarkdownにページが作成されます。

Markdownページは常にテーマのレイアウトを使用するため、Reactページよりも柔軟性が低くなります。

こちらがMarkdownページの例です。

ヒント

MarkdownページでもReactの全機能を使用できます。詳細については、MDXのドキュメントを参照してください。

ルーティング​

JekyllやNextのような他の静的サイトジェネレーターに慣れている場合は、このルーティングアプローチは親しみやすいでしょう。/src/pages/ディレクトリの下に作成したJavaScriptファイルは、自動的にWebページに変換され、/src/pages/ディレクトリ階層に従います。例：

  • /src/pages/index.js → [baseUrl]
  • /src/pages/foo.js → [baseUrl]/foo
  • /src/pages/foo/test.js → [baseUrl]/foo/test
  • /src/pages/foo/index.js → [baseUrl]/foo/

このコンポーネントベースの開発時代では、スタイル、マークアップ、および動作をコンポーネントにまとめて配置することをお勧めします。各ページはコンポーネントであり、独自のスタイルでページデザインをカスタマイズする必要がある場合は、スタイルをページコンポーネントと同じディレクトリに配置することをお勧めします。たとえば、「サポート」ページを作成するには、次のいずれかを実行できます。

  • /src/pages/support.jsファイルを追加します
  • /src/pages/support/ディレクトリと/src/pages/support/index.jsファイルを作成します。

後者は、ページに関連するファイルをそのディレクトリに配置できるため、推奨されます。たとえば、「サポート」ページでのみ使用されるスタイルを含むCSSモジュールファイル (styles.module.css) です。

注意

これは単に推奨されるディレクトリ構造であり、コンポーネントモジュール (support/index.js) 内でCSSモジュールファイルを手動でインポートする必要があります。

デフォルトでは、_で始まるMarkdownファイルまたはJavaScriptファイルは無視され、そのファイルに対してルートは作成されません (excludeオプションを参照)。

my-website
├── src
│   └── pages
│       ├── styles.module.css
│       ├── index.js
│       ├── _ignored.js
│       ├── _ignored-folder
│       │   ├── Component1.js
│       │   └── Component2.js
│       └── support
│           ├── index.js
│           └── styles.module.css
.
警告

src/pages/ディレクトリ内のすべてのJavaScript/TypeScriptファイルには、対応するWebサイトパスが生成されます。そのディレクトリに再利用可能なコンポーネントを作成する場合は、excludeオプションを使用します (デフォルトでは、_で始まるファイル、テストファイル (.test.js)、および__tests__ディレクトリ内のファイルはページに変換されません)。

重複したルート​

同じルートでアクセスするように意図された複数のページを誤って作成する場合があります。この場合、Docusaurusはyarn startまたはyarn buildを実行したときに重複したルートについて警告しますが (onDuplicateRoutes設定で動作を設定可能)、サイトは引き続き正常にビルドされます。最後に作成されたページにアクセスできますが、他の競合するページを上書きします。この問題を解決するには、競合するルートを修正または削除する必要があります。