mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-03 11:22:30 +02:00
chore(v2): prepare v2.0.0-beta.13 release (#6084)
This commit is contained in:
Sébastien Lorber
GitHub
parent
4809a1aab1
commit
ae9a12ff50
107 changed files with 153 additions and 145 deletions
|
|
@ -0,0 +1,520 @@
|
|||
---
|
||||
sidebar_position: 0
|
||||
id: docusaurus.config.js
|
||||
description: API reference for Docusaurus configuration file.
|
||||
slug: /api/docusaurus-config
|
||||
---
|
||||
|
||||
# `docusaurus.config.js`
|
||||
|
||||
## Overview {#overview}
|
||||
|
||||
`docusaurus.config.js` contains configurations for your site and is placed in the root directory of your site.
|
||||
|
||||
## Required fields {#required-fields}
|
||||
|
||||
### `title` {#title}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
Title for your website.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
title: 'Docusaurus',
|
||||
};
|
||||
```
|
||||
|
||||
### `url` {#url}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
URL for your website. This can also be considered the top-level hostname. For example, `https://facebook.github.io` is the URL of https://facebook.github.io/metro/, and `https://docusaurus.io` is the URL for https://docusaurus.io. This field is related to the [baseUrl](#baseurl) field.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
url: 'https://docusaurus.io',
|
||||
};
|
||||
```
|
||||
|
||||
### `baseUrl` {#baseurl}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
Base URL for your site. This can also be considered the path after the host. For example, `/metro/` is the baseUrl of https://facebook.github.io/metro/. For URLs that have no path, the baseUrl should be set to `/`. This field is related to the [url](#url) field.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
baseUrl: '/',
|
||||
};
|
||||
```
|
||||
|
||||
## Optional fields {#optional-fields}
|
||||
|
||||
### `favicon` {#favicon}
|
||||
|
||||
- Type: `string | undefined`
|
||||
|
||||
Path to your site favicon
|
||||
|
||||
Example, if your favicon is in `static/img/favicon.ico`:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
favicon: '/img/favicon.ico',
|
||||
};
|
||||
```
|
||||
|
||||
### `trailingSlash` {#trailing-slash}
|
||||
|
||||
- Type: `boolean | undefined`
|
||||
|
||||
Allow to customize the presence/absence of a trailing slash at the end of URLs/links, and how static HTML files are generated:
|
||||
|
||||
- `undefined` (default): keeps URLs untouched, and emit `/docs/myDoc/index.html` for `/docs/myDoc.md`
|
||||
- `true`: add trailing slashes to URLs/links, and emit `/docs/myDoc/index.html` for `/docs/myDoc.md`
|
||||
- `false`: remove trailing slashes from URLs/links, and emit `/docs/myDoc.html` for `/docs/myDoc.md`
|
||||
|
||||
:::tip
|
||||
|
||||
Each static hosting provider serve static files differently (this behavior may even change over time).
|
||||
|
||||
Refer to the [deployment guide](../deployment.mdx) and [slorber/trailing-slash-guide](https://github.com/slorber/trailing-slash-guide) to choose the appropriate setting.
|
||||
|
||||
:::
|
||||
|
||||
### `i18n` {#i18n}
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
The i18n configuration object to [localize your site](../i18n/i18n-introduction.md).
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'fr'],
|
||||
localeConfigs: {
|
||||
en: {
|
||||
label: 'English',
|
||||
direction: 'ltr',
|
||||
},
|
||||
fr: {
|
||||
label: 'Français',
|
||||
direction: 'ltr',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
- `label`: the label to use for this locale
|
||||
- `direction`: `ltr` (default) or `rtl` (for [right-to-left languages](https://developer.mozilla.org/en-US/docs/Glossary/rtl) like Araric, Hebrew, etc.)
|
||||
|
||||
### `noIndex` {#noindex}
|
||||
|
||||
- Type: `boolean`
|
||||
|
||||
This option adds `<meta name="robots" content="noindex, nofollow">` in pages, to tell search engines to avoid indexing your site (more information [here](https://moz.com/learn/seo/robots-meta-directives)).
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
noIndex: true, // Defaults to `false`
|
||||
};
|
||||
```
|
||||
|
||||
### `onBrokenLinks` {#onbrokenlinks}
|
||||
|
||||
- Type: `'ignore' | 'log' | 'warn' | 'error' | 'throw'`
|
||||
|
||||
The behavior of Docusaurus, when it detects any broken link.
|
||||
|
||||
By default, it throws an error, to ensure you never ship any broken link, but you can lower this security if needed.
|
||||
|
||||
:::note
|
||||
|
||||
The broken links detection is only available for a production build (`docusaurus build`).
|
||||
|
||||
:::
|
||||
|
||||
### `onBrokenMarkdownLinks` {#onbrokenmarkdownlinks}
|
||||
|
||||
- Type: `'ignore' | 'log' | 'warn' | 'error' | 'throw'`
|
||||
|
||||
The behavior of Docusaurus, when it detects any broken markdown link.
|
||||
|
||||
By default, it prints a warning, to let you know about your broken markdown link, but you can change this security if needed.
|
||||
|
||||
### `onDuplicateRoutes` {#onduplicateroutes}
|
||||
|
||||
- Type: `'ignore' | 'log' | 'warn' | 'error' | 'throw'`
|
||||
|
||||
The behavior of Docusaurus when it detects any [duplicate routes](/guides/creating-pages.md#duplicate-routes).
|
||||
|
||||
By default, it displays a warning after you run `yarn start` or `yarn build`.
|
||||
|
||||
### `tagline` {#tagline}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
The tagline for your website.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
tagline:
|
||||
'Docusaurus makes it easy to maintain Open Source documentation websites.',
|
||||
};
|
||||
```
|
||||
|
||||
### `organizationName` {#organizationname}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
The GitHub user or organization that owns the repository. Used by the deployment command.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// Docusaurus' organization is facebook
|
||||
organizationName: 'facebook',
|
||||
};
|
||||
```
|
||||
|
||||
### `projectName` {#projectname}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
The name of the GitHub repository. Used by the deployment command.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
projectName: 'docusaurus',
|
||||
};
|
||||
```
|
||||
|
||||
### `deploymentBranch` {#deploymentbranch}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
The name of the branch to deploy the static files to. Used by the deployment command.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
deploymentBranch: 'gh-pages',
|
||||
};
|
||||
```
|
||||
|
||||
### `githubHost` {#githubhost}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
The hostname of your server. Useful if you are using GitHub Enterprise.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
githubHost: 'github.com',
|
||||
};
|
||||
```
|
||||
|
||||
### `githubPort` {#githubPort}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
The port of your server. Useful if you are using GitHub Enterprise.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
githubPort: '22',
|
||||
};
|
||||
```
|
||||
|
||||
### `themeConfig` {#themeconfig}
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
The [theme configuration](./themes/theme-configuration.md) object, to customize your site UI like navbar, footer.
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
hideableSidebar: false,
|
||||
colorMode: {
|
||||
defaultMode: 'light',
|
||||
disableSwitch: false,
|
||||
respectPrefersColorScheme: true,
|
||||
switchConfig: {
|
||||
darkIcon: '🌙',
|
||||
lightIcon: '\u2600',
|
||||
// React inline style object
|
||||
// see https://reactjs.org/docs/dom-elements.html#style
|
||||
darkIconStyle: {
|
||||
marginLeft: '2px',
|
||||
},
|
||||
lightIconStyle: {
|
||||
marginLeft: '1px',
|
||||
},
|
||||
},
|
||||
},
|
||||
navbar: {
|
||||
title: 'Site Title',
|
||||
logo: {
|
||||
alt: 'Site Logo',
|
||||
src: 'img/logo.svg',
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
items: [
|
||||
{
|
||||
to: 'docs/docusaurus.config.js',
|
||||
activeBasePath: 'docs',
|
||||
label: 'docusaurus.config.js',
|
||||
position: 'left',
|
||||
},
|
||||
// ... other links
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
style: 'dark',
|
||||
links: [
|
||||
{
|
||||
title: 'Docs',
|
||||
items: [
|
||||
{
|
||||
label: 'Docs',
|
||||
to: 'docs/doc1',
|
||||
},
|
||||
],
|
||||
},
|
||||
// ... other links
|
||||
],
|
||||
logo: {
|
||||
alt: 'Facebook Open Source Logo',
|
||||
src: 'https://docusaurus.io/img/oss_logo.png',
|
||||
width: 160,
|
||||
height: 51,
|
||||
},
|
||||
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `plugins` {#plugins}
|
||||
|
||||
<!-- TODO: configuration for plugins -->
|
||||
|
||||
- Type: `any[]`
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [],
|
||||
};
|
||||
```
|
||||
|
||||
### `themes` {#themes}
|
||||
|
||||
<!-- TODO: configuration for plugins -->
|
||||
|
||||
- Type: `any[]`
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themes: [],
|
||||
};
|
||||
```
|
||||
|
||||
### `presets` {#presets}
|
||||
|
||||
<!-- TODO: configuration for presets -->
|
||||
|
||||
- Type: `any[]`
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
presets: [],
|
||||
};
|
||||
```
|
||||
|
||||
### `customFields` {#customfields}
|
||||
|
||||
Docusaurus guards `docusaurus.config.js` from unknown fields. To add a custom field, define it on `customFields`.
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
customFields: {
|
||||
admin: 'endi',
|
||||
superman: 'lol',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Attempting to add unknown field in the config will lead to error in build time:
|
||||
|
||||
```bash
|
||||
Error: The field(s) 'foo', 'bar' are not recognized in docusaurus.config.js
|
||||
```
|
||||
|
||||
### `staticDirectories` {#staticdirectories}
|
||||
|
||||
An array of paths, relative to the site's directory or absolute. Files under these paths will be copied to the build output as-is.
|
||||
|
||||
- Type: `string[]`
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
staticDirectories: ['static'],
|
||||
};
|
||||
```
|
||||
|
||||
### `scripts` {#scripts}
|
||||
|
||||
An array of scripts to load. The values can be either strings or plain objects of attribute-value maps. The `<script>` tags will be inserted in the HTML `<head>`.
|
||||
|
||||
Note that `<script>` added here are render-blocking so you might want to add `async: true`/`defer: true` to the objects.
|
||||
|
||||
- Type: `(string | Object)[]`
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
scripts: [
|
||||
// String format.
|
||||
'https://docusaurus.io/script.js',
|
||||
// Object format.
|
||||
{
|
||||
src: 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
|
||||
async: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### `clientModules` {#clientmodules}
|
||||
|
||||
An array of client modules to load globally on your site:
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
clientModules: [
|
||||
require.resolve('./mySiteGlobalJs.js'),
|
||||
require.resolve('./mySiteGlobalCss.css'),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
See also: [`getClientModules()`](lifecycle-apis.md#getclientmodules).
|
||||
|
||||
### `ssrTemplate` {#ssrtemplate}
|
||||
|
||||
An HTML template written in [Eta's syntax](https://eta.js.org/docs/syntax#syntax-overview) that will be used to render your application. This can be used to set custom attributes on the `body` tags, additional `meta` tags, customize the `viewport`, etc. Please note that Docusaurus will rely on the template to be correctly structured in order to function properly, once you do customize it, you will have to make sure that your template is compliant with the requirements from `upstream`.
|
||||
|
||||
- Type: `string`
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
ssrTemplate: `<!DOCTYPE html>
|
||||
<html <%~ it.htmlAttributes %>>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="generator" content="Docusaurus v<%= it.version %>">
|
||||
<% if (it.noIndex) { %>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<% } %>
|
||||
<%~ it.headTags %>
|
||||
<% it.metaAttributes.forEach((metaAttribute) => { %>
|
||||
<%~ metaAttribute %>
|
||||
<% }); %>
|
||||
<% it.stylesheets.forEach((stylesheet) => { %>
|
||||
<link rel="stylesheet" href="<%= it.baseUrl %><%= stylesheet %>" />
|
||||
<% }); %>
|
||||
<% it.scripts.forEach((script) => { %>
|
||||
<link rel="preload" href="<%= it.baseUrl %><%= script %>" as="script">
|
||||
<% }); %>
|
||||
</head>
|
||||
<body <%~ it.bodyAttributes %>>
|
||||
<%~ it.preBodyTags %>
|
||||
<div id="__docusaurus">
|
||||
<%~ it.appHtml %>
|
||||
</div>
|
||||
<% it.scripts.forEach((script) => { %>
|
||||
<script src="<%= it.baseUrl %><%= script %>"></script>
|
||||
<% }); %>
|
||||
<%~ it.postBodyTags %>
|
||||
</body>
|
||||
</html>`,
|
||||
};
|
||||
```
|
||||
|
||||
### `stylesheets` {#stylesheets}
|
||||
|
||||
An array of CSS sources to load. The values can be either strings or plain objects of attribute-value maps. The `<link>` tags will be inserted in the HTML `<head>`.
|
||||
|
||||
- Type: `(string | Object)[]`
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
stylesheets: [
|
||||
// String format.
|
||||
'https://docusaurus.io/style.css',
|
||||
// Object format.
|
||||
{
|
||||
href: 'http://mydomain.com/style.css',
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### `titleDelimiter` {#titledelimiter}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
A string that will be used as title delimiter in the generated `<title>` tag.
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
titleDelimiter: '🦖', // Defaults to `|`
|
||||
};
|
||||
```
|
||||
|
||||
### `baseUrlIssueBanner` {#baseurlissuebanner}
|
||||
|
||||
- Type: `boolean`
|
||||
|
||||
When enabled, will show a banner in case your site can't load its CSS or JavaScript files, which is a very common issue, often related to a wrong `baseUrl` in site config.
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
baseUrlIssueBanner: true, // Defaults to `true`
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
|
||||
:::caution
|
||||
|
||||
This banner need to inline CSS / JS.
|
||||
|
||||
If you have a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), you should rather disable it.
|
||||
|
||||
:::
|
||||
|
|
@ -0,0 +1,832 @@
|
|||
---
|
||||
sidebar_position: 1
|
||||
id: lifecycle-apis
|
||||
title: Lifecycle APIs
|
||||
slug: /lifecycle-apis
|
||||
toc_max_heading_level: 4
|
||||
---
|
||||
|
||||
:::caution
|
||||
|
||||
This section is a work in progress.
|
||||
|
||||
:::
|
||||
|
||||
Lifecycle APIs are shared by Themes and Plugins.
|
||||
|
||||
## `validateOptions({options, validate})` {#validateoptionsoptions-validate}
|
||||
|
||||
Return validated and normalized options for the plugin. This method is called before the plugin is initialized.You must return options since the returned options will be passed to plugin during initialization.
|
||||
|
||||
### `options` {#options}
|
||||
|
||||
`validateOptions` is called with `options` passed to plugin for validation and normalization.
|
||||
|
||||
### `validate` {#validate}
|
||||
|
||||
`validateOptions` is called with `validate` function which takes a **[Joi](https://www.npmjs.com/package/joi)** schema and options as argument, returns validated and normalized options. `validate` will automatically handle error and validation config.
|
||||
|
||||
:::tip
|
||||
|
||||
[Joi](https://www.npmjs.com/package/joi) is recommended for validation and normalization of options.
|
||||
|
||||
To avoid mixing Joi versions, use `const {Joi} = require("@docusaurus/utils-validation")`
|
||||
|
||||
:::
|
||||
|
||||
If you don't use **[Joi](https://www.npmjs.com/package/joi)** for validation you can throw an Error in case of invalid options and return options in case of success.
|
||||
|
||||
```js {8-11} title="my-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// rest of methods
|
||||
};
|
||||
};
|
||||
|
||||
module.exports.validateOptions = ({options, validate}) => {
|
||||
const validatedOptions = validate(myValidationSchema, options);
|
||||
return validationOptions;
|
||||
};
|
||||
```
|
||||
|
||||
You can also use ES modules style exports.
|
||||
|
||||
```ts {8-11} title="my-plugin/src/index.ts"
|
||||
export default function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// rest of methods
|
||||
};
|
||||
}
|
||||
|
||||
export function validateOptions({options, validate}) {
|
||||
const validatedOptions = validate(myValidationSchema, options);
|
||||
return validationOptions;
|
||||
}
|
||||
```
|
||||
|
||||
## `validateThemeConfig({themeConfig, validate})` {#validatethemeconfigthemeconfig-validate}
|
||||
|
||||
Return validated and normalized configuration for the theme.
|
||||
|
||||
### `themeConfig` {#themeconfig}
|
||||
|
||||
`validateThemeConfig` is called with `themeConfig` provided in `docusaurus.config.js` for validation and normalization.
|
||||
|
||||
### `validate` {#validate-1}
|
||||
|
||||
`validateThemeConfig` is called with `validate` function which takes a **[Joi](https://www.npmjs.com/package/joi)** schema and `themeConfig` as argument, returns validated and normalized options. `validate` will automatically handle error and validation config.
|
||||
|
||||
:::tip
|
||||
|
||||
[Joi](https://www.npmjs.com/package/joi) is recommended for validation and normalization of theme config.
|
||||
|
||||
To avoid mixing Joi versions, use `const {Joi} = require("@docusaurus/utils-validation")`
|
||||
|
||||
:::
|
||||
|
||||
If you don't use **[Joi](https://www.npmjs.com/package/joi)** for validation you can throw an Error in case of invalid options.
|
||||
|
||||
```js {8-11} title="my-theme/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// rest of methods
|
||||
};
|
||||
};
|
||||
|
||||
module.exports.validateThemeConfig = ({themeConfig, validate}) => {
|
||||
const validatedThemeConfig = validate(myValidationSchema, options);
|
||||
return validatedThemeConfig;
|
||||
};
|
||||
```
|
||||
|
||||
You can also use ES modules style exports.
|
||||
|
||||
```ts {8-11} title="my-theme/src/index.ts"
|
||||
export default function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// rest of methods
|
||||
};
|
||||
}
|
||||
|
||||
export function validateThemeConfig({themeConfig, validate}) {
|
||||
const validatedThemeConfig = validate(myValidationSchema, options);
|
||||
return validatedThemeConfig;
|
||||
}
|
||||
```
|
||||
|
||||
## `getPathsToWatch()` {#getpathstowatch}
|
||||
|
||||
Specifies the paths to watch for plugins and themes. The paths are watched by the dev server so that the plugin lifecycles are reloaded when contents in the watched paths change. Note that the plugins and themes modules are initially called with `context` and `options` from Node, which you may use to find the necessary directory information about the site.
|
||||
|
||||
Example:
|
||||
|
||||
```js {5-7} title="docusaurus-plugin/src/index.js"
|
||||
const path = require('path');
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
getPathsToWatch() {
|
||||
const contentPath = path.resolve(context.siteDir, options.path);
|
||||
return [`${contentPath}/**/*.{ts,tsx}`];
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `async loadContent()` {#async-loadcontent}
|
||||
|
||||
Plugins should use this lifecycle to fetch from data sources (filesystem, remote API, headless CMS, etc) or doing some server processing.
|
||||
|
||||
For example, this plugin below return a random integer between 1 to 10 as content;
|
||||
|
||||
```js {5-6} title="docusaurus-plugin/src/index.js"
|
||||
const path = require('path');
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
async loadContent() {
|
||||
return 1 + Math.floor(Math.random() * 10);
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `async contentLoaded({content, actions})` {#async-contentloadedcontent-actions}
|
||||
|
||||
Plugins should use the data loaded in `loadContent` and construct the pages/routes that consume the loaded data (optional).
|
||||
|
||||
### `content` {#content}
|
||||
|
||||
`contentLoaded` will be called _after_ `loadContent` is done, the return value of `loadContent()` will be passed to `contentLoaded` as `content`.
|
||||
|
||||
### `actions` {#actions}
|
||||
|
||||
`actions` contain three functions:
|
||||
|
||||
#### `addRoute(config: RouteConfig): void`
|
||||
|
||||
Create a route to add to the website.
|
||||
|
||||
```typescript
|
||||
interface RouteConfig {
|
||||
path: string;
|
||||
component: string;
|
||||
modules?: RouteModule;
|
||||
routes?: RouteConfig[];
|
||||
exact?: boolean;
|
||||
priority?: number;
|
||||
}
|
||||
interface RouteModule {
|
||||
[module: string]: Module | RouteModule | RouteModule[];
|
||||
}
|
||||
type Module =
|
||||
| {
|
||||
path: string;
|
||||
__import?: boolean;
|
||||
query?: ParsedUrlQueryInput;
|
||||
}
|
||||
| string;
|
||||
```
|
||||
|
||||
#### `createData(name: string, data: any): Promise<string>`
|
||||
|
||||
A function to help you create static data (generally json or string), that you can provide to your routes as props.
|
||||
|
||||
For example, this plugin below create a `/friends` page which display `Your friends are: Yangshun, Sebastien`:
|
||||
|
||||
```jsx title="website/src/components/Friends.js"
|
||||
import React from 'react';
|
||||
|
||||
export default function FriendsComponent({friends}) {
|
||||
return <div>Your friends are {friends.join(',')}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
```js {4-23} title="docusaurus-friends-plugin/src/index.js"
|
||||
export default function friendsPlugin(context, options) {
|
||||
return {
|
||||
name: 'docusaurus-friends-plugin',
|
||||
async contentLoaded({content, actions}) {
|
||||
const {createData, addRoute} = actions;
|
||||
// Create friends.json
|
||||
const friends = ['Yangshun', 'Sebastien'];
|
||||
const friendsJsonPath = await createData(
|
||||
'friends.json',
|
||||
JSON.stringify(friends),
|
||||
);
|
||||
|
||||
// Add the '/friends' routes, and ensure it receives the friends props
|
||||
addRoute({
|
||||
path: '/friends',
|
||||
component: '@site/src/components/Friends.js',
|
||||
modules: {
|
||||
// propName -> JSON file path
|
||||
friends: friendsJsonPath,
|
||||
},
|
||||
exact: true,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
#### `setGlobalData(data: any): void`
|
||||
|
||||
This function permits to create some global plugin data, that can be read from any page, including the pages created by other plugins, and your theme layout.
|
||||
|
||||
This data become accessible to your client-side/theme code, through the [`useGlobalData`](./docusaurus-core.md#useglobaldata) and [`usePluginData`](./docusaurus-core.md#useplugindatapluginname-string-pluginid-string).
|
||||
|
||||
One this data is created, you can access it with the global data hooks APIs.
|
||||
|
||||
:::caution
|
||||
|
||||
Global data is... global: its size affects the loading time of all pages of your site, so try to keep it small.
|
||||
|
||||
Prefer `createData` and page-specific data whenever possible.
|
||||
|
||||
:::
|
||||
|
||||
For example, this plugin below create a `/friends` page which display `Your friends are: Yangshun, Sebastien`:
|
||||
|
||||
```jsx title="website/src/components/Friends.js"
|
||||
import React from 'react';
|
||||
import {usePluginData} from '@docusaurus/useGlobalData';
|
||||
|
||||
export default function FriendsComponent() {
|
||||
const {friends} = usePluginData('my-friends-plugin');
|
||||
return <div>Your friends are {friends.join(',')}</div>;
|
||||
}
|
||||
```
|
||||
|
||||
```js {4-14} title="docusaurus-friends-plugin/src/index.js"
|
||||
export default function friendsPlugin(context, options) {
|
||||
return {
|
||||
name: 'docusaurus-friends-plugin',
|
||||
async contentLoaded({content, actions}) {
|
||||
const {setGlobalData, addRoute} = actions;
|
||||
// Create friends global data
|
||||
setGlobalData({friends: ['Yangshun', 'Sebastien']});
|
||||
|
||||
// Add the '/friends' routes
|
||||
addRoute({
|
||||
path: '/friends',
|
||||
component: '@site/src/components/Friends.js',
|
||||
exact: true,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## `configureWebpack(config, isServer, utils, content)` {#configurewebpackconfig-isserver-utils}
|
||||
|
||||
Modifies the internal webpack config. If the return value is a JavaScript object, it will be merged into the final config using [`webpack-merge`](https://github.com/survivejs/webpack-merge). If it is a function, it will be called and receive `config` as the first argument and an `isServer` flag as the argument argument.
|
||||
|
||||
:::caution
|
||||
|
||||
The API of `configureWebpack` will be modified in the future to accept an object (`configureWebpack({config, isServer, utils, content})`)
|
||||
|
||||
:::
|
||||
|
||||
### `config` {#config}
|
||||
|
||||
`configureWebpack` is called with `config` generated according to client/server build. You may treat this as the base config to be merged with.
|
||||
|
||||
### `isServer` {#isserver}
|
||||
|
||||
`configureWebpack` will be called both in server build and in client build. The server build receives `true` and the client build receives `false` as `isServer`.
|
||||
|
||||
### `utils` {#utils}
|
||||
|
||||
`configureWebpack` also receives an util object:
|
||||
|
||||
- `getStyleLoaders(isServer: boolean, cssOptions: {[key: string]: any}): Loader[]`
|
||||
- `getJSLoader(isServer: boolean, cacheOptions?: {}): Loader | null`
|
||||
|
||||
You may use them to return your webpack configures conditionally.
|
||||
|
||||
For example, this plugin below modify the webpack config to transpile `.foo` file.
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'custom-docusaurus-plugin',
|
||||
// highlight-start
|
||||
configureWebpack(config, isServer, utils) {
|
||||
const {getCacheLoader} = utils;
|
||||
return {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.foo$/,
|
||||
use: [getCacheLoader(isServer), 'my-custom-webpack-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
### `content` {#content}
|
||||
|
||||
`configureWebpack` will be called both with the content loaded by the plugin.
|
||||
|
||||
### Merge strategy {#merge-strategy}
|
||||
|
||||
We merge the Webpack configuration parts of plugins into the global Webpack config using [webpack-merge](https://github.com/survivejs/webpack-merge).
|
||||
|
||||
It is possible to specify the merge strategy. For example, if you want a webpack rule to be prepended instead of appended:
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'custom-docusaurus-plugin',
|
||||
configureWebpack(config, isServer, utils) {
|
||||
return {
|
||||
// highlight-start
|
||||
mergeStrategy: {'module.rules': 'prepend'},
|
||||
module: {rules: [myRuleToPrepend]},
|
||||
// highlight-end
|
||||
};
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
Read the [webpack-merge strategy doc](https://github.com/survivejs/webpack-merge#merging-with-strategies) for more details.
|
||||
|
||||
## `configurePostCss(options)` {#configurepostcssoptions}
|
||||
|
||||
Modifies [`postcssOptions` of `postcss-loader`](https://webpack.js.org/loaders/postcss-loader/#postcssoptions) during the generation of the client bundle.
|
||||
|
||||
Should return the mutated `postcssOptions`.
|
||||
|
||||
By default, `postcssOptions` looks like this:
|
||||
|
||||
```js
|
||||
const postcssOptions = {
|
||||
ident: 'postcss',
|
||||
plugins: [require('autoprefixer')],
|
||||
};
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// highlight-start
|
||||
configurePostCss(postcssOptions) {
|
||||
// Appends new PostCSS plugin.
|
||||
postcssOptions.plugins.push(require('postcss-import'));
|
||||
return postcssOptions;
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `postBuild(props)` {#postbuildprops}
|
||||
|
||||
Called when a (production) build finishes.
|
||||
|
||||
```ts
|
||||
interface Props {
|
||||
siteDir: string;
|
||||
generatedFilesDir: string;
|
||||
siteConfig: DocusaurusConfig;
|
||||
outDir: string;
|
||||
baseUrl: string;
|
||||
headTags: string;
|
||||
preBodyTags: string;
|
||||
postBodyTags: string;
|
||||
routesPaths: string[];
|
||||
plugins: Plugin<any>[];
|
||||
}
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```js {4-11} title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
async postBuild({siteConfig = {}, routesPaths = [], outDir}) {
|
||||
// Print out to console all the rendered routes.
|
||||
routesPaths.map((route) => {
|
||||
console.log(route);
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `extendCli(cli)` {#extendclicli}
|
||||
|
||||
Register an extra command to enhance the CLI of Docusaurus. `cli` is [commander](https://www.npmjs.com/package/commander) object.
|
||||
|
||||
Example:
|
||||
|
||||
```js {4-11} title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
extendCli(cli) {
|
||||
cli
|
||||
.command('roll')
|
||||
.description('Roll a random number between 1 and 1000')
|
||||
.action(() => {
|
||||
console.log(Math.floor(Math.random() * 1000 + 1));
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `injectHtmlTags({content})` {#injecthtmltags}
|
||||
|
||||
Inject head and/or body HTML tags to Docusaurus generated HTML.
|
||||
|
||||
`injectHtmlTags` will be called both with the content loaded by the plugin.
|
||||
|
||||
```typescript
|
||||
function injectHtmlTags(): {
|
||||
headTags?: HtmlTags;
|
||||
preBodyTags?: HtmlTags;
|
||||
postBodyTags?: HtmlTags;
|
||||
};
|
||||
|
||||
type HtmlTags = string | HtmlTagObject | (string | HtmlTagObject)[];
|
||||
|
||||
interface HtmlTagObject {
|
||||
/**
|
||||
* Attributes of the HTML tag
|
||||
* E.g. `{'disabled': true, 'value': 'demo', 'rel': 'preconnect'}`
|
||||
*/
|
||||
attributes?: {
|
||||
[attributeName: string]: string | boolean;
|
||||
};
|
||||
/**
|
||||
* The tag name e.g. `div`, `script`, `link`, `meta`
|
||||
*/
|
||||
tagName: string;
|
||||
/**
|
||||
* The inner HTML
|
||||
*/
|
||||
innerHTML?: string;
|
||||
}
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
loadContent: async () => {
|
||||
return {remoteHeadTags: await fetchHeadTagsFromAPI()};
|
||||
},
|
||||
// highlight-start
|
||||
injectHtmlTags({content}) {
|
||||
return {
|
||||
headTags: [
|
||||
{
|
||||
tagName: 'link',
|
||||
attributes: {
|
||||
rel: 'preconnect',
|
||||
href: 'https://www.github.com',
|
||||
},
|
||||
},
|
||||
...content.remoteHeadTags,
|
||||
],
|
||||
preBodyTags: [
|
||||
{
|
||||
tagName: 'script',
|
||||
attributes: {
|
||||
charset: 'utf-8',
|
||||
src: '/noflash.js',
|
||||
},
|
||||
},
|
||||
],
|
||||
postBodyTags: [`<div> This is post body </div>`],
|
||||
};
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `getThemePath()` {#getthemepath}
|
||||
|
||||
Returns the path to the directory where the theme components can be found. When your users calls `swizzle`, `getThemePath` is called and its returned path is used to find your theme components.
|
||||
|
||||
If you use the folder directory above, your `getThemePath` can be:
|
||||
|
||||
```js {6-8} title="my-theme/src/index.js"
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'name-of-my-theme',
|
||||
getThemePath() {
|
||||
return path.resolve(__dirname, './theme');
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `getTypeScriptThemePath()` {#gettypescriptthemepath}
|
||||
|
||||
Similar to `getThemePath()`, it should return the path to the directory where the source code of TypeScript theme components can be found. Theme components under this path will **not** be resolved by Webpack. Therefore, it is not a replacement of `getThemePath()`. Instead, this path is purely for swizzling TypeScript theme components.
|
||||
|
||||
If you want to support TypeScript component swizzling for your theme, you can make the path returned by `getTypeScriptThemePath()` be your source directory, and make path returned by `getThemePath()` be the compiled JavaScript output.
|
||||
|
||||
Example:
|
||||
|
||||
```js {6-13} title="my-theme/src/index.js"
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'name-of-my-theme',
|
||||
getThemePath() {
|
||||
// Where compiled JavaScript output lives
|
||||
return path.join(__dirname, '..', 'lib', 'theme');
|
||||
},
|
||||
getTypeScriptThemePath() {
|
||||
// Where TypeScript source code lives
|
||||
return path.resolve(__dirname, './theme');
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `getSwizzleComponentList()` {#getswizzlecomponentlist}
|
||||
|
||||
Return a list of stable component that are considered as safe for swizzling. These components will be listed in swizzle component without `--danger`. All the components are considers unstable by default. If an empty array is returned then all components are considered unstable, if `undefined` is returned then all component are considered stable.
|
||||
|
||||
```js {0-12} title="my-theme/src/index.js"
|
||||
const swizzleAllowedComponents = [
|
||||
'CodeBlock',
|
||||
'DocSidebar',
|
||||
'Footer',
|
||||
'NotFound',
|
||||
'SearchBar',
|
||||
'hooks/useTheme',
|
||||
'prism-include-languages',
|
||||
];
|
||||
|
||||
module.exports.getSwizzleComponentList = () => swizzleAllowedComponents;
|
||||
```
|
||||
|
||||
## `getClientModules()` {#getclientmodules}
|
||||
|
||||
Returns an array of paths to the modules that are to be imported in the client bundle. These modules are imported globally before React even renders the initial UI.
|
||||
|
||||
As an example, to make your theme load a `customCss` or `customJs` file path from `options` passed in by the user:
|
||||
|
||||
```js {7-9} title="my-theme/src/index.js"
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function (context, options) {
|
||||
const {customCss, customJs} = options || {};
|
||||
return {
|
||||
name: 'name-of-my-theme',
|
||||
getClientModules() {
|
||||
return [customCss, customJs];
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
<!--
|
||||
For example, the in docusaurus-plugin-content-docs:
|
||||
|
||||
In loadContent, it loads the doc Markdown files based on the specified directory in options (defaulting to docs).
|
||||
In contentLoaded, for each doc Markdown file, a route is created: /doc/installation, /doc/getting-started, etc.
|
||||
-->
|
||||
|
||||
## i18n lifecycles {#i18n-lifecycles}
|
||||
|
||||
### `getTranslationFiles({content})` {#get-translation-files}
|
||||
|
||||
Plugins declare the JSON translation files they want to use.
|
||||
|
||||
Returns translation files `{path: string, content: ChromeI18nJSON}`:
|
||||
|
||||
- Path: relative to the plugin localized folder `i18n/<locale>/pluginName`. Extension `.json` is not necessary.
|
||||
- Content: using the Chrome i18n JSON format
|
||||
|
||||
These files will be written by the [`write-translations` CLI](./cli.md#docusaurus-write-translations-sitedir) to the plugin i18n subfolder, and will be read in the appropriate locale before calling [`translateContent()`](#translate-content) and [`translateThemeConfig()`](#translate-theme-config)
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'my-plugin',
|
||||
// highlight-start
|
||||
async getTranslationFiles({content}) {
|
||||
return [
|
||||
{
|
||||
path: 'sidebar-labels',
|
||||
content: {
|
||||
someSidebarLabel: {
|
||||
message: 'Some Sidebar Label',
|
||||
description: 'A label used in my plugin in the sidebar',
|
||||
},
|
||||
someLabelFromContent: content.myLabel,
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
### `translateContent({content,translationFiles})` {#translate-content}
|
||||
|
||||
Translate the plugin content, using the localized translation files.
|
||||
|
||||
Returns the localized plugin content.
|
||||
|
||||
The `contentLoaded()` lifecycle will be called with the localized plugin content returned by `translateContent()`.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'my-plugin',
|
||||
// highlight-start
|
||||
translateContent({content, translationFiles}) {
|
||||
const myTranslationFile = translationFiles.find(
|
||||
(f) => f.path === 'myTranslationFile',
|
||||
);
|
||||
return {
|
||||
...content,
|
||||
someContentLabel: myTranslationFile.someContentLabel.message,
|
||||
};
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
### `translateThemeConfig({themeConfig,translationFiles})` {#translate-theme-config}
|
||||
|
||||
Translate the site `themeConfig` labels, using the localized translation files.
|
||||
|
||||
Returns the localized `themeConfig`.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'my-theme',
|
||||
// highlight-start
|
||||
translateThemeConfig({themeConfig, translationFiles}) {
|
||||
const myTranslationFile = translationFiles.find(
|
||||
(f) => f.path === 'myTranslationFile',
|
||||
);
|
||||
return {
|
||||
...themeConfig,
|
||||
someThemeConfigLabel: myTranslationFile.someThemeConfigLabel.message,
|
||||
};
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
### `async getDefaultCodeTranslationMessages()` {#get-default-code-translation-messages}
|
||||
|
||||
Themes using the `<Translate>` API can provide default code translation messages.
|
||||
|
||||
It should return messages in `Record<string,string`>, where keys are translation ids and values are messages (without the description) localized using the site current locale.
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'my-theme',
|
||||
// highlight-start
|
||||
async getDefaultCodeTranslationMessages() {
|
||||
return readJsonFile(`${context.i18n.currentLocale}.json`);
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## Example {#example}
|
||||
|
||||
Here's a mind model for a presumptuous plugin implementation.
|
||||
|
||||
```jsx
|
||||
const DEFAULT_OPTIONS = {
|
||||
// Some defaults.
|
||||
};
|
||||
|
||||
// A JavaScript function that returns an object.
|
||||
// `context` is provided by Docusaurus. Example: siteConfig can be accessed from context.
|
||||
// `opts` is the user-defined options.
|
||||
module.exports = function (context, opts) {
|
||||
// Merge defaults with user-defined options.
|
||||
const options = {...DEFAULT_OPTIONS, ...options};
|
||||
|
||||
return {
|
||||
// A compulsory field used as the namespace for directories to cache
|
||||
// the intermediate data for each plugin.
|
||||
// If you're writing your own local plugin, you will want it to
|
||||
// be unique in order not to potentially conflict with imported plugins.
|
||||
// A good way will be to add your own project name within.
|
||||
name: 'docusaurus-my-project-cool-plugin',
|
||||
|
||||
async loadContent() {
|
||||
// The loadContent hook is executed after siteConfig and env has been loaded.
|
||||
// You can return a JavaScript object that will be passed to contentLoaded hook.
|
||||
},
|
||||
|
||||
async contentLoaded({content, actions}) {
|
||||
// The contentLoaded hook is done after loadContent hook is done.
|
||||
// `actions` are set of functional API provided by Docusaurus (e.g. addRoute)
|
||||
},
|
||||
|
||||
async postBuild(props) {
|
||||
// After docusaurus <build> finish.
|
||||
},
|
||||
|
||||
// TODO
|
||||
async postStart(props) {
|
||||
// docusaurus <start> finish
|
||||
},
|
||||
|
||||
// TODO
|
||||
afterDevServer(app, server) {
|
||||
// https://webpack.js.org/configuration/dev-server/#devserverbefore
|
||||
},
|
||||
|
||||
// TODO
|
||||
beforeDevServer(app, server) {
|
||||
// https://webpack.js.org/configuration/dev-server/#devserverafter
|
||||
},
|
||||
|
||||
configureWebpack(config, isServer, utils, content) {
|
||||
// Modify internal webpack config. If returned value is an Object, it
|
||||
// will be merged into the final config using webpack-merge;
|
||||
// If the returned value is a function, it will receive the config as the 1st argument and an isServer flag as the 2nd argument.
|
||||
},
|
||||
|
||||
getPathsToWatch() {
|
||||
// Paths to watch.
|
||||
},
|
||||
|
||||
getThemePath() {
|
||||
// Returns the path to the directory where the theme components can
|
||||
// be found.
|
||||
},
|
||||
|
||||
getClientModules() {
|
||||
// Return an array of paths to the modules that are to be imported
|
||||
// in the client bundle. These modules are imported globally before
|
||||
// React even renders the initial UI.
|
||||
},
|
||||
|
||||
extendCli(cli) {
|
||||
// Register an extra command to enhance the CLI of Docusaurus
|
||||
},
|
||||
|
||||
injectHtmlTags({content}) {
|
||||
// Inject head and/or body HTML tags.
|
||||
},
|
||||
|
||||
async getTranslationFiles({content}) {
|
||||
// Return translation files
|
||||
},
|
||||
|
||||
translateContent({content, translationFiles}) {
|
||||
// translate the plugin content here
|
||||
},
|
||||
|
||||
translateThemeConfig({themeConfig, translationFiles}) {
|
||||
// translate the site themeConfig here
|
||||
},
|
||||
|
||||
async getDefaultCodeTranslationMessages() {
|
||||
// return default theme translations here
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
label: Plugins
|
||||
position: 2
|
||||
link:
|
||||
type: doc
|
||||
id: api/plugins/plugins-overview # Dogfood using a "qualified id"
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
sidebar_position: 0
|
||||
id: plugins-overview
|
||||
title: 'Docusaurus plugins'
|
||||
sidebar_label: Plugins overview
|
||||
slug: '/api/plugins'
|
||||
---
|
||||
|
||||
We provide official Docusaurus plugins.
|
||||
|
||||
## Content plugins {#content-plugins}
|
||||
|
||||
These plugins are responsible for loading your site's content, and creating pages for your theme to render.
|
||||
|
||||
- [@docusaurus/plugin-content-docs](./plugin-content-docs.md)
|
||||
- [@docusaurus/plugin-content-blog](./plugin-content-blog.md)
|
||||
- [@docusaurus/plugin-content-pages](./plugin-content-pages.md)
|
||||
|
||||
## Behavior plugins {#behavior-plugins}
|
||||
|
||||
These plugins will add a useful behavior to your Docusaurus site.
|
||||
|
||||
- [@docusaurus/plugin-debug](./plugin-debug.md)
|
||||
- [@docusaurus/plugin-sitemap](./plugin-sitemap.md)
|
||||
- [@docusaurus/plugin-pwa](./plugin-pwa.md)
|
||||
- [@docusaurus/plugin-client-redirects](./plugin-client-redirects.md)
|
||||
- [@docusaurus/plugin-ideal-image](./plugin-ideal-image.md)
|
||||
- [@docusaurus/plugin-google-analytics](./plugin-google-analytics.md)
|
||||
- [@docusaurus/plugin-google-gtag](./plugin-google-gtag.md)
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
sidebar_position: 4
|
||||
id: plugin-client-redirects
|
||||
title: '📦 plugin-client-redirects'
|
||||
slug: '/api/plugins/@docusaurus/plugin-client-redirects'
|
||||
---
|
||||
|
||||
Docusaurus Plugin to generate **client-side redirects**.
|
||||
|
||||
This plugin will write additional HTML pages to your static site, that redirects the user to your existing Docusaurus pages with JavaScript.
|
||||
|
||||
:::note
|
||||
|
||||
This plugin only create redirects for the production build.
|
||||
|
||||
:::
|
||||
|
||||
:::caution
|
||||
|
||||
It is better to use server-side redirects whenever possible.
|
||||
|
||||
Before using this plugin, you should look if your hosting provider doesn't offer this feature.
|
||||
|
||||
:::
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-client-redirects
|
||||
```
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Main usecase: you have `/myDocusaurusPage`, and you want to redirect to this page from `/myDocusaurusPage.html`:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-client-redirects',
|
||||
{
|
||||
fromExtensions: ['html'],
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
Second usecase: you have `/myDocusaurusPage.html`, and you want to redirect to this page from `/myDocusaurusPage`.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-client-redirects',
|
||||
{
|
||||
toExtensions: ['html'],
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
For custom redirect logic, provide your own `createRedirects` function.
|
||||
|
||||
Let's imagine you change the url of an existing page, you might want to make sure the old url still works:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-client-redirects',
|
||||
{
|
||||
redirects: [
|
||||
{
|
||||
to: '/docs/newDocPath', // string
|
||||
from: ['/docs/oldDocPathFrom2019', '/docs/legacyDocPathFrom2016'], // string | string[]
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
It's possible to use a function to create the redirects for each existing path:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-client-redirects',
|
||||
{
|
||||
createRedirects: function (existingPath) {
|
||||
if (existingPath === '/docs/newDocPath') {
|
||||
return ['/docs/oldDocPathFrom2019', '/docs/legacyDocPathFrom2016']; // string | string[]
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
Finally, it's possible to use all options at the same time:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-client-redirects',
|
||||
{
|
||||
fromExtensions: ['html', 'htm'],
|
||||
toExtensions: ['exe', 'zip'],
|
||||
redirects: [
|
||||
{
|
||||
to: '/docs/newDocPath',
|
||||
from: '/docs/oldDocPath',
|
||||
},
|
||||
],
|
||||
createRedirects: function (existingPath) {
|
||||
if (existingPath === '/docs/newDocPath2') {
|
||||
return ['/docs/oldDocPath2'];
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,282 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
id: plugin-content-blog
|
||||
title: '📦 plugin-content-blog'
|
||||
slug: '/api/plugins/@docusaurus/plugin-content-blog'
|
||||
---
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
Provides the [Blog](blog.mdx) feature and is the default blog plugin for Docusaurus.
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-content-blog
|
||||
```
|
||||
|
||||
:::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](#ex-config-preset).
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `path` | `string` | `'blog'` | Path to the blog content directory on the filesystem, relative to site dir. |
|
||||
| `editUrl` | <code>string \| EditUrlFunction</code> | `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. |
|
||||
| `blogTitle` | `string` | `'Blog'` | Blog page title for better SEO. |
|
||||
| `blogDescription` | `string` | `'Blog'` | Blog page meta description for better SEO. |
|
||||
| `blogSidebarCount` | <code>number \| 'ALL'</code> | `5` | Number of blog post elements to show in the blog sidebar. `'ALL'` to show all blog posts; `0` to disable |
|
||||
| `blogSidebarTitle` | `string` | `'Recent posts'` | Title of the blog sidebar. |
|
||||
| `routeBasePath` | `string` | `'blog'` | URL route for the blog section of your site. **DO NOT** include a trailing slash. Use `/` to put the blog at root path. |
|
||||
| `tagsBasePath` | `string` | `'tags'` | URL route for the tags list page of your site. It is prepended to the `routeBasePath`. |
|
||||
| `archiveBasePath` | `string` | `'/archive'` | URL route for the archive blog section of your site. It is prepended to the `routeBasePath`. **DO NOT** include a trailing slash. |
|
||||
| `include` | `string[]` | `['**/*.{md,mdx}']` | Matching files will be included and processed. |
|
||||
| `exclude` | `string[]` | _See example configuration_ | No route will be created for matching files. |
|
||||
| `postsPerPage` | <code>number \| 'ALL'</code> | `10` | Number of posts to show per page in the listing page. Use `'ALL'` to display all posts on one listing page. |
|
||||
| `blogListComponent` | `string` | `'@theme/BlogListPage'` | Root component of the blog listing page. |
|
||||
| `blogPostComponent` | `string` | `'@theme/BlogPostPage'` | Root component of each blog post page. |
|
||||
| `blogTagsListComponent` | `string` | `'@theme/BlogTagsListPage'` | Root component of the tags list page |
|
||||
| `blogTagsPostsComponent` | `string` | `'@theme/BlogTagsPostsPage'` | Root component of the "posts containing tag" 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. |
|
||||
| `truncateMarker` | `string` | `/<!--\s*(truncate)\s*-->/` | Truncate marker, can be a regex or string. |
|
||||
| `showReadingTime` | `boolean` | `true` | Show estimated reading time for the blog post. |
|
||||
| `readingTime` | `ReadingTimeFunctionOption` | The default reading time | A callback to customize the reading time number displayed. |
|
||||
| `authorsMapPath` | `string` | `'authors.yml'` | Path to the authors map file, relative to the blog content directory specified with `path`. Can also be a `json` file. |
|
||||
| `feedOptions` | _See below_ | `{type: ['rss', 'atom']}` | Blog feed. If undefined, no rss feed will be generated. |
|
||||
| `feedOptions.type` | <code>'rss' \| 'atom' \| 'all'</code> (or array of multiple options) | **Required** | Type of feed to be generated. |
|
||||
| `feedOptions.title` | `string` | `siteConfig.title` | Title of the feed. |
|
||||
| `feedOptions.description` | `string` | <code>\`${siteConfig.title} Blog\`</code> | Description of the feed. |
|
||||
| `feedOptions.copyright` | `string` | `undefined` | Copyright message. |
|
||||
| `feedOptions.language` | `string` (See [documentation](http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes) for possible values) | `undefined` | Language metadata of the feed. |
|
||||
| `sortPosts` | <code>'descending' \| 'ascending' </code> | `'descending'` | Governs the direction of blog post sorting. |
|
||||
|
||||
</APITable>
|
||||
|
||||
```typescript
|
||||
type EditUrlFunction = (params: {
|
||||
blogDirPath: string;
|
||||
blogPath: string;
|
||||
permalink: string;
|
||||
locale: string;
|
||||
}) => string | undefined;
|
||||
|
||||
type ReadingTimeOptions = {
|
||||
wordsPerMinute: number;
|
||||
wordBound: (char: string) => boolean;
|
||||
};
|
||||
|
||||
type ReadingTimeFunction = (params: {
|
||||
content: string;
|
||||
frontMatter?: BlogPostFrontMatter & Record<string, unknown>;
|
||||
options?: ReadingTimeOptions;
|
||||
}) => number;
|
||||
|
||||
type ReadingTimeFunctionOption = (params: {
|
||||
content: string;
|
||||
frontMatter: BlogPostFrontMatter & Record<string, unknown>;
|
||||
defaultReadingTime: ReadingTimeFunction;
|
||||
}) => number | undefined;
|
||||
```
|
||||
|
||||
## Example configuration {#ex-config}
|
||||
|
||||
Here's an example configuration object.
|
||||
|
||||
You can provide it as [preset options](#ex-config-preset) or [plugin options](#ex-config-plugin).
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the [preset options](#ex-config-preset).
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
const config = {
|
||||
path: 'blog',
|
||||
// Simple use-case: string editUrl
|
||||
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
|
||||
// Advanced use-case: functional editUrl
|
||||
editUrl: ({locale, blogDirPath, blogPath, permalink}) => {
|
||||
return `https://github.com/facebook/docusaurus/edit/main/website/${blogDirPath}/${blogPath}`;
|
||||
},
|
||||
editLocalizedFiles: false,
|
||||
blogTitle: 'Blog title',
|
||||
blogDescription: 'Blog',
|
||||
blogSidebarCount: 5,
|
||||
blogSidebarTitle: 'All our posts',
|
||||
routeBasePath: 'blog',
|
||||
include: ['**/*.{md,mdx}'],
|
||||
exclude: [
|
||||
'**/_*.{js,jsx,ts,tsx,md,mdx}',
|
||||
'**/_*/**',
|
||||
'**/*.test.{js,jsx,ts,tsx}',
|
||||
'**/__tests__/**',
|
||||
],
|
||||
postsPerPage: 10,
|
||||
blogListComponent: '@theme/BlogListPage',
|
||||
blogPostComponent: '@theme/BlogPostPage',
|
||||
blogTagsListComponent: '@theme/BlogTagsListPage',
|
||||
blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
|
||||
remarkPlugins: [require('remark-math')],
|
||||
rehypePlugins: [],
|
||||
beforeDefaultRemarkPlugins: [],
|
||||
beforeDefaultRehypePlugins: [],
|
||||
truncateMarker: /<!--\s*(truncate)\s*-->/,
|
||||
showReadingTime: true,
|
||||
feedOptions: {
|
||||
type: '',
|
||||
title: '',
|
||||
description: '',
|
||||
copyright: '',
|
||||
language: undefined,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Preset options {#ex-config-preset}
|
||||
|
||||
If you use a preset, configure this plugin through the [preset options](presets.md#docusauruspreset-classic):
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
// highlight-start
|
||||
blog: {
|
||||
path: 'blog',
|
||||
// ... configuration object here
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Plugin options {#ex-config-plugin}
|
||||
|
||||
If you are using a standalone plugin, provide options directly to the plugin:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-content-blog',
|
||||
// highlight-start
|
||||
{
|
||||
path: 'blog',
|
||||
// ... configuration object here
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Markdown Frontmatter {#markdown-frontmatter}
|
||||
|
||||
Markdown documents can use the following Markdown FrontMatter metadata fields, enclosed by a line `---` on either side.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `authors` | `Authors` | `undefined` | List of blog post authors (or unique author). Read the [`authors` guide](../../blog.mdx#blog-post-authors) for more explanations. Prefer `authors` over the `author_*` FrontMatter fields, even for single author blog posts. |
|
||||
| `author` | `string` | `undefined` | ⚠️ Prefer using `authors`. The blog post author's name. |
|
||||
| `author_url` | `string` | `undefined` | ⚠️ Prefer using `authors`. The URL that the author's name will be linked to. This could be a GitHub, Twitter, Facebook profile URL, etc. |
|
||||
| `author_image_url` | `string` | `undefined` | ⚠️ Prefer using `authors`. The URL to the author's thumbnail image. |
|
||||
| `author_title` | `string` | `undefined` | ⚠️ Prefer using `authors`. A description of the author. |
|
||||
| `title` | `string` | Markdown title | The blog post title. |
|
||||
| `date` | `string` | File name or file creation time | The blog post creation date. If not specified, this can be extracted from the file or folder name, e.g, `2021-04-15-blog-post.mdx`, `2021-04-15-blog-post/index.mdx`, `2021/04/15/blog-post.mdx`. Otherwise, it is the Markdown file creation time. |
|
||||
| `tags` | `Tag[]` | `undefined` | A list of strings or objects of two string fields `label` and `permalink` to tag to your post. |
|
||||
| `draft` | `boolean` | `false` | A boolean flag to indicate that the blog post is work-in-progress and therefore should not be published yet. However, draft blog posts will be displayed during development. |
|
||||
| `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. |
|
||||
| `keywords` | `string[]` | `undefined` | Keywords meta tag, which will become the `<meta name="keywords" content="keyword1,keyword2,..."/>` in `<head>`, used by 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 blog post url (`/<routeBasePath>/<slug>`). Support multiple patterns: `slug: my-blog-post`, `slug: /my/path/to/blog/post`, slug: `/`. |
|
||||
|
||||
</APITable>
|
||||
|
||||
```typescript
|
||||
type Tag = string | {label: string; permalink: string};
|
||||
|
||||
// An author key references an author from the global plugin authors.yml file
|
||||
type AuthorKey = string;
|
||||
|
||||
type Author = {
|
||||
key?: AuthorKey;
|
||||
name: string;
|
||||
title?: string;
|
||||
url?: string;
|
||||
image_url?: string;
|
||||
};
|
||||
|
||||
// The FrontMatter authors field allows various possible shapes
|
||||
type Authors = AuthorKey | Author | (AuthorKey | Author)[];
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```yml
|
||||
---
|
||||
title: Welcome Docusaurus v2
|
||||
authors:
|
||||
- slorber
|
||||
- yangshun
|
||||
- name: Joel Marcey
|
||||
title: Co-creator of Docusaurus 1
|
||||
url: https://github.com/JoelMarcey
|
||||
image_url: https://github.com/JoelMarcey.png
|
||||
tags: [hello, docusaurus-v2]
|
||||
description: This is my first post on Docusaurus 2.
|
||||
image: https://i.imgur.com/mErPwqL.png
|
||||
hide_table_of_contents: false
|
||||
---
|
||||
A Markdown blog post
|
||||
```
|
||||
|
||||
## i18n {#i18n}
|
||||
|
||||
Read the [i18n introduction](../../i18n/i18n-introduction.md) first.
|
||||
|
||||
### Translation files location {#translation-files-location}
|
||||
|
||||
- **Base path**: `website/i18n/<locale>/docusaurus-plugin-content-blog`
|
||||
- **Multi-instance path**: `website/i18n/<locale>/docusaurus-plugin-content-blog-<pluginId>`
|
||||
- **JSON files**: extracted with [`docusaurus write-translations`](../../cli.md#docusaurus-write-translations-sitedir)
|
||||
- **Markdown files**: `website/i18n/<locale>/docusaurus-plugin-content-blog`
|
||||
|
||||
### Example file-system structure {#example-file-system-structure}
|
||||
|
||||
```bash
|
||||
website/i18n/<locale>/docusaurus-plugin-content-blog
|
||||
│
|
||||
│ # translations for website/blog
|
||||
├── authors.yml
|
||||
├── first-blog-post.md
|
||||
├── second-blog-post.md
|
||||
│
|
||||
│ # translations for the plugin options that will be rendered
|
||||
└── options.json
|
||||
```
|
||||
|
|
@ -0,0 +1,328 @@
|
|||
---
|
||||
sidebar_position: 1
|
||||
id: plugin-content-docs
|
||||
title: '📦 plugin-content-docs'
|
||||
slug: '/api/plugins/@docusaurus/plugin-content-docs'
|
||||
---
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
Provides the [Docs](../../guides/docs/docs-introduction.md) functionality and is the default docs plugin for Docusaurus.
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @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](#ex-config-preset).
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `path` | `string` | `'docs'` | Path to data on filesystem relative to site dir. |
|
||||
| `editUrl` | <code>string \| EditUrlFunction</code> | `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}']` | Matching files will be included and processed. |
|
||||
| `exclude` | `string[]` | _See example configuration_ | No route will be created for matching files. |
|
||||
| `sidebarPath` | <code>false \| string</code> | `undefined` (creates autogenerated sidebar) | Path to sidebar configuration. |
|
||||
| `sidebarCollapsible` | `boolean` | `true` | Whether sidebar categories are collapsible by default. See also [Collapsible categories](/docs/sidebar#collapsible-categories) |
|
||||
| `sidebarCollapsed` | `boolean` | `true` | Whether sidebar categories are collapsed by default. See also [Expanded categories by default](/docs/sidebar#expanded-categories-by-default) |
|
||||
| `sidebarItemsGenerator` | `SidebarGenerator` | _Omitted_ | Function used to replace the sidebar items of type `'autogenerated'` by real sidebar items (docs, categories, links...). See also [Customize the sidebar items generator](/docs/sidebar#customize-the-sidebar-items-generator) |
|
||||
| `numberPrefixParser` | <code>boolean \| PrefixParser</code> | _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](/docs/sidebar#using-number-prefixes) |
|
||||
| `docLayoutComponent` | `string` | `'@theme/DocPage'` | Root Layout component of each doc page. |
|
||||
| `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" 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. |
|
||||
| `disableVersioning` | `boolean` | `false` | Explicitly disable the versioning feature even with versions. This will only include the "current" version (the `/docs` directory). |
|
||||
| `includeCurrentVersion` | `boolean` | `true` | Include the "current" version of your docs (the `/docs` directory). <br /> Tip: turn it off if the current version is a work-in-progress, not ready to be published. |
|
||||
| `lastVersion` | `string` | `current` (alias for the first version to appear in `versions.json` and at the "root" (docs have `path=/docs/myDoc`)) | Set the version navigated to in priority on versioned sites and the one displayed by default in docs navbar items. <br /> Note: the path and label of the last version are configurable. <br /> Tip: `lastVersion: 'current'` makes sense in many cases. |
|
||||
| `versions` | `Versions` | `{}` | Independent customization of each version's properties. |
|
||||
| `onlyIncludeVersions` | `string[]` | All versions available | Only include a subset of all available versions. <br /> Tip: limit to 2 or 3 versions to improve startup and build time in dev and deploy previews. |
|
||||
|
||||
</APITable>
|
||||
|
||||
```typescript
|
||||
type EditUrlFunction = (params: {
|
||||
version: string;
|
||||
versionDocsDirPath: string;
|
||||
docPath: string;
|
||||
permalink: string;
|
||||
locale: string;
|
||||
}) => string | undefined;
|
||||
|
||||
type PrefixParser = (filename: string) => {
|
||||
filename: string;
|
||||
numberPrefix?: number;
|
||||
};
|
||||
|
||||
type SidebarGenerator = (generatorArgs: {
|
||||
item: {type: 'autogenerated'; dirName: string}; // the sidebar item with type "autogenerated"
|
||||
version: {contentPath: string; versionName: string}; // the current version
|
||||
docs: Array<{
|
||||
id: string;
|
||||
frontMatter: DocFrontMatter & Record<string, unknown>;
|
||||
source: string;
|
||||
sourceDirName: string;
|
||||
sidebarPosition?: number | undefined;
|
||||
}>; // all the docs of that version (unfiltered)
|
||||
numberPrefixParser: PrefixParser; // numberPrefixParser configured for this plugin
|
||||
defaultSidebarItemsGenerator: SidebarGenerator; // useful to re-use/enhance default sidebar generation logic from Docusaurus
|
||||
}) => Promise<SidebarItem[]>;
|
||||
|
||||
type Versions = Record<
|
||||
string, // the version's ID
|
||||
{
|
||||
label: string; // the label of the version
|
||||
path: string; // the route path of the version
|
||||
banner: 'none' | 'unreleased' | 'unmaintained'; // the banner to show at the top of a doc of that version
|
||||
badge: boolean; // show a badge with the version name at the top of a doc of that version
|
||||
className; // add a custom className to the <html> element when browsing docs of that version
|
||||
}
|
||||
>;
|
||||
```
|
||||
|
||||
## Example configuration {#ex-config}
|
||||
|
||||
Here's an example configuration object.
|
||||
|
||||
You can provide it as [preset options](#ex-config-preset) or [plugin options](#ex-config-plugin).
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the [preset options](#ex-config-preset).
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
const config = {
|
||||
path: 'docs',
|
||||
// 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',
|
||||
sidebarItemsGenerator: async function ({
|
||||
defaultSidebarItemsGenerator,
|
||||
numberPrefixParser,
|
||||
item,
|
||||
version,
|
||||
docs,
|
||||
}) {
|
||||
// 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: function (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'],
|
||||
};
|
||||
```
|
||||
|
||||
### Preset options {#ex-config-preset}
|
||||
|
||||
If you use a preset, configure this plugin through the [preset options](presets.md#docusauruspreset-classic):
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
// highlight-start
|
||||
docs: {
|
||||
path: 'docs',
|
||||
// ... configuration object here
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Plugin options {#ex-config-plugin}
|
||||
|
||||
If you are using a standalone plugin, provide options directly to the plugin:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-content-docs',
|
||||
// highlight-start
|
||||
{
|
||||
path: 'docs',
|
||||
// ... configuration object here
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Markdown Frontmatter {#markdown-frontmatter}
|
||||
|
||||
Markdown documents can use the following Markdown FrontMatter metadata fields, enclosed by a line `---` on either side.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable>
|
||||
|
||||
| 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](/docs/sidebar#autogenerated-sidebar-metadata). |
|
||||
| `sidebar_class_name` | `string` | `undefined` | Gives the corresponding sidebar label a special class name when using autogenerated sidebars. |
|
||||
| `hide_title` | `boolean` | `false` | Whether to hide the title at the top of the doc. It only hides a title declared through the frontmatter, 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` | <code>string \| null</code> | 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` | <code>string \| null</code> | 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](/docs/sidebar#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. |
|
||||
|
||||
</APITable>
|
||||
|
||||
```typescript
|
||||
type Tag = string | {label: string; permalink: string};
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```yml
|
||||
---
|
||||
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
|
||||
---
|
||||
# Markdown Features
|
||||
|
||||
My Document Markdown content
|
||||
```
|
||||
|
||||
## i18n {#i18n}
|
||||
|
||||
Read the [i18n introduction](../../i18n/i18n-introduction.md) first.
|
||||
|
||||
### Translation files location {#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`](../../cli.md#docusaurus-write-translations-sitedir)
|
||||
- **Markdown files**: `website/i18n/<locale>/docusaurus-plugin-content-docs/<version>`
|
||||
|
||||
### Example file-system structure {#example-file-system-structure}
|
||||
|
||||
```bash
|
||||
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
|
||||
```
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
---
|
||||
sidebar_position: 3
|
||||
id: plugin-content-pages
|
||||
title: '📦 plugin-content-pages'
|
||||
slug: '/api/plugins/@docusaurus/plugin-content-pages'
|
||||
---
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
The default pages plugin for Docusaurus. The classic template ships with this plugin with default configurations. This plugin provides [creating pages](guides/creating-pages.md) functionality.
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @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](#ex-config-preset).
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable>
|
||||
|
||||
| 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. |
|
||||
| `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. |
|
||||
| `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. |
|
||||
|
||||
</APITable>
|
||||
|
||||
## Example configuration {#ex-config}
|
||||
|
||||
Here's an example configuration object.
|
||||
|
||||
You can provide it as [preset options](#ex-config-preset) or [plugin options](#ex-config-plugin).
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the [preset options](#ex-config-preset).
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
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',
|
||||
remarkPlugins: [require('remark-math')],
|
||||
rehypePlugins: [],
|
||||
beforeDefaultRemarkPlugins: [],
|
||||
beforeDefaultRehypePlugins: [],
|
||||
};
|
||||
```
|
||||
|
||||
### Preset options {#ex-config-preset}
|
||||
|
||||
If you use a preset, configure this plugin through the [preset options](presets.md#docusauruspreset-classic):
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
// highlight-start
|
||||
pages: {
|
||||
path: 'src/pages',
|
||||
// ... configuration object here
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Plugin options {#ex-config-plugin}
|
||||
|
||||
If you are using a standalone plugin, provide options directly to the plugin:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-content-pages',
|
||||
// highlight-start
|
||||
{
|
||||
path: 'src/pages',
|
||||
// ... configuration object here
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## i18n {#i18n}
|
||||
|
||||
Read the [i18n introduction](../../i18n/i18n-introduction.md) first.
|
||||
|
||||
### Translation files location {#translation-files-location}
|
||||
|
||||
- **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`](../../cli.md#docusaurus-write-translations-sitedir)
|
||||
- **Markdown files**: `website/i18n/<locale>/docusaurus-plugin-content-pages`
|
||||
|
||||
### Example file-system structure {#example-file-system-structure}
|
||||
|
||||
```bash
|
||||
website/i18n/<locale>/docusaurus-plugin-content-pages
|
||||
│
|
||||
│ # translations for website/src/pages
|
||||
├── first-markdown-page.md
|
||||
└── second-markdown-page.md
|
||||
```
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
sidebar_position: 5
|
||||
id: plugin-debug
|
||||
title: '📦 plugin-debug'
|
||||
slug: '/api/plugins/@docusaurus/plugin-debug'
|
||||
---
|
||||
|
||||
The debug plugin will display useful debug information at [http://localhost:3000/\_\_docusaurus/debug](http://localhost:3000/__docusaurus/debug).
|
||||
|
||||
It is mostly useful for plugin authors, that will be able to inspect more easily the content of the `.docusaurus` folder (like the creates routes), but also be able to inspect data structures that are never written to disk, like the plugin data loaded through the `contentLoaded` lifecycle.
|
||||
|
||||
:::note
|
||||
|
||||
If you report a bug, we will probably ask you to have this plugin turned on in the production, so that we can inspect your deployment config more easily.
|
||||
|
||||
If you don't have any sensitive information, you can keep it on in production [like we do](http://docusaurus.io/__docusaurus/debug).
|
||||
|
||||
:::
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-debug
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below.
|
||||
|
||||
By default, it's enabled in dev, and disabled in prod, to avoid exposing potentially sensitive information.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: ['@docusaurus/plugin-debug'],
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
---
|
||||
sidebar_position: 6
|
||||
id: plugin-google-analytics
|
||||
title: '📦 plugin-google-analytics'
|
||||
slug: '/api/plugins/@docusaurus/plugin-google-analytics'
|
||||
---
|
||||
|
||||
The default [Google Analytics](https://developers.google.com/analytics/devguides/collection/analyticsjs/) plugin. It is a JavaScript library for measuring how users interact with your website **in the production build**. If you are using Google Analytics 4 you might need to consider using [plugin-google-gtag](./plugin-google-gtag.md) instead.
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-google-analytics
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `trackingID` | `string` | **Required** | The tracking ID of your analytics service. |
|
||||
| `anonymizeIP` | `boolean` | `false` | Whether the IP should be anonymized when sending requests. |
|
||||
|
||||
</small>
|
||||
|
||||
## Example configuration {#ex-config}
|
||||
|
||||
Here's an example configuration object.
|
||||
|
||||
You can provide it as [preset options](#ex-config-preset) or [plugin options](#ex-config-plugin).
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the [preset options](#ex-config-preset).
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
const config = {
|
||||
trackingID: 'UA-141789564-1',
|
||||
anonymizeIP: true,
|
||||
};
|
||||
```
|
||||
|
||||
### Preset options {#ex-config-preset}
|
||||
|
||||
If you use a preset, configure this plugin through the [preset options](presets.md#docusauruspreset-classic):
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
// highlight-start
|
||||
googleAnalytics: {
|
||||
trackingID: 'UA-141789564-1',
|
||||
anonymizeIP: true,
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Plugin options {#ex-config-plugin}
|
||||
|
||||
If you are using a standalone plugin, provide options directly to the plugin:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-google-analytics',
|
||||
// highlight-start
|
||||
{
|
||||
trackingID: 'UA-141789564-1',
|
||||
anonymizeIP: true,
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
---
|
||||
sidebar_position: 7
|
||||
id: plugin-google-gtag
|
||||
title: '📦 plugin-google-gtag'
|
||||
slug: '/api/plugins/@docusaurus/plugin-google-gtag'
|
||||
---
|
||||
|
||||
The default [Global Site Tag (gtag.js)](https://developers.google.com/analytics/devguides/collection/gtagjs/) plugin. It is a JavaScript tagging framework and API that allows you to send event data to Google Analytics, Google Ads, and Google Marketing Platform, **in the production build**. This section describes how to configure a Docusaurus site to enable global site tag for Google Analytics.
|
||||
|
||||
:::tip
|
||||
|
||||
You can use [Google's Tag Assistant](https://tagassistant.google.com/) tool to check if your gtag is set up correctly!
|
||||
|
||||
:::
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-google-gtag
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<small>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `trackingID` | `string` | **Required** | The tracking ID of your gtag service. |
|
||||
| `anonymizeIP` | `boolean` | `false` | Whether the IP should be anonymized when sending requests. |
|
||||
|
||||
</small>
|
||||
|
||||
## Example configuration {#ex-config}
|
||||
|
||||
Here's an example configuration object.
|
||||
|
||||
You can provide it as [preset options](#ex-config-preset) or [plugin options](#ex-config-plugin).
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the [preset options](#ex-config-preset).
|
||||
|
||||
:::
|
||||
|
||||
```js
|
||||
const config = {
|
||||
trackingID: 'UA-141789564-1',
|
||||
anonymizeIP: true,
|
||||
};
|
||||
```
|
||||
|
||||
### Preset options {#ex-config-preset}
|
||||
|
||||
If you use a preset, configure this plugin through the [preset options](presets.md#docusauruspreset-classic):
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
// highlight-start
|
||||
gtag: {
|
||||
trackingID: 'UA-141789564-1',
|
||||
anonymizeIP: true,
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Plugin options {#ex-config-plugin}
|
||||
|
||||
If you are using a standalone plugin, provide options directly to the plugin:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-google-gtag',
|
||||
// highlight-start
|
||||
{
|
||||
trackingID: 'UA-141789564-1',
|
||||
anonymizeIP: true,
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
sidebar_position: 8
|
||||
id: plugin-ideal-image
|
||||
title: '📦 plugin-ideal-image'
|
||||
slug: '/api/plugins/@docusaurus/plugin-ideal-image'
|
||||
---
|
||||
|
||||
Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder) **in the production builds**.
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-ideal-image
|
||||
```
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Modify your `docusaurus.config.js`
|
||||
|
||||
```js {3}
|
||||
module.exports = {
|
||||
...
|
||||
plugins: ['@docusaurus/plugin-ideal-image'],
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
## Usage {#usage}
|
||||
|
||||
This plugin supports the PNG and JPG formats only.
|
||||
|
||||
```jsx
|
||||
import Image from '@theme/IdealImage';
|
||||
import thumbnail from './path/to/img.png';
|
||||
|
||||
// your React code
|
||||
<Image img={thumbnail} />
|
||||
|
||||
// or
|
||||
<Image img={require('./path/to/img.png')} />
|
||||
```
|
||||
|
||||
## Options {#options}
|
||||
|
||||
| Option | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `name` | `string` | `ideal-img/[name].[hash:hex:7].[width].[ext]` | Filename template for output files. |
|
||||
| `sizes` | `array` | _original size_ | Specify all widths you want to use. If a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). |
|
||||
| `size` | `integer` | _original size_ | Specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up) |
|
||||
| `min` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. |
|
||||
| `max` | `integer` | | See `min` above |
|
||||
| `steps` | `integer` | `4` | Configure the number of images generated between `min` and `max` (inclusive) |
|
||||
| `quality` | `integer` | `85` | JPEG compression quality |
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
---
|
||||
sidebar_position: 9
|
||||
id: plugin-pwa
|
||||
title: '📦 plugin-pwa'
|
||||
slug: '/api/plugins/@docusaurus/plugin-pwa'
|
||||
---
|
||||
|
||||
Docusaurus Plugin to add PWA support using [Workbox](https://developers.google.com/web/tools/workbox). This plugin generates a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers) in production build only, and allows you to create fully PWA-compliant documentation site with offline and installation support.
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-pwa
|
||||
```
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Create a [PWA manifest](https://web.dev/add-manifest/) at `./static/manifest.json`.
|
||||
|
||||
Modify `docusaurus.config.js` with a minimal PWA config, like:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-pwa',
|
||||
{
|
||||
debug: true,
|
||||
offlineModeActivationStrategies: [
|
||||
'appInstalled',
|
||||
'standalone',
|
||||
'queryString',
|
||||
],
|
||||
pwaHead: [
|
||||
{
|
||||
tagName: 'link',
|
||||
rel: 'icon',
|
||||
href: '/img/docusaurus.png',
|
||||
},
|
||||
{
|
||||
tagName: 'link',
|
||||
rel: 'manifest',
|
||||
href: '/manifest.json', // your PWA manifest
|
||||
},
|
||||
{
|
||||
tagName: 'meta',
|
||||
name: 'theme-color',
|
||||
content: 'rgb(37, 194, 160)',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Progressive Web App {#progressive-web-app}
|
||||
|
||||
Having a service worker installed is not enough to make your application a PWA. You'll need to at least include a [Web App Manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) and have the correct tags in `<head>` ([Options > pwaHead](#pwahead)).
|
||||
|
||||
After deployment, you can use [Lighthouse](https://developers.google.com/web/tools/lighthouse) to run an audit on your site.
|
||||
|
||||
For a more exhaustive list of what it takes for your site to be a PWA, refer to the [PWA Checklist](https://developers.google.com/web/progressive-web-apps/checklist)
|
||||
|
||||
## App installation support {#app-installation-support}
|
||||
|
||||
If your browser supports it, you should be able to install a Docusaurus site as an app.
|
||||
|
||||
|
||||
|
||||
:::note
|
||||
|
||||
App installation requires the https protocol and a valid manifest.
|
||||
|
||||
:::
|
||||
|
||||
## Offline mode (precaching) {#offline-mode-precaching}
|
||||
|
||||
We enable users to browse a Docusaurus site offline, by using service-worker precaching.
|
||||
|
||||
> ### [What is Precaching?](https://developers.google.com/web/tools/workbox/modules/workbox-precaching)
|
||||
>
|
||||
> One feature of service workers is the ability to save a set of files to the cache when the service worker is installing. This is often referred to as "precaching", since you are caching content ahead of the service worker being used.
|
||||
>
|
||||
> The main reason for doing this is that it gives developers control over the cache, meaning they can determine when and how long a file is cached as well as serve it to the browser without going to the network, meaning it can be used to create web apps that work offline.
|
||||
>
|
||||
> Workbox takes a lot of the heavy lifting out of precaching by simplifying the API and ensuring assets are downloaded efficiently.
|
||||
|
||||
By default, offline mode is enabled when the site is installed as an app. See the `offlineModeActivationStrategies` option for details.
|
||||
|
||||
After the site has been precached, the service worker will serve cached responses for later visits. When a new build is deployed along with a new service worker, the new one will begin installing and eventually move to a waiting state. During this waiting state, a reload popup will show and ask the user to reload the page for new content. Until the user either clears the application cache or clicks the `reload` button on the popup, the service worker will continue serving the old content.
|
||||
|
||||
:::caution
|
||||
|
||||
Offline mode / precaching requires downloading all the static assets of the site ahead of time, and can consume unnecessary bandwidth. It may not be a good idea to activate it for all kind of sites.
|
||||
|
||||
:::
|
||||
|
||||
## Options {#options}
|
||||
|
||||
### `debug` {#debug}
|
||||
|
||||
- Type: `boolean`
|
||||
- Default: `false`
|
||||
|
||||
Turn debug mode on:
|
||||
|
||||
- Workbox logs
|
||||
- Additional Docusaurus logs
|
||||
- Unoptimized SW file output
|
||||
- Source maps
|
||||
|
||||
### `offlineModeActivationStrategies` {#offlinemodeactivationstrategies}
|
||||
|
||||
- Type: `Array<'appInstalled' | 'mobile' | 'saveData'| 'queryString' | 'always'>`
|
||||
- Default: `['appInstalled','queryString','standalone']`
|
||||
|
||||
Strategies used to turn the offline mode on:
|
||||
|
||||
- `appInstalled`: activates for users having installed the site as an app (not 100% reliable)
|
||||
- `standalone`: activates for users running the app as standalone (often the case once a PWA is installed)
|
||||
- `queryString`: activates if queryString contains `offlineMode=true` (convenient for PWA debugging)
|
||||
- `mobile`: activates for mobile users (width <= 940px)
|
||||
- `saveData`: activates for users with `navigator.connection.saveData === true`
|
||||
- `always`: activates for all users
|
||||
|
||||
:::caution
|
||||
|
||||
Use this carefully: some users may not like to be forced to use the offline mode.
|
||||
|
||||
:::
|
||||
|
||||
:::danger
|
||||
|
||||
It is not possible to detect if an as a PWA in a very reliable way.
|
||||
|
||||
The `appinstalled` event has been [removed from the specification](https://github.com/w3c/manifest/pull/836), and the [`navigator.getInstalledRelatedApps()`](https://web.dev/get-installed-related-apps/) API is only supported in recent Chrome versions and require `related_applications` declared in the manifest.
|
||||
|
||||
The [`standalone` strategy](https://petelepage.com/blog/2019/07/is-my-pwa-installed/) is a nice fallback to activate the offline mode (at least when running the installed app).
|
||||
|
||||
:::
|
||||
|
||||
### `injectManifestConfig` {#injectmanifestconfig}
|
||||
|
||||
[Workbox options](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.injectManifest) to pass to `workbox.injectManifest()`. This gives you control over which assets will be precached, and be available offline.
|
||||
|
||||
- Type: `InjectManifestOptions`
|
||||
- Default: `{}`
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-pwa',
|
||||
{
|
||||
injectManifestConfig: {
|
||||
manifestTransforms: [
|
||||
//...
|
||||
],
|
||||
modifyURLPrefix: {
|
||||
//...
|
||||
},
|
||||
// We already add regular static assets (html, images...) to be available offline
|
||||
// You can add more files according to your needs
|
||||
globPatterns: ['**/*.{pdf,docx,xlsx}'],
|
||||
// ...
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### `reloadPopup` {#reloadpopup}
|
||||
|
||||
- Type: `string | false`
|
||||
- Default: `'@theme/PwaReloadPopup'`
|
||||
|
||||
Module path to reload popup component. This popup is rendered when a new service worker is waiting to be installed, and we suggest a reload to the user.
|
||||
|
||||
Passing `false` will disable the popup, but this is not recommended: users won't have a way to get up-to-date content.
|
||||
|
||||
A custom component can be used, as long as it accepts `onReload` as a prop. The `onReload` callback should be called when the `reload` button is clicked. This will tell the service worker to install the waiting service worker and reload the page.
|
||||
|
||||
```ts
|
||||
interface PwaReloadPopupProps {
|
||||
onReload: () => void;
|
||||
}
|
||||
```
|
||||
|
||||
The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert).
|
||||
|
||||
|
||||
|
||||
### `pwaHead` {#pwahead}
|
||||
|
||||
- Type: `Array<{ tagName: string } & Record<string,string>>`
|
||||
- Default: `[]`
|
||||
|
||||
Array of objects containing `tagName` and key-value pairs for attributes to inject into the `<head>` tag. Technically you can inject any head tag through this, but it's ideally used for tags to make your site PWA compliant. Here's a list of tag to make your app fully compliant:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-pwa',
|
||||
{
|
||||
pwaHead: [
|
||||
{
|
||||
tagName: 'link',
|
||||
rel: 'icon',
|
||||
href: '/img/docusaurus.png',
|
||||
},
|
||||
{
|
||||
tagName: 'link',
|
||||
rel: 'manifest',
|
||||
href: '/manifest.json',
|
||||
},
|
||||
{
|
||||
tagName: 'meta',
|
||||
name: 'theme-color',
|
||||
content: 'rgb(37, 194, 160)',
|
||||
},
|
||||
{
|
||||
tagName: 'meta',
|
||||
name: 'apple-mobile-web-app-capable',
|
||||
content: 'yes',
|
||||
},
|
||||
{
|
||||
tagName: 'meta',
|
||||
name: 'apple-mobile-web-app-status-bar-style',
|
||||
content: '#000',
|
||||
},
|
||||
{
|
||||
tagName: 'link',
|
||||
rel: 'apple-touch-icon',
|
||||
href: '/img/docusaurus.png',
|
||||
},
|
||||
{
|
||||
tagName: 'link',
|
||||
rel: 'mask-icon',
|
||||
href: '/img/docusaurus.svg',
|
||||
color: 'rgb(37, 194, 160)',
|
||||
},
|
||||
{
|
||||
tagName: 'meta',
|
||||
name: 'msapplication-TileImage',
|
||||
content: '/img/docusaurus.png',
|
||||
},
|
||||
{
|
||||
tagName: 'meta',
|
||||
name: 'msapplication-TileColor',
|
||||
content: '#000',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### `swCustom` {#swcustom}
|
||||
|
||||
- Type: `string | undefined`
|
||||
- Default: `undefined`
|
||||
|
||||
Useful for additional Workbox rules. You can do whatever a service worker can do here, and use the full power of workbox libraries. The code is transpiled, so you can use modern ES6+ syntax here.
|
||||
|
||||
For example, to cache files from external routes:
|
||||
|
||||
```js
|
||||
import {registerRoute} from 'workbox-routing';
|
||||
import {StaleWhileRevalidate} from 'workbox-strategies';
|
||||
|
||||
// default fn export receiving some useful params
|
||||
export default function swCustom(params) {
|
||||
const {
|
||||
debug, // :boolean
|
||||
offlineMode, // :boolean
|
||||
} = params;
|
||||
|
||||
// Cache responses from external resources
|
||||
registerRoute((context) => {
|
||||
return [
|
||||
/graph\.facebook\.com\/.*\/picture/,
|
||||
/netlify\.com\/img/,
|
||||
/avatars1\.githubusercontent/,
|
||||
].some((regex) => context.url.href.match(regex));
|
||||
}, new StaleWhileRevalidate());
|
||||
}
|
||||
```
|
||||
|
||||
The module should have a `default` function export, and receives some params.
|
||||
|
||||
### `swRegister` {#swregister}
|
||||
|
||||
- Type: `string | false`
|
||||
- Default: `'docusaurus-plugin-pwa/src/registerSW.js'`
|
||||
|
||||
Adds an entry before the Docusaurus app so that registration can happen before the app runs. The default `registerSW.js` file is enough for simple registration.
|
||||
|
||||
Passing `false` will disable registration entirely.
|
||||
|
||||
## Manifest example {#manifest-example}
|
||||
|
||||
The Docusaurus site manifest can serve as an inspiration:
|
||||
|
||||
```mdx-code-block
|
||||
import CodeBlock from '@theme/CodeBlock';
|
||||
|
||||
<CodeBlock className="language-json">
|
||||
{JSON.stringify(require("@site/static/manifest.json"),null,2)}
|
||||
</CodeBlock>
|
||||
```
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
sidebar_position: 10
|
||||
id: plugin-sitemap
|
||||
title: '📦 plugin-sitemap'
|
||||
slug: '/api/plugins/@docusaurus/plugin-sitemap'
|
||||
---
|
||||
|
||||
This plugin creates sitemap for your site so that search engine crawlers can crawl your site more accurately.
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-sitemap
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency. You can also configure it through the [classic preset options](presets.md#docusauruspreset-classic) instead of doing it like below.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-sitemap',
|
||||
{
|
||||
changefreq: 'weekly',
|
||||
priority: 0.5,
|
||||
trailingSlash: false,
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
label: Themes
|
||||
position: 3
|
||||
link:
|
||||
type: doc
|
||||
id: themes-overview # Dogfood using a "local id"
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
---
|
||||
sidebar_position: 0
|
||||
id: themes-overview
|
||||
title: 'Docusaurus themes'
|
||||
sidebar_label: Themes overview
|
||||
slug: '/api/themes'
|
||||
---
|
||||
|
||||
We provide official Docusaurus themes.
|
||||
|
||||
## Main themes {#main-themes}
|
||||
|
||||
The main themes implement the user interface for the [docs](../plugins/plugin-content-docs.md), [blog](../plugins/plugin-content-blog.md) and [pages](../plugins/plugin-content-pages.md) plugins.
|
||||
|
||||
- [@docusaurus/theme-classic](./theme-classic.md)
|
||||
- 🚧 other themes are planned
|
||||
|
||||
:::caution
|
||||
|
||||
The goal is to have all themes share the exact same features, user-experience and configuration.
|
||||
|
||||
Only the UI design and underlying styling framework should change, and you should be able to change theme easily.
|
||||
|
||||
We are not there yet: only the classic theme is production ready.
|
||||
|
||||
:::
|
||||
|
||||
## Enhancement themes {#enhancement-themes}
|
||||
|
||||
These themes will enhance the existing main themes with additional user-interface related features.
|
||||
|
||||
- [@docusaurus/theme-live-codeblock](./theme-live-codeblock.md)
|
||||
- [@docusaurus/theme-search-algolia](./theme-search-algolia.md)
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
id: theme-classic
|
||||
title: '📦 theme-classic'
|
||||
slug: '/api/themes/@docusaurus/theme-classic'
|
||||
---
|
||||
|
||||
The classic theme for Docusaurus.
|
||||
|
||||
You can refer to the [theme configuration page](theme-configuration.md) for more details on the configuration.
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/theme-classic
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency.
|
||||
|
||||
:::
|
||||
|
|
@ -0,0 +1,862 @@
|
|||
---
|
||||
sidebar_position: 1
|
||||
id: theme-configuration
|
||||
title: 'Theme configuration'
|
||||
sidebar_label: 'Configuration'
|
||||
slug: '/api/themes/configuration'
|
||||
toc_max_heading_level: 4
|
||||
---
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
This configuration applies to all [main themes](./overview.md).
|
||||
|
||||
## Common {#common}
|
||||
|
||||
### Color mode {#color-mode---dark-mode}
|
||||
|
||||
The classic theme provides by default light and dark mode support, with a navbar switch for the user.
|
||||
|
||||
It is possible to customize the color mode support within the `colorMode` object.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `defaultMode` | <code>'light' \| 'dark'</code> | `'light'` | The color mode when user first visits the site. |
|
||||
| `disableSwitch` | `boolean` | `false` | Hides the switch in the navbar. Useful if you want to support a single color mode. |
|
||||
| `respectPrefersColorScheme` | `boolean` | `false` | Whether to use the `prefers-color-scheme` media-query, using user system preferences, instead of the hardcoded `defaultMode`. |
|
||||
| `switchConfig` | _See below_ | _See below_ | Dark/light switch icon options. |
|
||||
| `switchConfig.darkIcon` | `string` | `'🌜'` | Icon for the switch while in dark mode. |
|
||||
| `switchConfig.darkIconStyle` | JSX style object (see [documentation](https://reactjs.org/docs/dom-elements.html#style)) | `{}` | CSS to apply to dark icon. |
|
||||
| `switchConfig.lightIcon` | `string` | `'🌞'` | Icon for the switch while in light mode. |
|
||||
| `switchConfig.lightIconStyle` | JSX style object | `{}` | CSS to apply to light icon. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
// highlight-start
|
||||
colorMode: {
|
||||
defaultMode: 'light',
|
||||
disableSwitch: false,
|
||||
respectPrefersColorScheme: false,
|
||||
switchConfig: {
|
||||
darkIcon: '🌙',
|
||||
darkIconStyle: {
|
||||
marginLeft: '2px',
|
||||
},
|
||||
// Unicode icons such as '\u2600' will work
|
||||
// Unicode with 5 chars require brackets: '\u{1F602}'
|
||||
lightIcon: '\u{1F602}',
|
||||
lightIconStyle: {
|
||||
marginLeft: '1px',
|
||||
},
|
||||
},
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
:::caution
|
||||
|
||||
With `respectPrefersColorScheme: true`, the `defaultMode` is overridden by user system preferences.
|
||||
|
||||
If you only want to support one color mode, you likely want to ignore user system preferences.
|
||||
|
||||
:::
|
||||
|
||||
### Meta image {#meta-image}
|
||||
|
||||
You can configure a default image that will be used for your meta tag, in particular `og:image` and `twitter:image`.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `image` | `string` | `undefined` | The meta image URL for the site. Relative to your site's "static" directory. Cannot be SVGs. Can be external URLs too. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
// highlight-next-line
|
||||
image: 'img/docusaurus.png',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Metadata {#metadata}
|
||||
|
||||
You can configure additional html metadata (and override existing ones).
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `metadata` | `Metadata[]` | `[]` | Any field will be directly passed to the `<meta />` tag. Possible fields include `id`, `name`, `property`, `content`, `itemprop`, etc. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
// highlight-next-line
|
||||
metadata: [{name: 'twitter:card', content: 'summary'}],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Announcement bar {#announcement-bar}
|
||||
|
||||
Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and optionally dismissable panel above the navbar. All configuration are in the `announcementBar` object.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="announcement-bar">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `id` | `string` | `'announcement-bar'` | Any value that will identify this message. |
|
||||
| `content` | `string` | `''` | The text content of the announcement. HTML will be interpolated. |
|
||||
| `backgroundColor` | `string` | `'#fff'` | Background color of the entire bar. |
|
||||
| `textColor` | `string` | `'#000'` | Announcement text color. |
|
||||
| `isCloseable` | `boolean` | `true` | Whether this announcement can be dismissed with a '×' button. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
// highlight-start
|
||||
announcementBar: {
|
||||
id: 'support_us',
|
||||
content:
|
||||
'We are looking to revamp our docs, please fill <a target="_blank" rel="noopener noreferrer" href="#">this survey</a>',
|
||||
backgroundColor: '#fafbfc',
|
||||
textColor: '#091E42',
|
||||
isCloseable: false,
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Navbar {#navbar}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="navbar">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `title` | `string` | `undefined` | Title for the navbar. |
|
||||
| `logo` | _See below_ | `undefined` | Customization of the logo object. |
|
||||
| `items` | `NavbarItem[]` | `[]` | A list of navbar items. See specification below. |
|
||||
| `hideOnScroll` | `boolean` | `false` | Whether the navbar is hidden when the user scrolls down. |
|
||||
| `style` | <code>'primary' \| 'dark'</code> | Same as theme | Sets the navbar style, ignoring the dark/light theme. |
|
||||
|
||||
</APITable>
|
||||
|
||||
### Navbar logo {#navbar-logo}
|
||||
|
||||
The logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. In addition, you can override a value for the target attribute of logo link, it can come in handy if you are hosting docs website in a subdirectory of your main website, and in which case you probably do not need a link in the logo to the main website will open in a new tab.
|
||||
|
||||
To improve dark mode support, you can also set a different logo for this mode.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="navbar-logo">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `alt` | `string` | `undefined` | Alt tag for the logo image. |
|
||||
| `src` | `string` | **Required** | URL to the logo image. Base URL is appended by default. |
|
||||
| `srcDark` | `string` | `logo.src` | An alternative image URL to use in dark mode. |
|
||||
| `href` | `string` | `siteConfig.baseUrl` | Link to navigate to when the logo is clicked. |
|
||||
| `width` | <code>string \| number</code> | `undefined` | Specifies the `width` attribute. |
|
||||
| `height` | <code>string \| number</code> | `undefined` | Specifies the `height` attribute. |
|
||||
| `target` | `string` | Calculated based on `href` (external links will open in a new tab, all others in the current one). | The `target` attribute of the link; controls whether the link is opened in a new tab, the current one, or otherwise. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
title: 'Site Title',
|
||||
// highlight-start
|
||||
logo: {
|
||||
alt: 'Site Logo',
|
||||
src: 'img/logo.svg',
|
||||
srcDark: 'img/logo_dark.svg',
|
||||
href: 'https://docusaurus.io/',
|
||||
target: '_self',
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Navbar items {#navbar-items}
|
||||
|
||||
You can add items to the navbar via `themeConfig.navbar.items`.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
// highlight-start
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
position: 'left',
|
||||
docId: 'introduction',
|
||||
label: 'Docs',
|
||||
},
|
||||
{to: 'blog', label: 'Blog', position: 'left'},
|
||||
{
|
||||
type: 'docsVersionDropdown',
|
||||
position: 'right',
|
||||
},
|
||||
{
|
||||
type: 'localeDropdown',
|
||||
position: 'right',
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/facebook/docusaurus',
|
||||
position: 'right',
|
||||
className: 'header-github-link',
|
||||
'aria-label': 'GitHub repository',
|
||||
},
|
||||
],
|
||||
// highlight-end
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
The items can have different behaviors based on the `type` field. The sections below will introduce you to all the types of navbar items available.
|
||||
|
||||
#### Navbar link {#navbar-link}
|
||||
|
||||
By default, Navbar items are regular links (internal or external).
|
||||
|
||||
React Router should automatically apply active link styling to links, but you can use `activeBasePath` in edge cases. For cases in which a link should be active on several different paths (such as when you have multiple doc folders under the same sidebar), you can use `activeBaseRegex`. `activeBaseRegex` is a more flexible alternative to `activeBasePath` and takes precedence over it -- Docusaurus parses it into a regular expression that is tested against the current URL.
|
||||
|
||||
Outbound (external) links automatically get `target="_blank" rel="noopener noreferrer"` attributes.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="navbar-link">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | `'default'` | Optional | Sets the type of this item to a link. |
|
||||
| `label` | `string` | **Required** | The name to be shown for this item. |
|
||||
| `to` | `string` | **Required** | Client-side routing, used for navigating within the website. The baseUrl will be automatically prepended to this value. |
|
||||
| `href` | `string` | **Required** | A full-page navigation, used for navigating outside of the website. **Only one of `to` or `href` should be used.** |
|
||||
| `prependBaseUrlToHref` | `boolean` | `false` | Prepends the baseUrl to `href` values. |
|
||||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
| `activeBasePath` | `string` | `to` / `href` | To apply the active class styling on all routes starting with this path. This usually isn't necessary. |
|
||||
| `activeBaseRegex` | `string` | `undefined` | Alternative to `activeBasePath` if required. |
|
||||
| `className` | `string` | `''` | Custom CSS class (for styling any item). |
|
||||
|
||||
</APITable>
|
||||
|
||||
:::note
|
||||
|
||||
In addition to the fields above, you can specify other arbitrary attributes that can be applied to a HTML link.
|
||||
|
||||
:::
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
to: 'docs/introduction',
|
||||
// Only one of "to" or "href" should be used
|
||||
// href: 'https://www.facebook.com',
|
||||
label: 'Introduction',
|
||||
position: 'left',
|
||||
activeBaseRegex: 'docs/(next|v8)',
|
||||
target: '_blank',
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Navbar dropdown {#navbar-dropdown}
|
||||
|
||||
Navbar items of the type `dropdown` has the additional `items` field, an inner array of navbar items.
|
||||
|
||||
Navbar dropdown items only accept the following **"link-like" item types**:
|
||||
|
||||
- [Navbar link](#navbar-link)
|
||||
- [Navbar doc link](#navbar-doc-link)
|
||||
- [Navbar docs version](#navbar-docs-version)
|
||||
|
||||
Note that the dropdown base item is a clickable link as well, so this item can receive any of the props of a [plain navbar link](#navbar-link).
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="navbar-dropdown">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | `'dropdown'` | Optional | Sets the type of this item to a dropdown. |
|
||||
| `label` | `string` | **Required** | The name to be shown for this item. |
|
||||
| `items` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | **Required** | The items to be contained in the dropdown. |
|
||||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'dropdown',
|
||||
label: 'Community',
|
||||
position: 'left',
|
||||
items: [
|
||||
{
|
||||
label: 'Facebook',
|
||||
href: 'https://www.facebook.com',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Social',
|
||||
docId: 'social',
|
||||
},
|
||||
// ... more items
|
||||
],
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Navbar doc link {#navbar-doc-link}
|
||||
|
||||
If you want to link to a specific doc, this special navbar item type will render the link to the doc of the provided `docId`. It will get the class `navbar__link--active` as long as you browse a doc of the same sidebar.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="navbar-doc-link">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | `'doc'` | **Required** | Sets the type of this item to a doc link. |
|
||||
| `docId` | `string` | **Required** | The ID of the doc that this item links to. |
|
||||
| `label` | `string` | `docId` | The name to be shown for this item. |
|
||||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
| `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc belongs to. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'doc',
|
||||
position: 'left',
|
||||
docId: 'introduction',
|
||||
label: 'Docs',
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Navbar docs version dropdown {#navbar-docs-version-dropdown}
|
||||
|
||||
If you use docs with versioning, this special navbar item type that will render a dropdown with all your site's available versions.
|
||||
|
||||
The user will be able to switch from one version to another, while staying on the same doc (as long as the doc id is constant across versions).
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="navbar-docs-version-dropdown">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | `'docsVersionDropdown'` | **Required** | Sets the type of this item to a docs version dropdown. |
|
||||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
| `dropdownItemsBefore` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the beginning of the dropdown. |
|
||||
| `dropdownItemsAfter` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the end of the dropdown. |
|
||||
| `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. |
|
||||
| `dropdownActiveClassDisabled` | `boolean` | `false` | Do not add the link active class when browsing docs. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'docsVersionDropdown',
|
||||
position: 'left',
|
||||
dropdownItemsAfter: [{to: '/versions', label: 'All versions'}],
|
||||
dropdownActiveClassDisabled: true,
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Navbar docs version {#navbar-docs-version}
|
||||
|
||||
If you use docs with versioning, this special navbar item type will link to the active/browsed version of your doc (depends on the current URL), and fallback to the latest version.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="navbar-docs-version">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | `'docsVersion'` | **Required** | Sets the type of this item to a doc version link. |
|
||||
| `label` | `string` | The active/latest version label. | The name to be shown for this item. |
|
||||
| `to` | `string` | The active/latest version. | The internal link that this item points to. |
|
||||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
| `docsPluginId` | `string` | `'default'` | The ID of the docs plugin that the doc versioning belongs to. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'docsVersion',
|
||||
position: 'left',
|
||||
to: '/path',
|
||||
label: 'label',
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Navbar locale dropdown {#navbar-locale-dropdown}
|
||||
|
||||
If you use the [i18n feature](../../i18n/i18n-introduction.md), this special navbar item type will render a dropdown with all your site's available locales.
|
||||
|
||||
The user will be able to switch from one locale to another, while staying on the same page.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="navbar-locale-dropdown">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | `'localeDropdown'` | **Required** | Sets the type of this item to a locale dropdown. |
|
||||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
| `dropdownItemsBefore` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the beginning of the dropdown. |
|
||||
| `dropdownItemsAfter` | <code>[LinkLikeItem](#navbar-dropdown)[]</code> | `[]` | Add additional dropdown items at the end of the dropdown. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'localeDropdown',
|
||||
position: 'left',
|
||||
dropdownItemsAfter: [
|
||||
{
|
||||
to: 'https://my-site.com/help-us-translate',
|
||||
label: 'Help us translate',
|
||||
},
|
||||
],
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### Navbar search {#navbar-search}
|
||||
|
||||
If you use the [search](../../search.md), the search bar will be the rightmost element in the navbar.
|
||||
|
||||
However, with this special navbar item type, you can change the default location.
|
||||
|
||||
<APITable name="navbar-search">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `type` | `'search'` | **Required** | Sets the type of this item to a search bar. |
|
||||
| `position` | <code>'left' \| 'right'</code> | `'left'` | The side of the navbar this item should appear on. |
|
||||
|
||||
</APITable>
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
items: [
|
||||
// highlight-start
|
||||
{
|
||||
type: 'search',
|
||||
position: 'right',
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Auto-hide sticky navbar {#auto-hide-sticky-navbar}
|
||||
|
||||
You can enable this cool UI feature that automatically hides the navbar when a user starts scrolling down the page, and show it again when the user scrolls up.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
// highlight-next-line
|
||||
hideOnScroll: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Navbar style {#navbar-style}
|
||||
|
||||
You can set the static Navbar style without disabling the theme switching ability. The selected style will always apply no matter which theme user have selected.
|
||||
|
||||
Currently, there are two possible style options: `dark` and `primary` (based on the `--ifm-color-primary` color). You can see the styles preview in the [Infima documentation](https://infima.dev/docs/components/navbar/).
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
navbar: {
|
||||
// highlight-next-line
|
||||
style: 'primary',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## CodeBlock {#codeblock}
|
||||
|
||||
Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight code blocks. All configuration are in the `prism` object.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="codeblock">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `theme` | `PrismTheme` | `palenight` | The Prism theme to use for light-theme code blocks. |
|
||||
| `darkTheme` | `PrismTheme` | `palenight` | The Prism theme to use for dark-theme code blocks. |
|
||||
| `defaultLanguage` | `string` | `undefined` | The side of the navbar this item should appear on. |
|
||||
|
||||
</APITable>
|
||||
|
||||
### Theme {#theme}
|
||||
|
||||
By default, we use [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/themes/palenight.js) as syntax highlighting theme. You can specify a custom theme from the [list of available themes](https://github.com/FormidableLabs/prism-react-renderer/tree/master/src/themes). You may also use a different syntax highlighting theme when the site is in dark mode.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
prism: {
|
||||
// highlight-start
|
||||
theme: require('prism-react-renderer/themes/github'),
|
||||
darkTheme: require('prism-react-renderer/themes/dracula'),
|
||||
// highlight-end
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
If you use the line highlighting Markdown syntax, you might need to specify a different highlight background color for the dark mode syntax highlighting theme. Refer to the [docs for guidance](../../guides/markdown-features/markdown-features-code-blocks.mdx#line-highlighting).
|
||||
|
||||
:::
|
||||
|
||||
### Default language {#default-language}
|
||||
|
||||
You can set a default language for code blocks if no language is added after the opening triple backticks (i.e. ```). Note that a valid [language name](https://prismjs.com/#supported-languages) must be passed.
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
prism: {
|
||||
// highlight-next-line
|
||||
defaultLanguage: 'javascript',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Footer {#footer-1}
|
||||
|
||||
You can add logo and a copyright to the footer via `themeConfig.footer`. Logo can be placed in [static folder](static-assets.md). Logo URL works in the same way of the navbar logo.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
<APITable name="footer">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `logo` | `Logo` | `undefined` | Customization of the logo object. See [Navbar logo](#navbar-logo) for details. |
|
||||
| `copyright` | `string` | `undefined` | The copyright message to be displayed at the bottom. |
|
||||
| `style` | <code>'dark' \| 'light'</code> | `'light'` | The color theme of the footer component. |
|
||||
| `items` | `FooterItem[]` | `[]` | The link groups to be present. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
// highlight-start
|
||||
footer: {
|
||||
logo: {
|
||||
alt: 'Facebook Open Source Logo',
|
||||
src: 'img/oss_logo.png',
|
||||
href: 'https://opensource.facebook.com',
|
||||
width: 160,
|
||||
height: 51,
|
||||
},
|
||||
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Footer Links {#footer-links}
|
||||
|
||||
You can add links to the footer via `themeConfig.footer.links`.
|
||||
|
||||
Accepted fields of each link section:
|
||||
|
||||
<APITable name="footer-links">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `title` | `string` | `undefined` | Label of the section of these links. |
|
||||
| `items` | `FooterLink[]` | `[]` | Links in this section. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Accepted fields of each item in `items`:
|
||||
|
||||
<APITable name="footer-items">
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `label` | `string` | **Required** | Text to be displayed for this link. |
|
||||
| `to` | `string` | **Required** | Client-side routing, used for navigating within the website. The baseUrl will be automatically prepended to this value. |
|
||||
| `href` | `string` | **Required** | A full-page navigation, used for navigating outside of the website. **Only one of `to` or `href` should be used.** |
|
||||
| `html` | `string` | `undefined` | Renders the html pass-through instead of a simple link. In case `html` is used, no other options should be provided. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
footer: {
|
||||
// highlight-start
|
||||
links: [
|
||||
{
|
||||
title: 'Docs',
|
||||
items: [
|
||||
{
|
||||
label: 'Style Guide',
|
||||
to: 'docs/',
|
||||
},
|
||||
{
|
||||
label: 'Second Doc',
|
||||
to: 'docs/doc2/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Community',
|
||||
items: [
|
||||
{
|
||||
label: 'Stack Overflow',
|
||||
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
|
||||
},
|
||||
{
|
||||
label: 'Discord',
|
||||
href: 'https://discordapp.com/invite/docusaurus',
|
||||
},
|
||||
{
|
||||
label: 'Twitter',
|
||||
href: 'https://twitter.com/docusaurus',
|
||||
},
|
||||
{
|
||||
html: `
|
||||
<a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
|
||||
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
|
||||
</a>
|
||||
`,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
// highlight-end
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Table of Contents {#table-of-contents}
|
||||
|
||||
You can adjust the default table of contents via `themeConfig.tableOfContents`.
|
||||
|
||||
<APITable>
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `minHeadingLevel` | `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. |
|
||||
| `maxHeadingLevel` | `number` | `3` | Max heading level displayed in the TOC. Should be an integer between 2 and 6. |
|
||||
|
||||
</APITable>
|
||||
|
||||
Example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
// highlight-start
|
||||
tableOfContents: {
|
||||
minHeadingLevel: 2,
|
||||
maxHeadingLevel: 5,
|
||||
},
|
||||
// highlight-end
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Hooks {#hooks}
|
||||
|
||||
### `useThemeContext` {#usethemecontext}
|
||||
|
||||
React hook to access theme context. This context contains functions for setting light and dark mode and exposes boolean variable, indicating which mode is currently in use.
|
||||
|
||||
Usage example:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
// highlight-next-line
|
||||
import useThemeContext from '@theme/hooks/useThemeContext';
|
||||
|
||||
const Example = () => {
|
||||
// highlight-next-line
|
||||
const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
|
||||
|
||||
return <h1>Dark mode is now {isDarkTheme ? 'on' : 'off'}</h1>;
|
||||
};
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
The component calling `useThemeContext` must be a child of the `Layout` component.
|
||||
|
||||
```jsx
|
||||
function ExamplePage() {
|
||||
return (
|
||||
<Layout>
|
||||
<Example />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## i18n {#i18n}
|
||||
|
||||
Read the [i18n introduction](../../i18n/i18n-introduction.md) first.
|
||||
|
||||
### Translation files location {#translation-files-location}
|
||||
|
||||
- **Base path**: `website/i18n/<locale>/docusaurus-theme-<themeName>`
|
||||
- **Multi-instance path**: N/A
|
||||
- **JSON files**: extracted with [`docusaurus write-translations`](../../cli.md#docusaurus-write-translations-sitedir)
|
||||
- **Markdown files**: N/A
|
||||
|
||||
### Example file-system structure {#example-file-system-structure}
|
||||
|
||||
```bash
|
||||
website/i18n/<locale>/docusaurus-theme-classic
|
||||
│
|
||||
│ # translations for the theme
|
||||
├── navbar.json
|
||||
└── footer.json
|
||||
```
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
sidebar_position: 3
|
||||
id: theme-live-codeblock
|
||||
title: '📦 theme-live-codeblock'
|
||||
slug: '/api/themes/@docusaurus/theme-live-codeblock'
|
||||
---
|
||||
|
||||
This theme provides a `@theme/CodeBlock` component that is powered by react-live. You can read more on [interactive code editor](../../guides/markdown-features/markdown-features-code-blocks.mdx#interactive-code-editor) documentation.
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/theme-live-codeblock
|
||||
```
|
||||
|
||||
### Configuration {#configuration}
|
||||
|
||||
```jsx title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: ['@docusaurus/theme-live-codeblock'],
|
||||
themeConfig: {
|
||||
liveCodeBlock: {
|
||||
/**
|
||||
* The position of the live playground, above or under the editor
|
||||
* Possible values: "top" | "bottom"
|
||||
*/
|
||||
playgroundPosition: 'bottom',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
sidebar_position: 4
|
||||
id: theme-search-algolia
|
||||
title: '📦 theme-search-algolia'
|
||||
slug: '/api/themes/@docusaurus/theme-search-algolia'
|
||||
---
|
||||
|
||||
This theme provides a `@theme/SearchBar` component that integrates with Algolia DocSearch easily. Combined with `@docusaurus/theme-classic`, it provides a very easy search integration. You can read more on [search](../../search.md) documentation.
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/theme-search-algolia
|
||||
```
|
||||
|
||||
This theme also adds search page available at `/search` (as swizzleable `SearchPage` component) path with OpenSearch support.
|
||||
|
||||
:::tip
|
||||
|
||||
If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency.
|
||||
|
||||
:::
|
||||
Loading…
Add table
Add a link
Reference in a new issue