π¦ plugin-content-docs
Provides the Docs functionality and is the default docs plugin for Docusaurus.
Installationβ
- npm
- Yarn
npm install --save @docusaurus/plugin-content-docs
yarn add @docusaurus/plugin-content-docs
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 | 'docs' | Path to the docs content directory on the file system, relative to site directory. |
editUrl | string | EditUrlFunction | undefined | Base URL to edit your site. The final URL is computed by editUrl + relativeDocPath . Using a function allows more nuanced control for each file. Omitting this variable entirely will disable edit links. |
editLocalizedFiles | boolean | false | The edit URL will target the localized file, instead of the original unlocalized file. Ignored when editUrl is a function. |
editCurrentVersion | boolean | false | The edit URL will always target the current version doc instead of older versions. Ignored when editUrl is a function. |
routeBasePath | string | 'docs' | URL route for the docs section of your site. DO NOT include a trailing slash. Use / for shipping docs without base path. |
tagsBasePath | string | 'tags' | URL route for the tags list page of your site. It is prepended to the routeBasePath . |
include | string[] | ['**/*.{md,mdx}'] | Array of glob patterns matching Markdown files to be built, relative to the content path. |
exclude | string[] | See example configuration | Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the include option. |
sidebarPath | false | string | undefined | Path to sidebar configuration. Use false to disable sidebars, or undefined to create a fully autogenerated sidebar. |
sidebarCollapsible | boolean | true | Whether sidebar categories are collapsible by default. See also Collapsible categories |
sidebarCollapsed | boolean | true | Whether sidebar categories are collapsed by default. See also Expanded categories by default |
sidebarItemsGenerator | SidebarGenerator | Omitted | Function used to replace the sidebar items of type 'autogenerated' with real sidebar items (docs, categories, links...). See also Customize the sidebar items generator |
numberPrefixParser | boolean | PrefixParser | Omitted | Custom parsing logic to extract number prefixes from file names. Use false to disable this behavior and leave the docs untouched, and true to use the default parser. See also Using number prefixes |
docLayoutComponent | string | '@theme/DocPage' | Root layout component of each doc page. Provides the version data context, and is not unmounted when switching docs. |
docItemComponent | string | '@theme/DocItem' | Main doc container, with TOC, pagination, etc. |
docTagsListComponent | string | '@theme/DocTagsListPage' | Root component of the tags list page |
docTagDocListComponent | string | '@theme/DocTagDocListPage' | Root component of the "docs containing tag X" page. |
docCategoryGeneratedIndexComponent | string | '@theme/DocCategoryGeneratedIndexPage' | Root component of the generated category index 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. |
showLastUpdateAuthor | boolean | false | Whether to display the author who last updated the doc. |
showLastUpdateTime | boolean | false | Whether to display the last date the doc was updated. |
breadcrumbs | boolean | true | Enable or disable the breadcrumbs on doc pages. |
disableVersioning | boolean | false | Explicitly disable versioning even when multiple versions exist. This will make the site only include the current version. Will error if includeCurrentVersion: false and disableVersioning: true . |
includeCurrentVersion | boolean | true | Include the current version of your docs. |
lastVersion | string | First version in versions.json | The version navigated to in priority and displayed by default for docs navbar items. |
onlyIncludeVersions | string[] | All versions available | Only include a subset of all available versions. |
versions | VersionsConfig | {} | Independent customization of each version's properties. |
Typesβ
EditUrlFunction
β
type EditUrlFunction = (params: {
version: string;
versionDocsDirPath: string;
docPath: string;
permalink: string;
locale: string;
}) => string | undefined;
PrefixParser
β
type PrefixParser = (filename: string) => {
filename: string;
numberPrefix?: number;
};
SidebarGenerator
β
type SidebarGenerator = (generatorArgs: {
/** The sidebar item with type "autogenerated" to be transformed. */
item: {type: 'autogenerated'; dirName: string};
/** Useful metadata for the version this sidebar belongs to. */
version: {contentPath: string; versionName: string};
/** All the docs of that version (unfiltered). */
docs: {
id: string;
title: string;
frontMatter: DocFrontMatter & Record<string, unknown>;
source: string;
sourceDirName: string;
sidebarPosition?: number | undefined;
}[];
/** Number prefix parser configured for this plugin. */
numberPrefixParser: PrefixParser;
/** The default category index matcher which you can override. */
isCategoryIndex: CategoryIndexMatcher;
/**
* key is the path relative to the doc content directory, value is the
* category metadata file's content.
*/
categoriesMetadata: {[filePath: string]: CategoryMetadata};
/**
* Useful to re-use/enhance the default sidebar generation logic from
* Docusaurus.
*/
defaultSidebarItemsGenerator: SidebarGenerator;
// Returns an array of sidebar items β same as what you can declare in
// sidebars.js, except for shorthands. See https://docusaurus.io/docs/sidebar/items
}) => Promise<SidebarItem[]>;
type CategoryIndexMatcher = (param: {
/** The file name, without extension */
fileName: string;
/**
* The list of directories, from lowest level to highest.
* If there's no dir name, directories is ['.']
*/
directories: string[];
/** The extension, with a leading dot */
extension: string;
}) => boolean;
VersionsConfig
β
type VersionsConfig = {
[versionName: string]: {
/**
* The base path of the version, will be appended to `baseUrl` +
* `routeBasePath`.
*/
path?: string;
/** The label of the version to be used in badges, dropdowns, etc. */
label?: string;
/** The banner to show at the top of a doc of that version. */
banner?: 'none' | 'unreleased' | 'unmaintained';
/** Show a badge with the version label at the top of each doc. */
badge?: boolean;
/** Add a custom class name to the <html> element of each doc */
className?: string;
};
};
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',
{
docs: {
path: 'docs',
breadcrumbs: true,
// Simple use-case: string editUrl
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
// Advanced use-case: functional editUrl
editUrl: ({versionDocsDirPath, docPath}) =>
`https://github.com/facebook/docusaurus/edit/main/website/${versionDocsDirPath}/${docPath}`,
editLocalizedFiles: false,
editCurrentVersion: false,
routeBasePath: 'docs',
include: ['**/*.md', '**/*.mdx'],
exclude: [
'**/_*.{js,jsx,ts,tsx,md,mdx}',
'**/_*/**',
'**/*.test.{js,jsx,ts,tsx}',
'**/__tests__/**',
],
sidebarPath: 'sidebars.js',
async sidebarItemsGenerator({
defaultSidebarItemsGenerator,
numberPrefixParser,
item,
version,
docs,
isCategoryIndex,
}) {
// Use the provided data to generate a custom sidebar slice
return [
{type: 'doc', id: 'intro'},
{
type: 'category',
label: 'Tutorials',
items: [
{type: 'doc', id: 'tutorial1'},
{type: 'doc', id: 'tutorial2'},
],
},
];
},
numberPrefixParser(filename) {
// Implement your own logic to extract a potential number prefix
const numberPrefix = findNumberPrefix(filename);
// Prefix found: return it with the cleaned filename
if (numberPrefix) {
return {
numberPrefix,
filename: filename.replace(prefix, ''),
};
}
// No number prefix found
return {numberPrefix: undefined, filename};
},
docLayoutComponent: '@theme/DocPage',
docItemComponent: '@theme/DocItem',
remarkPlugins: [require('remark-math')],
rehypePlugins: [],
beforeDefaultRemarkPlugins: [],
beforeDefaultRehypePlugins: [],
showLastUpdateAuthor: false,
showLastUpdateTime: false,
disableVersioning: false,
includeCurrentVersion: true,
lastVersion: undefined,
versions: {
current: {
label: 'Android SDK v2.0.0 (WIP)',
path: 'android-2.0.0',
banner: 'none',
},
'1.0.0': {
label: 'Android SDK v1.0.0',
path: 'android-1.0.0',
banner: 'unmaintained',
},
},
onlyIncludeVersions: ['current', '1.0.0', '2.0.0'],
},
},
],
],
};
If you are using a standalone plugin, provide options directly to the plugin:
docusaurus.config.js
module.exports = {
plugins: [
[
'@docusaurus/plugin-content-docs',
{
path: 'docs',
breadcrumbs: true,
// Simple use-case: string editUrl
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
// Advanced use-case: functional editUrl
editUrl: ({versionDocsDirPath, docPath}) =>
`https://github.com/facebook/docusaurus/edit/main/website/${versionDocsDirPath}/${docPath}`,
editLocalizedFiles: false,
editCurrentVersion: false,
routeBasePath: 'docs',
include: ['**/*.md', '**/*.mdx'],
exclude: [
'**/_*.{js,jsx,ts,tsx,md,mdx}',
'**/_*/**',
'**/*.test.{js,jsx,ts,tsx}',
'**/__tests__/**',
],
sidebarPath: 'sidebars.js',
async sidebarItemsGenerator({
defaultSidebarItemsGenerator,
numberPrefixParser,
item,
version,
docs,
isCategoryIndex,
}) {
// Use the provided data to generate a custom sidebar slice
return [
{type: 'doc', id: 'intro'},
{
type: 'category',
label: 'Tutorials',
items: [
{type: 'doc', id: 'tutorial1'},
{type: 'doc', id: 'tutorial2'},
],
},
];
},
numberPrefixParser(filename) {
// Implement your own logic to extract a potential number prefix
const numberPrefix = findNumberPrefix(filename);
// Prefix found: return it with the cleaned filename
if (numberPrefix) {
return {
numberPrefix,
filename: filename.replace(prefix, ''),
};
}
// No number prefix found
return {numberPrefix: undefined, filename};
},
docLayoutComponent: '@theme/DocPage',
docItemComponent: '@theme/DocItem',
remarkPlugins: [require('remark-math')],
rehypePlugins: [],
beforeDefaultRemarkPlugins: [],
beforeDefaultRehypePlugins: [],
showLastUpdateAuthor: false,
showLastUpdateTime: false,
disableVersioning: false,
includeCurrentVersion: true,
lastVersion: undefined,
versions: {
current: {
label: 'Android SDK v2.0.0 (WIP)',
path: 'android-2.0.0',
banner: 'none',
},
'1.0.0': {
label: 'Android SDK v1.0.0',
path: 'android-1.0.0',
banner: 'unmaintained',
},
},
onlyIncludeVersions: ['current', '1.0.0', '2.0.0'],
},
],
],
};
Markdown front matterβ
Markdown documents can use the following Markdown front matter metadata fields, enclosed by a line ---
on either side.
Accepted fields:
Name | Type | Default | Description |
---|---|---|---|
id | string | file path (including folders, without the extension) | A unique document ID. |
title | string | Markdown title or id | The text title of your document. Used for the page metadata and as a fallback value in multiple places (sidebar, next/previous buttons...). Automatically added at the top of your doc if it does not contain any Markdown title. |
pagination_label | string | sidebar_label or title | The text used in the document next/previous buttons for this document. |
sidebar_label | string | title | The text shown in the document sidebar for this document. |
sidebar_position | number | Default ordering | Controls the position of a doc inside the generated sidebar slice when using autogenerated sidebar items. See also Autogenerated sidebar metadata. |
sidebar_class_name | string | undefined | Gives the corresponding sidebar label a special class name when using autogenerated sidebars. |
sidebar_custom_props | string | undefined | Assign custom metadata to the sidebar item referencing this doc. |
displayed_sidebar | string | undefined | Force the display of a given sidebar when browsing the current document. Read the multiple sidebars guide for details. |
hide_title | boolean | false | Whether to hide the title at the top of the doc. It only hides a title declared through the front matter, and have no effect on a Markdown title at the top of your document. |
hide_table_of_contents | boolean | false | Whether to hide the table of contents to the right. |
toc_min_heading_level | number | 2 | The minimum heading level shown in the table of contents. Must be between 2 and 6 and lower or equal to the max value. |
toc_max_heading_level | number | 3 | The max heading level shown in the table of contents. Must be between 2 and 6. |
pagination_next | string | null | Next doc in the sidebar | The ID of the documentation you want the "Next" pagination to link to. Use null to disable showing "Next" for this page. |
pagination_prev | string | null | Previous doc in the sidebar | The ID of the documentation you want the "Previous" pagination to link to. Use null to disable showing "Previous" for this page. |
parse_number_prefixes | boolean | numberPrefixParser plugin option | Whether number prefix parsing is disabled on this doc. See also Using number prefixes. |
custom_edit_url | string | Computed using the editUrl plugin option | The URL for editing this document. |
keywords | string[] | undefined | Keywords meta tag for the document page, for search engines. |
description | string | The first line of Markdown content | The description of your document, which will become the <meta name="description" content="..."/> and <meta property="og:description" content="..."/> in <head> , used by search engines. |
image | string | undefined | Cover or thumbnail image that will be used when displaying the link to your post. |
slug | string | File path | Allows to customize the document URL (/<routeBasePath>/<slug> ). Support multiple patterns: slug: my-doc , slug: /my/path/myDoc , slug: / . |
tags | Tag[] | undefined | A list of strings or objects of two string fields label and permalink to tag to your docs. |
draft | boolean | false | A boolean flag to indicate that a document is a work-in-progress. Draft documents will only be displayed during development. |
last_update | FileChange | undefined | Allows overriding the last updated author and/or date. Date can be any parsable date string. |
type Tag = string | {label: string; permalink: string};
type FileChange = {date: string; author: string};
Example:
---
id: doc-markdown
title: Docs Markdown Features
hide_title: false
hide_table_of_contents: false
sidebar_label: Markdown
sidebar_position: 3
pagination_label: Markdown features
custom_edit_url: https://github.com/facebook/docusaurus/edit/main/docs/api-doc-markdown.md
description: How do I find you when I cannot solve this problem
keywords:
- docs
- docusaurus
image: https://i.imgur.com/mErPwqL.png
slug: /myDoc
last_update:
date: 1/1/2000
author: custom author name
---
# Markdown Features
My Document Markdown content
i18nβ
Read the i18n introduction first.
Translation files locationβ
- Base path:
website/i18n/[locale]/docusaurus-plugin-content-docs
- Multi-instance path:
website/i18n/[locale]/docusaurus-plugin-content-docs-[pluginId]
- JSON files: extracted with
docusaurus write-translations
- Markdown files:
website/i18n/[locale]/docusaurus-plugin-content-docs/[versionName]
Example file-system structureβ
website/i18n/[locale]/docusaurus-plugin-content-docs
β
β # translations for website/docs
βββ current
β βββ api
β β βββ config.md
β βββ getting-started.md
βββ current.json
β
β # translations for website/versioned_docs/version-1.0.0
βββ version-1.0.0
β βββ api
β β βββ config.md
β βββ getting-started.md
βββ version-1.0.0.json