📦 plugin-content-pages

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

安装

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，则无需将此插件安装为依赖项。

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

配置

可接受的字段：

名称	类型	默认值	描述
`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 的 Remark 插件。
`rehypePlugins`	`[]`	`any[]`	传递给 MDX 的 Rehype 插件。
`rehypePlugins`	`any[]`	`[]`	传递给 MDX 的 Recma 插件。
`beforeDefaultRemarkPlugins`	`any[]`	`[]`	在默认 Docusaurus Remark 插件之前传递给 MDX 的自定义 Remark 插件。
`beforeDefaultRehypePlugins`	`any[]`	`[]`	在默认 Docusaurus Rehype 插件之前传递给 MDX 的自定义 Rehype 插件。
`showLastUpdateAuthor`	`boolean`	`false`	仅适用于 Markdown 页面。是否显示最后更新页面的作者。
`showLastUpdateTime`	`boolean`	`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 用户通过预设选项配置此插件。

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',
      {
        [translation failure]: {
          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: [
    [
      '[translation failure]',
      {
        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 前置 matter

Markdown 页面可以使用以下 Markdown 前置 matter 元数据字段，两侧用 --- 行括起来。

可接受的字段：

名称	类型	默认值	描述
`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`	未列出的页面在开发和生产环境中都可用。它们将在生产环境中“隐藏”，不会被索引，不包含在站点地图中，并且只能由拥有直接链接的用户访问。

示例：

---
title: Markdown 页面
description: Markdown 页面 SEO 描述
wrapperClassName: markdown-page
hide_table_of_contents: false
draft: true
---

Markdown 页面内容

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
│
│ # website/src/pages 的翻译
├── first-markdown-page.md
└── second-markdown-page.md

安装​

配置​

类型​

EditUrlFn​

示例配置​

Markdown 前置 matter​

i18n​

翻译文件位置​

示例文件系统结构​

安装

配置

类型