📦 plugin-content-pages
The default pages plugin for Docusaurus. The classic template ships with this plugin with default configurations. This plugin provides creating pages functionality.
Installation
- npm
- Yarn
- pnpm
- Bun
npm install --save @docusaurus/plugin-content-pages
yarn add @docusaurus/plugin-content-pages
pnpm add @docusaurus/plugin-content-pages
bun add @docusaurus/plugin-content-pages
tip
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
Accepted fields:
| Name | Type | Default | Description |
|---|---|---|---|
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}'] | Matching files will be included and processed. |
exclude | string[] | See example configuration | No route will be created for matching files. |
mdxPageComponent | string | '@theme/MDXPage' | Component used by each MDX page. |
remarkPlugins | any[] | [] | Remark plugins passed to MDX. |
rehypePlugins | any[] | [] | Rehype plugins passed to MDX. |
recmaPlugins | 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, use fetch-depth: 0. When deploying to Vercel, set the environment variable VERCEL_DEEP_CLONE=true. |
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.
tip
Most Docusaurus users configure this plugin through the preset options.
- Preset options
- Plugin 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: [],
},
},
],
],
};
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: