跳到主要内容
版本：3.8.1

📦 plugin-content-pages

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

安装​

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

如果您使用预设 @docusaurus/preset-classic，则无需将此插件作为依赖项安装。

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

配置​

接受的字段

名称类型默认值描述
pathstring'src/pages'相对于站点目录的文件系统数据路径。此目录中的组件将自动转换为页面。
editUrlstring | EditUrlFnundefined仅适用于 Markdown 页面。编辑站点的基础 URL。最终 URL 通过 editUrl + relativePostPath 计算得出。使用函数可以对每个文件进行更细致的控制。完全省略此变量将禁用编辑链接。
editLocalizedFilesbooleanfalse仅适用于 Markdown 页面。编辑 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[][]传递给 MDX 的 Recma 插件。
beforeDefaultRemarkPluginsany[][]在 Docusaurus 默认 Remark 插件之前传递给 MDX 的自定义 Remark 插件。
beforeDefaultRehypePluginsany[][]在 Docusaurus 默认 Rehype 插件之前传递给 MDX 的自定义 Rehype 插件。
showLastUpdateAuthorbooleanfalse仅适用于 Markdown 页面。是否显示最后更新页面的作者。
showLastUpdateTimebooleanfalse仅适用于 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 front matter​

Markdown 页面可以使用以下 Markdown front matter 元数据字段，两侧用 --- 行包围。

接受的字段

名称类型默认值描述
titlestringMarkdown 标题博客文章标题。
descriptionstringMarkdown 内容的第一行页面的描述，将成为 <head> 中的 <meta name="description" content="..."/> 和 <meta property="og:description" content="..."/>，供搜索引擎使用。
keywordsstring[]undefined关键字元标签，将成为 <head> 中的 <meta name="keywords" content="keyword1,keyword2,..."/>，供搜索引擎使用。
imagestringundefined封面或缩略图，将用作 <head> 中的 <meta property="og:image" content="..."/>，增强社交媒体和消息平台上的链接预览。
slugstring文件路径允许自定义页面 URL (/<routeBasePath>/<slug>)。支持多种模式：slug: my-page、slug: /my/page、slug: /。
wrapperClassNamestring要添加到包装器元素的类名，以允许定位特定页面内容。
hide_table_of_contentsbooleanfalse是否隐藏右侧的目录。
draftbooleanfalse草稿页面只在开发期间可用。
unlistedbooleanfalse未列出页面在开发和生产环境中均可用。它们在生产环境中将处于“隐藏”状态，不被索引，不包含在站点地图中，并且只能通过直接链接访问。

示例

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

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