2020-11-30 08:07:08 -05:00
---
2021-11-10 01:08:50 -05:00
sidebar_position: 3
2022-05-28 07:07:45 -04:00
slug: /api/plugins/@docusaurus/plugin-content-pages
2020-11-30 08:07:08 -05:00
---
2022-05-28 07:07:45 -04:00
# 📦 plugin-content-pages
2021-11-10 05:38:23 -05:00
import APITable from '@site/src/components/APITable';
2022-12-30 09:08:28 -05:00
The default pages plugin for Docusaurus. The classic template ships with this plugin with default configurations. This plugin provides [creating pages](guides/creating-pages.mdx) functionality.
2020-11-30 08:07:08 -05:00
2021-03-19 06:00:41 -04:00
## Installation {#installation}
2020-11-30 08:07:08 -05:00
```bash npm2yarn
npm install --save @docusaurus/plugin-content-pages
```
:::tip
2021-08-10 06:32:44 -04:00
If you use the preset `@docusaurus/preset-classic`, you don't need to install this plugin as a dependency.
2024-01-12 10:09:45 -05:00
You can configure this plugin through the [preset options](../../using-plugins.mdx#docusauruspreset-classic).
2020-11-30 08:07:08 -05:00
:::
2021-03-19 06:00:41 -04:00
## Configuration {#configuration}
2020-11-30 08:07:08 -05:00
2021-08-04 10:35:17 -04:00
Accepted fields:
2022-06-05 22:52:19 -04:00
```mdx-code-block
2021-11-10 05:38:23 -05:00
<APITable>
2022-06-05 22:52:19 -04:00
```
2021-08-04 10:35:17 -04:00
| 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. |
2021-08-10 06:32:44 -04:00
| `routeBasePath` | `string` | `'/'` | URL route for the pages section of your site. **DO NOT** include a trailing slash. |
2021-08-04 10:35:17 -04:00
| `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. |
| `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. |
2022-06-05 22:52:19 -04:00
```mdx-code-block
2021-11-10 05:38:23 -05:00
</APITable>
2022-06-05 22:52:19 -04:00
```
2021-08-04 10:35:17 -04:00
2021-12-28 08:23:27 -05:00
### Example configuration {#ex-config}
2021-08-10 06:32:44 -04:00
2021-12-28 08:23:27 -05:00
You can configure this plugin through preset options or plugin options.
2021-08-10 06:32:44 -04:00
:::tip
2021-12-28 08:23:27 -05:00
Most Docusaurus users configure this plugin through the preset options.
2021-08-10 06:32:44 -04:00
:::
2021-12-28 08:23:27 -05:00
```js config-tabs
2022-01-06 06:31:58 -05:00
// Preset Options: pages
// Plugin Options: @docusaurus/plugin-content-pages
2021-12-28 08:23:27 -05:00
2021-08-10 06:32:44 -04:00
const config = {
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',
2023-10-13 20:46:03 -04:00
remarkPlugins: [require('./my-remark-plugin')],
2021-08-10 06:32:44 -04:00
rehypePlugins: [],
beforeDefaultRemarkPlugins: [],
beforeDefaultRehypePlugins: [],
};
```
2022-11-03 09:31:41 -04:00
## Markdown front matter {#markdown-front-matter}
2023-06-15 10:07:00 -04:00
Markdown pages can use the following Markdown [front matter](../../guides/markdown-features/markdown-features-intro.mdx#front-matter) metadata fields, enclosed by a line `---` on either side.
2022-11-03 09:31:41 -04:00
Accepted fields:
```mdx-code-block
<APITable>
```
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `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. |
2023-06-15 10:07:00 -04:00
| `keywords` | `string[]` | `undefined` | Keywords meta tag, which will become the `<meta name="keywords" content="keyword1,keyword2,..."/>` in `<head>`, used by search engines. |
2023-11-16 11:10:11 -05:00
| `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. |
2023-06-15 10:07:00 -04:00
| `wrapperClassName` | `string` | | Class name to be added to the wrapper element to allow targeting specific page content. |
2022-11-03 09:31:41 -04:00
| `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. |
```mdx-code-block
</APITable>
```
Example:
```md
---
title: Markdown Page
description: Markdown page SEO description
2023-01-19 08:39:07 -05:00
wrapperClassName: markdown-page
2022-11-03 09:31:41 -04:00
hide_table_of_contents: false
draft: true
---
Markdown page content
```
2021-03-19 06:00:41 -04:00
## i18n {#i18n}
2021-01-19 11:26:31 -05:00
2022-12-30 09:08:28 -05:00
Read the [i18n introduction](../../i18n/i18n-introduction.mdx) first.
2021-01-19 11:26:31 -05:00
2021-03-19 06:00:41 -04:00
### Translation files location {#translation-files-location}
2021-01-19 11:26:31 -05:00
2021-12-21 08:56:29 -05:00
- **Base path**: `website/i18n/[locale]/docusaurus-plugin-content-pages`
- **Multi-instance path**: `website/i18n/[locale]/docusaurus-plugin-content-pages-[pluginId]`
2022-12-30 09:08:28 -05:00
- **JSON files**: extracted with [`docusaurus write-translations`](../../cli.mdx#docusaurus-write-translations-sitedir)
2021-12-21 08:56:29 -05:00
- **Markdown files**: `website/i18n/[locale]/docusaurus-plugin-content-pages`
2021-01-19 11:26:31 -05:00
2021-03-19 06:00:41 -04:00
### Example file-system structure {#example-file-system-structure}
2021-01-19 11:26:31 -05:00
```bash
2021-12-21 08:56:29 -05:00
website/i18n/[locale]/docusaurus-plugin-content-pages
2021-01-19 11:26:31 -05:00
│
│ # translations for website/src/pages
├── first-markdown-page.md
└── second-markdown-page.md
```
