跳到主要内容

📦 plugin-content-pages

这是 Docusaurus 默认的独立页面(pages)功能插件。classic 模板自带此插件并具有默认配置。此插件提供了 创建独立页面 的功能。

安装

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

如果你已经安装了 @docusaurus/preset-classic,则不需要再安装此插件。

You can configure this plugin through the preset options.

配置

Accepted fields:

NameTypeDefaultDescription
pathstring'src/pages'Path to data on filesystem relative to site dir. Components in this directory will be automatically converted to pages.
editUrlstring | EditUrlFnundefinedOnly for Markdown pages. Base URL to edit your site. The final URL is computed by editUrl + relativePostPath. Using a function allows more nuanced control for each file. Omitting this variable entirely will disable edit links.
editLocalizedFilesbooleanfalseOnly for Markdown pages. The edit URL will target the localized file, instead of the original unlocalized file. Ignored when editUrl is a function.
routeBasePathstring'/'URL route for the pages section of your site. DO NOT include a trailing slash.
includestring[]['**/*.{js,jsx,ts,tsx,md,mdx}']Matching files will be included and processed.
excludestring[]See example configurationNo route will be created for matching files.
mdxPageComponentstring'@theme/MDXPage'Component used by each MDX page.
remarkPlugins[]any[]Remark plugins passed to MDX.
rehypePlugins[]any[]Rehype plugins passed to MDX.
rehypePluginsany[][]Recma plugins passed to MDX.
beforeDefaultRemarkPluginsany[][]Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins.
beforeDefaultRehypePluginsany[][]Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins.
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

You can configure this plugin through preset options or plugin options.

提示

Most Docusaurus users configure this plugin through the preset options.

If you use a preset, configure this plugin through the preset options:

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.

Accepted fields:

NameTypeDefaultDescription
titlestringMarkdown titleThe blog post title.
descriptionstringThe first line of Markdown contentThe 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.
wrapperClassNamestringClass name to be added to the wrapper element to allow targeting specific page content.
hide_table_of_contentsbooleanfalseWhether to hide the table of contents to the right.
draftbooleanfalseDraft pages will only be available during development.
unlistedbooleanfalseUnlisted pages will be available in both development and production. They will be "hidden" in production, not indexed, excluded from sitemaps, and can only be accessed by users having a direct link.

Example:

---
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

# website/src/pages 目录下个独立页面的翻译文件
├── first-markdown-page.md
└── second-markdown-page.md