📦 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 | 字符串 | 'src/pages' | 文件系统上相对于站点目录的数据路径。此目录中的组件将自动转换为页面。 |
editUrl | 字符串 | EditUrlFn | 未定义 | 仅适用于 Markdown 页面。编辑站点的基本 URL。最终 URL 由 editUrl + relativePostPath 计算得出。使用函数可以更细致地控制每个文件。完全省略此变量将禁用编辑链接。 |
editLocalizedFiles | 布尔值 | false | 仅适用于 Markdown 页面。编辑 URL 将指向本地化文件，而不是原始的未本地化文件。当 editUrl 为函数时将被忽略。 |
routeBasePath | 字符串 | '/' | 站点页面部分的 URL 路由。不要包含尾部斜杠。 |
include | 字符串数组 | ['**/*.{js,jsx,ts,tsx,md,mdx}'] | 匹配的文件将被包含和处理。 |
exclude | 字符串数组 | 参见示例配置 | 不会为匹配的文件创建路由。 |
mdxPageComponent | 字符串 | '@theme/MDXPage' | 每个 MDX 页面使用的组件。 |
remarkPlugins | [] | 任意数组 | 传递给 MDX 的 Remark 插件。 |
rehypePlugins | [] | 任意数组 | 传递给 MDX 的 Rehype 插件。 |
rehypePlugins | 任意数组 | [] | 传递给 MDX 的 Recma 插件。 |
beforeDefaultRemarkPlugins | 任意数组 | [] | 在默认的 Docusaurus Remark 插件之前传递给 MDX 的自定义 Remark 插件。 |
beforeDefaultRehypePlugins | 任意数组 | [] | 在默认的 Docusaurus Rehype 插件之前传递给 MDX 的自定义 Rehype 插件。 |
showLastUpdateAuthor | 布尔值 | false | 仅适用于 Markdown 页面。是否显示最后更新页面的作者。 |
showLastUpdateTime | 布尔值 | 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 用户通过预设选项配置此插件。
- 预设选项
- 插件选项
如果您使用预设，请通过 预设选项 配置此插件
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: [],
},
},
],
],
};
如果您使用的是独立插件，请直接向插件提供选项
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 前置 matter
Markdown 页面可以使用以下 Markdown 前置 matter 元数据字段，两侧用 --- 线包围。
可接受的字段
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
title | 字符串 | Markdown 标题 | 博客文章标题。 |
description | 字符串 | Markdown 内容的第一行 | 页面的描述，它将成为 <meta name="description" content="..."/> 和 <meta property="og:description" content="..."/> 在 <head> 中，供搜索引擎使用。 |
keywords | 字符串数组 | 未定义 | 关键词元标签，它将成为 <meta name="keywords" content="keyword1,keyword2,..."/> 在 <head> 中，供搜索引擎使用。 |
image | 字符串 | 未定义 | 封面或缩略图图像，将用作 <meta property="og:image" content="..."/> 在 <head> 中，增强社交媒体和消息平台上的链接预览。 |
wrapperClassName | 字符串 | 要添加到包装器元素的类名，以允许定位特定页面内容。 | |
hide_table_of_contents | 布尔值 | false | 是否隐藏右侧的目录。 |
draft | 布尔值 | false | 草稿页面仅在开发期间可用。 |
unlisted | 布尔值 | false | 未列出的页面在开发和生产环境中都可用。它们将在生产环境中“隐藏”，不会被索引，不包含在站点地图中，并且只能由拥有直接链接的用户访问。 |
示例
---
title: Markdown Page
description: Markdown page SEO description
wrapperClassName: markdown-page
hide_table_of_contents: false
draft: true
---
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