跳到主要内容

📦 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 用户通过预设选项配置此插件。

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

Markdown front matter​

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

接受的字段：

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

示例：

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

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