Skip to main content
Version: 3.2.1

📦 插件内容页面

Docusaurus的默认页面插件。经典模板附带此插件及其默认配置。此插件提供创建页面功能。

安装​

npm install --save @docusaurus/plugin-content-pages
tip

如果你使用预设的@docusaurus/preset-classic，你不需要将此插件作为依赖项安装。

你可以通过预设选项来配置此插件。

配置​

接受的字段：

NameTypeDefaultDescription
pathstring'src/pages'Path to data on filesystem relative to site dir. Components in this directory will be automatically converted to pages.
routeBasePathstring'/'URL route for the pages section of your site. DO NOT include a trailing slash.
includestring[]['**/*.{js,jsx,ts,tsx,md,mdx}']Matching files will be included and processed.
excludestring[]See example configurationNo route will be created for matching files.
mdxPageComponentstring'@theme/MDXPage'Component used by each MDX page.
remarkPlugins[]any[]Remark plugins passed to MDX.
rehypePlugins[]any[]Rehype plugins passed to MDX.
beforeDefaultRemarkPluginsany[][]Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins.
beforeDefaultRehypePluginsany[][]Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins.

示例配置​

您可以通过预设选项或插件选项来配置此插件。

tip

大多数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 front matter 元数据字段，由一行 --- 包围。

接受的字段：

NameTypeDefaultDescription
titlestringMarkdown titleThe blog post title.
descriptionstringThe first line of Markdown contentThe description of your page, which will become the <meta name="description" content="..."/> and <meta property="og:description" content="..."/> in <head>, used by search engines.
keywordsstring[]undefinedKeywords meta tag, which will become the <meta name="keywords" content="keyword1,keyword2,..."/> in <head>, used by search engines.
imagestringundefinedCover or thumbnail image that will be used as the <meta property="og:image" content="..."/> in the <head>, enhancing link previews on social media and messaging platforms.
wrapperClassNamestringClass name to be added to the wrapper element to allow targeting specific page content.
hide_table_of_contentsbooleanfalseWhether to hide the table of contents to the right.
draftbooleanfalseDraft pages will only be available during development.
unlistedbooleanfalseUnlisted pages will be available in both development and production. They will be "hidden" in production, not indexed, excluded from sitemaps, and can only be accessed by users having a direct link.

示例：

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

Markdown page content

国际化​

首先阅读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