本文へスキップ
バージョン: 3.5.2

📦 plugin-content-pages

Docusaurus のデフォルトページプラグイン。クラシックテンプレートには、デフォルト設定でこのプラグインが同梱されています。このプラグインは ページ作成 機能を提供します。

インストール​

npm install --save @docusaurus/plugin-content-pages
ヒント

プリセット@docusaurus/preset-classicを使用する場合は、このプラグインを依存関係としてインストールする必要はありません。

このプラグインは、プリセットオプション を通じて設定できます。

設定​

有効なフィールド

名前型デフォルト値説明
path文字列'src/pages'サイトディレクトリを基準としたファイルシステム上のデータへのパス。このディレクトリ内のコンポーネントは、自動的にページに変換されます。
editUrl文字列 | EditUrlFnundefined**Markdown ページのみ**。サイトを編集するための基本URL。最終的なURLは、editUrl + relativePostPathによって計算されます。関数を使用すると、ファイルごとに詳細な制御が可能になります。この変数を完全に省略すると、編集リンクが無効になります。
editLocalizedFilesブール値false**Markdown ページのみ**。編集URLは、元のローカライズされていないファイルではなく、ローカライズされたファイルを対象とします。editUrlが関数の場合、無視されます。
routeBasePath文字列'/'サイトのページセクションのURLルート。**末尾のスラッシュを含めないでください**。
includestring[]['**/*.{js,jsx,ts,tsx,md,mdx}']一致するファイルは、インクルードおよび処理されます。
excludestring[]設定例を参照一致するファイルに対しては、ルートは作成されません。
mdxPageComponent文字列'@theme/MDXPage'各MDXページで使用されるコンポーネント。
remarkPlugins[]any[]MDXに渡されるRemarkプラグイン。
rehypePlugins[]any[]MDXに渡されるRehypeプラグイン。
rehypePluginsany[][]MDXに渡されるRecmaプラグイン。
beforeDefaultRemarkPluginsany[][]デフォルトのDocusaurus Remarkプラグインの前にMDXに渡されるカスタムRemarkプラグイン。
beforeDefaultRehypePluginsany[][]デフォルトのDocusaurus Rehypeプラグインの前にMDXに渡されるカスタムRehypeプラグイン。
showLastUpdateAuthorブール値false**Markdown ページのみ**。最後にページを更新した作者を表示するかどうか。
showLastUpdateTimeブール値false**Markdown ページのみ**。ページの投稿が最後に更新された日付を表示するかどうか。ビルド時にGit履歴へのアクセスが必要なため、浅いクローン（CIシステムの一般的なデフォルト）では正しく機能しません。GitHubのactions/checkoutを使用する場合は、fetch-depth: 0を使用してください。

型​

EditUrlFn​

type EditUrlFunction = (params: {
  blogDirPath: string;
  blogPath: string;
  permalink: string;
  locale: string;
}) => string | undefined;

設定例​

このプラグインは、プリセットオプションまたはプラグインオプションを介して設定できます。

ヒント

ほとんどのDocusaurusユーザーは、プリセットオプションを使用してこのプラグインを設定します。

プリセットを使用する場合は、プリセットオプション を使用してこのプラグインを設定します。

docusaurus.config.js
module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        pages: {
          path: 'src/pages',
          routeBasePath: '',
          include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
          exclude: [
            '**/_*.{js,jsx,ts,tsx,md,mdx}',
            '**/_*/**',
            '**/*.test.{js,jsx,ts,tsx}',
            '**/__tests__/**',
          ],
          mdxPageComponent: '@theme/MDXPage',
          remarkPlugins: [require('./my-remark-plugin')],
          rehypePlugins: [],
          beforeDefaultRemarkPlugins: [],
          beforeDefaultRehypePlugins: [],
        },
      },
    ],
  ],
};

Markdownフロントマター​

Markdownページでは、次のMarkdown フロントマター メタデータフィールドを使用できます。両側に---の行で囲みます。

有効なフィールド

名前型デフォルト値説明
title文字列Markdownタイトルブログ投稿のタイトル。
description文字列Markdownコンテンツの最初の行ページの説明。これは、検索エンジンで使用される<head>内の<meta name="description" content="..."/>および<meta property="og:description" content="..."/>になります。
keywordsstring[]undefinedキーワードメタタグ。これは、検索エンジンで使用される<head>内の<meta name="keywords" content="keyword1,keyword2,..."/>になります。
image文字列undefinedソーシャルメディアやメッセージングプラットフォームでのリンクプレビューを強化するために、<head>内の<meta property="og:image" content="..."/>として使用されるカバーまたはサムネイル画像。
wrapperClassName文字列特定のページコンテンツのターゲットを絞り込むために、ラッパー要素に追加されるクラス名。
hide_table_of_contentsブール値false右側の目次を非表示にするかどうか。
draftブール値falseドラフトページは開発中のみ利用可能です。
unlistedブール値false非公開ページは開発と本番の両方で利用可能です。本番環境では「非表示」になり、インデックス付けされず、サイトマップから除外され、直接リンクを持っているユーザーのみアクセスできます。

例

---
title: Markdown Page
description: Markdown page SEO description
wrapperClassName: markdown-page
hide_table_of_contents: false
draft: true
---

Markdown page content

i18n​

i18nの概要をまずお読みください。

翻訳ファイルの場所​

  • **基本パス**: website/i18n/[locale]/docusaurus-plugin-content-pages
  • **複数インスタンスパス**: website/i18n/[locale]/docusaurus-plugin-content-pages-[pluginId]
  • **JSONファイル**: docusaurus write-translationsで抽出
  • **Markdownファイル**: website/i18n/[locale]/docusaurus-plugin-content-pages

ファイルシステム構造の例​

website/i18n/[locale]/docusaurus-plugin-content-pages
│
│ # translations for website/src/pages
├── first-markdown-page.md
└── second-markdown-page.md