Docusaurus ページの作成方法を解説！

Docusaurusには大きく分けてショーケースページ、サポートページのような単一のページ、ドキュメント用ページ、ブログ用ページの３種類のページを作成する事ができます。

今回はReactまたは、マークダウンを使って単一のページを作成する方法を解説します。

クラシックテンプレートには、単一のページを作成できるようになる @docusaurus/plugin-content-pages プラグインが同梱されているため、クラシックテンプレートを指定してインストールした場合はすぐにページを作成できます。

Reactのページを追加する

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

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

import React from 'react';
import Layout from '@theme/Layout';

export default function Hello() {
  return (
    <Layout title="Hello" description="Hello React ページ">
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '50vh',
          fontSize: '20px',
        }}>
        <p>
          このページは、 <code>pages/helloReact.js</code> で作成されました。
        </p>
      </div>
    </Layout>
  );
}

.tsx 拡張子を使ってTypeScriptのページを作成することもできます。（helloReact.tsx）

ファイルを保存すると、開発サーバーは自動的にリロードします。

http://localhost:3000/helloReact にアクセスすると、helloReact.jsのページが表示されます。

各ページにはスタイリングは付いていません。@theme/Layout からLayoutコンポーネントをインポートする必要があります。

ナビゲーションバーやフッターを表示したい場合は、そのコンポーネント内でコンテンツをラップしてください。

http://localhost:3000/ のページもReactで作成されたページです。ヘッダーや、機能を紹介しているセクションをコンポーネント化して、index.jsでimportして読み込んでいます。

ページを作成する時の参考になります。

マークダウンページを追加する

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

---
title: hello page タイトル
description: hello page の説明
hide_table_of_contents: true
---

# Hello

調子はどうですか？

http://localhost:3000/helloMarkdown にページが追加されます。

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

しかし、マークダウンページでも、MDXファイルにすることで、Reactを活かしたマークダウンページを作成することも可能です。

ルーティング

/src/pages/ 配下に作成した JavaScript ファイルは、/src/pages/ ディレクトリの階層に従って、Webサイトページに自動的に変換されます。ただし、デフォルトでは、 _ （アンダーバー）で始まるMarkdown または JavaScriptファイルのルートは作成されません。

• /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/

まとめ

今回は、Docusaurusに単一のページを作成する方法を解説しました。

単一のページには、Reactを使って作成する方法と、マークダウンを使って作成する方法があります。用途に応じてReactでリッチなページにしたり、マークダウンで短時間でシンプルなページを作成することが可能です。

/src/pages/ のディレクトリ階層に応じて自動的にルーティングされます。ページのURLを変更したい場合は、ファイルを移動するだけです。