Version: 3.6.1

📦 plugin-content-pages

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

¥The default pages plugin for Docusaurus. The classic template ships with this plugin with default configurations. This plugin provides creating pages functionality.

安装

¥Installation

npm
Yarn
pnpm

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

yarn add @docusaurus/plugin-content-pages

pnpm add @docusaurus/plugin-content-pages

提示

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

¥If you use the preset @docusaurus/preset-classic, you don't need to install this plugin as a dependency.

你可以通过预设选项.conf 配置该插件。

¥You can configure this plugin through the preset options.

配置

¥Configuration

接受的字段：

¥Accepted fields:

名称	类型	默认	描述
`path`	`string`	`'src/pages'`	文件系统上相对于站点目录的数据路径。该目录中的组件将自动转换为页面。
`editUrl`	`string \| EditUrlFn`	`undefined`	仅适用于 Markdown 页面。用于编辑站点的基本 URL。最终 URL 由 `editUrl + relativePostPath` 计算。使用函数可以对每个文件进行更细致的控制。完全省略此变量将禁用编辑链接。
`editLocalizedFiles`	`boolean`	`false`	仅适用于 Markdown 页面。编辑 URL 将定位本地化文件，而不是原始的未本地化文件。当 `editUrl` 是函数时被忽略。
`routeBasePath`	`string`	`'/'`	你网站的页面部分的 URL 路由。不要包含尾部斜杠。
`include`	`string[]`	`['*/.{js,jsx,ts,tsx,md,mdx}']`	匹配的文件将被包含并处理。
`exclude`	`string[]`	查看示例配置	不会为匹配的文件创建路由。
`mdxPageComponent`	`string`	`'@theme/MDXPage'`	每个 MDX 页面使用的组件。
`remarkPlugins`	`[]`	`any[]`	备注传递给 MDX 的插件。
`rehypePlugins`	`[]`	`any[]`	Rehype 插件传递给 MDX。
`rehypePlugins`	`any[]`	`[]`	传递给 MDX 的 Recma 插件。
`beforeDefaultRemarkPlugins`	`any[]`	`[]`	自定义 Remark 插件在默认 Docusaurus Remark 插件之前传递到 MDX。
`beforeDefaultRehypePlugins`	`any[]`	`[]`	自定义 Rehype 插件在默认 Docusaurus Rehype 插件之前传递到 MDX。
`showLastUpdateAuthor`	`boolean`	`false`	仅适用于 Markdown 页面。是否显示最后更新页面的作者。
`showLastUpdateTime`	`boolean`	`false`	仅适用于 Markdown 页面。是否显示页面帖子的最后更新日期。这需要在构建期间访问 git 历史记录，因此无法与浅克隆（CI 系统的常见默认设置）一起正常工作。使用 GitHub `actions/checkout`，使用 `fetch-depth: 0`。

类型

¥Types

`EditUrlFn`

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

配置示例

¥Example configuration

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

¥You can configure this plugin through preset options or plugin options.

提示

大多数 Docusaurus 用户通过预设选项配置此插件。

¥Most Docusaurus users configure this plugin through the preset options.

Preset options
Plugin options

If you use a preset, configure this plugin through the preset options:

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: [],
        },
      },
    ],
  ],
};

If you are using a standalone plugin, provide options directly to the plugin:

docusaurus.config.js
module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-content-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 front matter

Markdown 页面可以使用以下 Markdown 头条新闻元数据字段，由两侧的 --- 行括起来。

¥Markdown pages can use the following Markdown front matter metadata fields, enclosed by a line --- on either side.

接受的字段：

¥Accepted fields:

名称	类型	默认	描述
`title`	`string`	Markdown 标题	博客文章标题。
`description`	`string`	第一行 Markdown 内容	你的页面的描述，将成为 `<head>` 中的 `<meta name="description" content="..."/>` 和 `<meta property="og:description" content="..."/>`，供搜索引擎使用。
`keywords`	`string[]`	`undefined`	关键词元标记，将成为 `<head>` 中的 `<meta name="keywords" content="keyword1,keyword2,..."/>`，被搜索引擎使用。
`image`	`string`	`undefined`	将用作 `<head>` 中的 `<meta property="og:image" content="..."/>` 的封面或缩略图，增强社交媒体和消息平台上的链接预览。
`wrapperClassName`	`string`		要添加到封装元素的类名称，以允许定位特定的页面内容。
`hide_table_of_contents`	`boolean`	`false`	是否隐藏右侧目录。
`draft`	`boolean`	`false`	草稿页面仅在开发期间可用。
`unlisted`	`boolean`	`false`	未列出的页面将在开发和生产中可用。它们在生产中将是 "hidden"，未编入索引，从站点地图中排除，并且只能由具有直接链接的用户访问。

示例：

¥Example:

---
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.

翻译文件位置

¥Translation files location

基本路径：website/i18n/[locale]/docusaurus-plugin-content-pages

¥Base path: website/i18n/[locale]/docusaurus-plugin-content-pages
多实例路径：website/i18n/[locale]/docusaurus-plugin-content-pages-[pluginId]

¥Multi-instance path: website/i18n/[locale]/docusaurus-plugin-content-pages-[pluginId]
JSON 文件：用 docusaurus write-translations 提取

¥JSON files: extracted with docusaurus write-translations
Markdown 文件：website/i18n/[locale]/docusaurus-plugin-content-pages

¥Markdown files: website/i18n/[locale]/docusaurus-plugin-content-pages

文件系统结构示例

¥Example file-system structure

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

安装​

配置​

类型​

EditUrlFn​

配置示例​

Markdown 前言​

国际化​

翻译文件位置​

文件系统结构示例​

安装

配置

类型

`EditUrlFn`

配置示例

Markdown 前言

国际化

翻译文件位置

文件系统结构示例