跳到主要内容
版本：Canary 🚧

📦 plugin-content-pages

Docusaurus 的默认页面插件。 经典模板自带此插件并做了默认配置。 这个插件为创建页面提供基础功能。

安装流程​

npm install --save @docusaurus/plugin-content-pages
提示

如果你已经安装了 @docusaurus/preset-classic，就不需要安装这个包了。

You can configure this plugin through the preset options.

配置​

接受的字段：

参数类型默认值描述
pathstring'src/pages'数据的文件系统路径，相对于站点目录。 这个目录中的组件会被自动转换为页面。
editUrlstring | EditUrlFnundefinedOnly for Markdown pages. 编辑文档的基础 URL。 最终的 URL 会按照 editUrl + relativePostPath 计算。 使用函数可以允许你更精细地控制每一个文件。 完全忽略这个变量就会禁用编辑链接。
editLocalizedFilesbooleanfalseOnly for Markdown pages. 编辑 URL 会指向本地化的文件，而不是原始的未翻译文件。 如果 editUrl 是一个函数，会完全忽略此选项。
routeBasePathstring'/'站点页面部分的 URL 前缀。 不要包含末尾斜杠。
includestring[]['**/*.{js,jsx,ts,tsx,md,mdx}']匹配到的文件会被包含并处理。
excludestring[]见示例配置匹配到的文件不会有对应路径创建。
mdxPageComponentstring'@theme/MDXPage'每个 MDX 页面使用的组件。
remarkPlugins[]any[]传递给 MDX 的 Remark 插件。
rehypePlugins[]any[]传递给 MDX 的 Rehype 插件。
rehypePluginsany[][]Recma plugins passed to MDX.
beforeDefaultRemarkPluginsany[][]在 Docusaurus 默认 Remark 插件之前传递给 MDX 的自定义 Remark 插件。
beforeDefaultRehypePluginsany[][]在 Docusaurus 默认 Rehype 插件之前传递给 MDX 的自定义 Rehype 插件。
showLastUpdateAuthorbooleanfalseOnly for Markdown pages. Whether to display the author who last updated the page.
showLastUpdateTimebooleanfalseOnly for Markdown pages. Whether to display the last date the page post was updated. This requires access to git history during the build, so will not work correctly with shallow clones (a common default for CI systems). With GitHub actions/checkout, usefetch-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 pages can use the following Markdown front matter metadata fields, enclosed by a line --- on either side.

接受的字段：

参数类型默认值描述
titlestringMarkdown 标题博文的标题。
descriptionstringMarkdown 正文的第一行你页面的描述信息，它将会转换成 <head> 标签内的 <meta name="description" content="..."/> 和 <meta property="og:description" content="..."/>，搜索引擎会使用该信息。
keywordsstring[]undefined关键词元标签，会变成 <head> 中的 <meta name="keywords" content="keyword1,keyword2,..."/>，被搜索引擎使用。
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.
wrapperClassNamestring为特定页面内容的包裹元素添加的类名。
hide_table_of_contentsbooleanfalse是否隐藏右侧的文档目录。
draftbooleanfalseDraft（草稿）页面只在开发过程中可用。
unlistedbooleanfalse未列出的页面在开发过程中和生产端上都可用。 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​

Read the i18n introduction first.

翻译文件位置​

  • 基础路径：website/i18n/[语言]/docusaurus-plugin-content-pages
  • 多实例路径：website/i18n/[语言]/docusaurus-plugin-content-pages-[插件 ID]
  • JSON files: extracted with docusaurus write-translations
  • Markdown 文件：website/i18n/[语言]/docusaurus-plugin-content-pages

文件系统结构示例​

website/i18n/[语言]/docusaurus-plugin-content-pages
│
│ # website/src/pages 的翻译
├── first-markdown-page.md
└── second-markdown-page.md