📦 plugin-content-pages

O plugin de páginas padrão para o Docusaurus. O modelo clássico é fornecido com este plugin com configurações padrão. This plugin provides creating pages functionality.

Instalação

npm

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

Yarn

yarn add @docusaurus/plugin-content-pages

pnpm

pnpm add @docusaurus/plugin-content-pages

Bun

bun add @docusaurus/plugin-content-pages

dica

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.

Configuração

Campos aceitos:

Nome	Type	Padrão	Descrição
path	string	'src/pages'	Path to data on filesystem relative to site dir. Components in this directory will be automatically converted to pages.
editUrl	string | EditUrlFn	undefined	Only 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.
editLocalizedFiles	boolean	false	Only for Markdown pages. The edit URL will target the localized file, instead of the original unlocalized file. Ignored when editUrl is a function.
routeBasePath	string	'/'	URL route for the pages section of your site. DO NOT include a trailing slash.
include	string[]	['**/*.{js,jsx,ts,tsx,md,mdx}']	Os arquivos correspondentes serão incluídos e processados.
exclude	string[]	See example configuration	No route will be created for matching files.
mdxPageComponent	string	'@theme/MDXPage'	Componente usado em cada página MDX.
remarkPlugins	[]	any[]	Remark plugins passed to MDX.
rehypePlugins	[]	any[]	Rehype plugins passed to MDX.
rehypePlugins	any[]	[]	Recma plugins passed to MDX.
beforeDefaultRemarkPlugins	any[]	[]	Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins.
beforeDefaultRehypePlugins	any[]	[]	Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins.
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.

Types

EditUrlFn

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

Configuração de exemplo

Você pode configurar este plugin através das opções de predefinição ou opções do plugin.

dica

A maioria dos usuários do Docusaurus configura este plugin através das configurações de predefinição.

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

Plugin options

If you are using a standalone plugin, provide options directly to the plugin:

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

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

Campos aceitos:

Nome	Type	Padrão	Descrição
título	string	Markdown title	The blog post title.
description	string	The first line of Markdown content	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.
keywords	string[]	undefined	Keywords meta tag, which will become the <meta name="keywords" content="keyword1,keyword2,..."/> in <head>, used by search engines.
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.
slug	string	File path	Allows to customize the page URL (/<routeBasePath>/<slug>). Support multiple patterns: slug: my-page, slug: /my/page, slug: /.
wrapperClassName	string		Class name to be added to the wrapper element to allow targeting specific page content.
hide_table_of_contents	boolean	false	Whether to hide the table of contents to the right.
draft	boolean	false	Draft pages will only be available during development.
unlisted	boolean	false	Unlisted 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.

Exemplo:

---
title: Markdown Page
description: Markdown page SEO description
wrapperClassName: markdown-page
hide_table_of_contents: false
draft: true
slug: /markdown-page
---

Markdown page content

i18n

Read the i18n introduction first.

Localização dos arquivos de tradução

• 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

Exemplo de estrutura de sistema de arquivos

website/i18n/[locale]/docusaurus-plugin-content-pages
│
│ # translations for website/src/pages
├── first-markdown-page.md
└── second-markdown-page.md