跳到主要内容
版本:3.5.2

📦 plugin-content-pages

Docusaurus 的默认页面插件。 经典模板自带此插件并做了默认配置。 This plugin provides creating pages functionality.

Installation

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

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

You can configure this plugin through the preset options.

Configuration

接受的字段:

参数类型默认值描述
pathstring'src/pages'数据的文件系统路径,相对于站点目录。 这个目录中的组件会被自动转换为页面。
editUrlstring | EditUrlFnundefinedOnly for Markdown pages. 编辑文档的基础 URL。 The final URL is computed by editUrl + relativePostPath. 使用函数可以允许你更精细地控制每一个文件。 完全忽略这个变量就会禁用编辑链接。
editLocalizedFilesbooleanfalseOnly for Markdown pages. 编辑 URL 会指向本地化的文件,而不是原始的未翻译文件。 Ignored when editUrl is a function.
routeBasePathstring'/'站点页面部分的 URL 前缀。 DO NOT include a trailing slash.
includestring[]['**/*.{js,jsx,ts,tsx,md,mdx}']匹配到的文件会被包含并处理。
excludestring[]See example configuration匹配到的文件不会有对应路径创建。
mdxPageComponentstring'@theme/MDXPage'每个 MDX 页面使用的组件。
remarkPlugins[]any[]传递给 MDX 的 Remark 插件。
rehypePlugins[]any[]传递给 MDX 的 Rehype 插件。
rehypePluginsany[][]Recma plugins passed to MDX.
beforeDefaultRemarkPluginsany[][]在 Docusaurus 默认 Remark 插件之前传递给 MDX 的自定义 Remark 插件。
beforeDefaultRehypePluginsany[][]在 Docusaurus 默认 Rehype 插件之前传递给 MDX 的自定义 Rehype 插件。
showLastUpdateAuthorbooleanfalseOnly for Markdown pages. Whether to display the author who last updated the page.
showLastUpdateTimebooleanfalseOnly 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.

Types

EditUrlFn

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

Example configuration

你可以通过预设选项或插件选项来配置这个插件。

提示

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

Markdown front matter

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

接受的字段:

参数类型默认值描述
titlestringMarkdown 标题博文的标题。
descriptionstringMarkdown 正文的第一行The description of your page, which will become the <meta name="description" content="..."/> and <meta property="og:description" content="..."/> in <head>, used by search engines.
keywordsstring[]undefinedKeywords meta tag, which will become the <meta name="keywords" content="keyword1,keyword2,..."/> in <head>, used by search engines.
imagestringundefinedCover 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.
wrapperClassNamestring为特定页面内容的包裹元素添加的类名。
hide_table_of_contentsbooleanfalse是否隐藏右侧的文档目录。
draftbooleanfalseDraft(草稿)页面只在开发过程中可用。
unlistedbooleanfalse未列出的页面在开发过程中和生产端上都可用。 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.

Translation files location

  • Base path: website/i18n/[locale]/docusaurus-plugin-content-pages
  • Multi-instance path: website/i18n/[locale]/docusaurus-plugin-content-pages-[pluginId]
  • JSON files: extracted with docusaurus write-translations
  • Markdown files: website/i18n/[locale]/docusaurus-plugin-content-pages

Example file-system structure

website/i18n/[语言]/docusaurus-plugin-content-pages

# website/src/pages 的翻译
├── first-markdown-page.md
└── second-markdown-page.md