📦 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
,就不需要安装这个包了。
You can configure this plugin through the preset options.
配置
接受的字段:
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
path | string | 'src/pages' | 数据的文件系统路径,相对于站点目录。 这个目录中的组件会被自动转换为页面。 |
editUrl | string | EditUrlFn | undefined | Only for Markdown pages. 编辑文档的基础 URL。 最终的 URL 会按照 editUrl + relativePostPath 计算。 使用函数可以允许你更精细地控制每一个文件。 完全忽略这个变量就会禁用编辑链接。 |
editLocalizedFiles | boolean | false | Only for Markdown pages. 编辑 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[] | [] | Recma plugins passed to MDX. |
beforeDefaultRemarkPlugins | any[] | [] | 在 Docusaurus 默认 Remark 插件之前传递给 MDX 的自定义 Remark 插件。 |
beforeDefaultRehypePlugins | any[] | [] | 在 Docusaurus 默认 Rehype 插件之前传递给 MDX 的自定义 Rehype 插件。 |
showLastUpdateAuthor | boolean | false | Only for Markdown pages. Whether to display the author who last updated the page. |
showLastUpdateTime | boolean | false | Only for Markdown pages. Whether to display the last date the page post was updated. This requires access to git history during the build, so will not work correctly with shallow clones (a common default for CI systems). With GitHub actions/checkout , usefetch-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 前言
Markdown pages can use the following Markdown front matter metadata fields, enclosed by a line ---
on either side.
接受的字段:
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
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 | Cover or thumbnail image that will be used as the <meta property="og:image" content="..."/> in the <head> , enhancing link previews on social media and messaging platforms. |
wrapperClassName | string | 为特定页面内容的包裹元素添加的类名。 | |
hide_table_of_contents | boolean | false | 是否隐藏右侧的文档目录。 |
draft | boolean | false | Draft(草稿)页面只在开发过程中可用。 |
unlisted | boolean | false | 未列出的页面在开发过程中和生产端上都可用。 They will be "hidden" in production, not indexed, excluded from sitemaps, and can only be accessed by users having a direct link. |
示例:
---
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.
翻译文件位置
- 基础路径:
website/i18n/[语言]/docusaurus-plugin-content-pages
- 多实例路径:
website/i18n/[语言]/docusaurus-plugin-content-pages-[插件 ID]
- JSON files: extracted with
docusaurus write-translations
- Markdown 文件:
website/i18n/[语言]/docusaurus-plugin-content-pages
文件系统结构示例
website/i18n/[语言]/docusaurus-plugin-content-pages
│
│ # website/src/pages 的翻译
├── first-markdown-page.md
└── second-markdown-page.md