mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-31 09:57:03 +02:00
docs: create Docusaurus v2.2.0 release docs + changelog + release blog post (#8265)
This commit is contained in:
Sébastien Lorber
GitHub
parent
9f4d2e7136
commit
41c981aa9f
97 changed files with 18857 additions and 1 deletions
598
website/versioned_docs/version-2.2.0/api/docusaurus.config.js.md
Normal file
598
website/versioned_docs/version-2.2.0/api/docusaurus.config.js.md
Normal file
|
|
@ -0,0 +1,598 @@
|
|||
---
|
||||
sidebar_position: 0
|
||||
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.
|
||||
|
||||
It usually exports a site configuration object:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// site config...
|
||||
};
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>Config files also support config creator functions and async code.</summary>
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = function configCreator() {
|
||||
return {
|
||||
// site config...
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = async function configCreatorAsync() {
|
||||
return {
|
||||
// site config...
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = Promise.resolve({
|
||||
// site config...
|
||||
});
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## Required fields {#required-fields}
|
||||
|
||||
### `title` {#title}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
Title for your website. Will be used in metadata and as browser tab title.
|
||||
|
||||
```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. Can be considered as the path after the host. For example, `/metro/` is the base URL 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. Always has both leading and trailing slash.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
baseUrl: '/',
|
||||
};
|
||||
```
|
||||
|
||||
## Optional fields {#optional-fields}
|
||||
|
||||
### `favicon` {#favicon}
|
||||
|
||||
- Type: `string | undefined`
|
||||
|
||||
Path to your site favicon; must be a URL that can be used in link's href. For example, if your favicon is in `static/img/favicon.ico`:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
favicon: '/img/favicon.ico',
|
||||
};
|
||||
```
|
||||
|
||||
### `trailingSlash` {#trailingSlash}
|
||||
|
||||
- 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 serves 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:
|
||||
|
||||
<!-- cSpell:ignore فارسی -->
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'fa'],
|
||||
path: 'i18n',
|
||||
localeConfigs: {
|
||||
en: {
|
||||
label: 'English',
|
||||
direction: 'ltr',
|
||||
htmlLang: 'en-US',
|
||||
calendar: 'gregory',
|
||||
path: 'en',
|
||||
},
|
||||
fa: {
|
||||
label: 'فارسی',
|
||||
direction: 'rtl',
|
||||
htmlLang: 'fa-IR',
|
||||
calendar: 'persian',
|
||||
path: 'fa',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
- `defaultLocale`: The locale that (1) does not have its name in the base URL (2) gets started with `docusaurus start` without `--locale` option (3) will be used for the `<link hrefLang="x-default">` tag
|
||||
- `locales`: List of locales deployed on your site. Must contain `defaultLocale`.
|
||||
- `path`: Root folder which all locale folders are relative to. Can be absolute or relative to the config file. Defaults to `i18n`.
|
||||
- `localeConfigs`: Individual options for each locale.
|
||||
- `label`: The label displayed for this locale in the locales dropdown.
|
||||
- `direction`: `ltr` (default) or `rtl` (for [right-to-left languages](https://developer.mozilla.org/en-US/docs/Glossary/rtl) like Farsi, Arabic, Hebrew, etc.). Used to select the locale's CSS and HTML meta attribute.
|
||||
- `htmlLang`: BCP 47 language tag to use in `<html lang="...">` (or any other DOM tag name) and in `<link ... hreflang="...">`
|
||||
- `calendar`: the [calendar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar) used to calculate the date era. Note that it doesn't control the actual string displayed: `MM/DD/YYYY` and `DD/MM/YYYY` are both `gregory`. To choose the format (`DD/MM/YYYY` or `MM/DD/YYYY`), set your locale name to `en-GB` or `en-US` (`en` means `en-US`).
|
||||
- `path`: Root folder that all plugin localization folders of this locale are relative to. Will be resolved against `i18n.path`. Defaults to the locale's name. Note: this has no effect on the locale's `baseUrl`—customization of base URL is a work-in-progress.
|
||||
|
||||
### `noIndex` {#noIndex}
|
||||
|
||||
- Type: `boolean`
|
||||
|
||||
This option adds `<meta name="robots" content="noindex, nofollow">` to every page 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' | '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' | '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' | '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. You don't need this if you are not using the `docusaurus deploy` command.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// Docusaurus' organization is facebook
|
||||
organizationName: 'facebook',
|
||||
};
|
||||
```
|
||||
|
||||
### `projectName` {#projectName}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
The name of the GitHub repository. You don't need this if you are not using the `docusaurus deploy` 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. You don't need this if you are not using the `docusaurus deploy` 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. You don't need this if you are not using the `docusaurus deploy` command.
|
||||
|
||||
```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. You don't need this if you are not using the `docusaurus deploy` command.
|
||||
|
||||
```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 and footer.
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themeConfig: {
|
||||
docs: {
|
||||
sidebar: {
|
||||
hideable: false,
|
||||
autoCollapseCategories: false,
|
||||
},
|
||||
},
|
||||
colorMode: {
|
||||
defaultMode: 'light',
|
||||
disableSwitch: false,
|
||||
respectPrefersColorScheme: true,
|
||||
},
|
||||
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: 'Meta Open Source Logo',
|
||||
src: 'img/meta_oss_logo.png',
|
||||
href: 'https://opensource.fb.com',
|
||||
width: 160,
|
||||
height: 51,
|
||||
},
|
||||
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### `plugins` {#plugins}
|
||||
|
||||
- Type: `PluginConfig[]`
|
||||
|
||||
```ts
|
||||
type PluginConfig = string | [string, any] | PluginModule | [PluginModule, any];
|
||||
```
|
||||
|
||||
See [plugin method references](./plugin-methods/README.md) for the shape of a `PluginModule`.
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
'docusaurus-plugin-awesome',
|
||||
['docusuarus-plugin-confetti', {fancy: false}],
|
||||
() => ({
|
||||
postBuild() {
|
||||
console.log('Build finished');
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### `themes` {#themes}
|
||||
|
||||
- Type: `PluginConfig[]`
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
themes: ['@docusaurus/theme-classic'],
|
||||
};
|
||||
```
|
||||
|
||||
### `presets` {#presets}
|
||||
|
||||
- Type: `PresetConfig[]`
|
||||
|
||||
```ts
|
||||
type PresetConfig = string | [string, 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 fields in the config will lead to errors during 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'],
|
||||
};
|
||||
```
|
||||
|
||||
### `headTags` {#headTags}
|
||||
|
||||
An array of tags that will be inserted in the HTML `<head>`. The values must be objects that contain two properties; `tagName` and `attributes`. `tagName` must be a string that determines the tag being created; eg `"link"`. `attributes` must be an attribute-value map.
|
||||
|
||||
- Type: `{ tagName: string; attributes: Object; }[]`
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
headTags: [
|
||||
{
|
||||
tagName: 'link',
|
||||
attributes: {
|
||||
rel: 'icon',
|
||||
href: '/img/docusaurus.png',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
This would become `<link rel="icon" href="img/docusaurus.png" />` in the generated HTML.
|
||||
|
||||
### `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>`. If you use a plain object, the only required attribute is `src`, and any other attributes are permitted (each one should have boolean/string values).
|
||||
|
||||
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,
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### `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>`. If you use an object, the only required attribute is `href`, and any other attributes are permitted (each one should have boolean/string values).
|
||||
|
||||
- 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',
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
By default, the `<link>` tags will have `rel="stylesheet"`, but you can explicitly add a custom `rel` value to inject any kind of `<link>` tag, not necessarily stylesheets.
|
||||
|
||||
:::
|
||||
|
||||
### `clientModules` {#clientModules}
|
||||
|
||||
An array of [client modules](../advanced/client.md#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'),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### `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="generator" content="Docusaurus v<%= it.version %>">
|
||||
<% it.metaAttributes.forEach((metaAttribute) => { %>
|
||||
<%~ metaAttribute %>
|
||||
<% }); %>
|
||||
<%~ it.headTags %>
|
||||
<% 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>`,
|
||||
};
|
||||
```
|
||||
|
||||
### `titleDelimiter` {#titleDelimiter}
|
||||
|
||||
- Type: `string`
|
||||
|
||||
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 needs to inline CSS / JS in case all asset loading fails due to wrong base URL.
|
||||
|
||||
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,2 @@
|
|||
label: Miscellaneous
|
||||
position: 4
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
sidebar_position: 0
|
||||
slug: /api/misc/create-docusaurus
|
||||
---
|
||||
|
||||
# 📦 create-docusaurus
|
||||
|
||||
A scaffolding utility to help you instantly set up a functional Docusaurus app.
|
||||
|
||||
## Usage {#usage}
|
||||
|
||||
```bash
|
||||
npx create-docusaurus@latest [name] [template] [rootDir]
|
||||
```
|
||||
|
||||
The `name` argument will be used as the site's path as well as the `name` field in the created app's package.json. It can be an absolute path, or a path relative to `rootDir`.
|
||||
|
||||
The `template` argument can be one of the following:
|
||||
|
||||
- `classic`: Uses the classic template (recommended)
|
||||
- `facebook`: Uses the Facebook/Meta template, which contains some Meta-specific setup
|
||||
- A git repo URL (beginning with `https://` or `git@`), which can be cloned to the destination
|
||||
- A local file path relative to CWD, which contains the files to be copied to destination
|
||||
|
||||
The `rootDir` will be used to resolve the absolute path to the site directory. The default is CWD.
|
||||
|
||||
:::caution
|
||||
|
||||
This command should be preferably used in an interactive shell so all features are available.
|
||||
|
||||
:::
|
||||
|
||||
## Options {#options}
|
||||
|
||||
### `-t, --typescript` {#typescript}
|
||||
|
||||
Used when the template argument is a recognized name. Currently, only `classic` provides a TypeScript variant.
|
||||
|
||||
### `-g, --git-strategy` {#git-strategy}
|
||||
|
||||
Used when the template argument is a git repo. It needs to be one of:
|
||||
|
||||
- `deep`: preserves full git history
|
||||
- `shallow`: clones with `--depth=1`
|
||||
- `copy`: does a shallow clone, but does not create a git repo
|
||||
- `custom`: enter your custom git clone command. We will prompt you for it. You can write something like `git clone --depth 10`, and we will append the repository URL and destination directory.
|
||||
|
||||
### `-p, --package-manager` {#package-manager}
|
||||
|
||||
Value should be one of `npm`, `yarn`, or `pnpm`. If it's not explicitly provided, Docusaurus will infer one based on:
|
||||
|
||||
- The lockfile already present in the CWD (e.g. if you are setting up website in an existing project)
|
||||
- The command used to invoke `create-docusaurus` (e.g. `npm init`, `npx`, `yarn create`, etc.)
|
||||
- Interactive prompting, in case all heuristics are not present
|
||||
|
||||
### `-s, --skip-install` {#skip-install}
|
||||
|
||||
If provided, Docusaurus will not automatically install dependencies after creating the app. The `--package-manager` option is only useful when you are actually installing dependencies.
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
sidebar_position: 1
|
||||
slug: /api/misc/@docusaurus/eslint-plugin
|
||||
---
|
||||
|
||||
# 📦 eslint-plugin
|
||||
|
||||
[ESLint](https://eslint.org/) is a tool that statically analyzes your code and reports problems or suggests best practices through editor hints and command line. Docusaurus provides an ESLint plugin to enforce best Docusaurus practices.
|
||||
|
||||
## Installation
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save-dev @docusaurus/eslint-plugin
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
Add `@docusaurus` to the plugins section of your `.eslintrc` configuration file:
|
||||
|
||||
```json title=".eslintrc"
|
||||
{
|
||||
"plugins": ["@docusaurus"]
|
||||
}
|
||||
```
|
||||
|
||||
Then, you can extend one of the configs (e.g. the `recommended` config):
|
||||
|
||||
```json title=".eslintrc"
|
||||
{
|
||||
"extends": ["plugin:@docusaurus/recommended"]
|
||||
}
|
||||
```
|
||||
|
||||
Each config contains a set of rules. For more fine-grained control, you can also configure the rules you want to use directly:
|
||||
|
||||
```json title=".eslintrc"
|
||||
{
|
||||
"rules": {
|
||||
"@docusaurus/string-literal-i18n-messages": "error",
|
||||
"@docusaurus/no-untranslated-text": "warn"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Supported Configs
|
||||
|
||||
- Recommended: recommended rule set for most Docusaurus sites that should be extended from.
|
||||
- All: **all** rules enabled. This will change between minor versions, so you should not use this if you want to avoid unexpected breaking changes.
|
||||
|
||||
## Supported Rules
|
||||
|
||||
| Name | Description | |
|
||||
| --- | --- | --- |
|
||||
| [`@docusaurus/no-untranslated-text`](./no-untranslated-text.md) | Enforce text labels in JSX to be wrapped by translate calls | |
|
||||
| [`@docusaurus/string-literal-i18n-messages`](./string-literal-i18n-messages.md) | Enforce translate APIs to be called on plain text labels | ✅ |
|
||||
|
||||
✅ = recommended
|
||||
|
||||
## Example configuration
|
||||
|
||||
Here's an example configuration:
|
||||
|
||||
```js title=".eslintrc.js"
|
||||
module.exports = {
|
||||
extends: ['plugin:@docusaurus/recommended'],
|
||||
plugins: ['@docusaurus'],
|
||||
rules: {
|
||||
'@docusaurus/no-untranslated-text': [
|
||||
'warn',
|
||||
{ignoredStrings: ['·', '—', '×']},
|
||||
],
|
||||
},
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
---
|
||||
slug: /api/misc/@docusaurus/eslint-plugin/no-untranslated-text
|
||||
---
|
||||
|
||||
# no-untranslated-text
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
Enforce text labels in JSX to be wrapped by translate calls.
|
||||
|
||||
When the [i18n feature](../../../i18n/i18n-introduction.md) is used, this rule ensures that all labels appearing on the website are translatable, so no string accidentally slips through untranslated.
|
||||
|
||||
## Rule Details {#details}
|
||||
|
||||
Examples of **incorrect** code for this rule:
|
||||
|
||||
```js
|
||||
// Hello World is not translated
|
||||
<Component>Hello World</Component>
|
||||
```
|
||||
|
||||
Examples of **correct** code for this rule:
|
||||
|
||||
```js
|
||||
// Hello World is translated
|
||||
<Component>
|
||||
<Translate>Hello World</Translate>
|
||||
</Component>
|
||||
```
|
||||
|
||||
## Rule Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<APITable>
|
||||
```
|
||||
|
||||
| Option | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `ignoredStrings` | `string[]` | `[]` | Text labels that only contain strings in this list will not be reported. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
## When Not To Use It {#when-not-to-use}
|
||||
|
||||
If you're not using the [i18n feature](../../../i18n/i18n-introduction.md), you can disable this rule. You can also disable this rule where the text is not supposed to be translated.
|
||||
|
||||
## Further Reading {#further-reading}
|
||||
|
||||
- https://docusaurus.io/docs/docusaurus-core#translate
|
||||
- https://docusaurus.io/docs/docusaurus-core#translate-imperative
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
---
|
||||
slug: /api/misc/@docusaurus/eslint-plugin/string-literal-i18n-messages
|
||||
---
|
||||
|
||||
# string-literal-i18n-messages
|
||||
|
||||
Enforce translate APIs to be called on plain text labels.
|
||||
|
||||
Docusaurus offers the [`docusaurus write-translations`](../../../cli.md#docusaurus-write-translations-sitedir) API, which statically extracts the text labels marked as translatable. Dynamic values used in `<Translate>` or `translate()` calls will fail to be extracted. This rule will ensure that all translate calls are statically extractable.
|
||||
|
||||
## Rule Details {#details}
|
||||
|
||||
Examples of **incorrect** code for this rule:
|
||||
|
||||
```js
|
||||
const text = 'Some text to be translated'
|
||||
|
||||
// Invalid <Translate> child
|
||||
<Translate>{text}</Translate>
|
||||
|
||||
// Invalid message attribute
|
||||
translate({message: text})
|
||||
```
|
||||
|
||||
Examples of **correct** code for this rule:
|
||||
|
||||
```js
|
||||
// Valid <Translate> child
|
||||
<Translate>Some text to be translated</Translate>
|
||||
|
||||
// Valid message attribute
|
||||
translate({message: 'Some text to be translated'})
|
||||
|
||||
// Valid <Translate> child using values object as prop
|
||||
<Translate values={{firstName: 'Sébastien'}}>
|
||||
{'Welcome, {firstName}! How are you?'}
|
||||
</Translate>
|
||||
|
||||
// Valid message attribute using values object as second argument
|
||||
translate({message: 'The logo of site {siteName}'}, {siteName: 'Docusaurus'})
|
||||
```
|
||||
|
||||
## When Not To Use It {#when-not-to-use}
|
||||
|
||||
If you're not using the [i18n feature](../../../i18n/i18n-introduction.md), you can disable this rule.
|
||||
|
||||
## Further Reading {#further-reading}
|
||||
|
||||
- https://docusaurus.io/docs/docusaurus-core#translate
|
||||
- https://docusaurus.io/docs/docusaurus-core#translate-imperative
|
||||
BIN
website/versioned_docs/version-2.2.0/api/misc/logger/demo.png
Normal file
BIN
website/versioned_docs/version-2.2.0/api/misc/logger/demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
|
|
@ -0,0 +1,69 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
slug: /api/misc/@docusaurus/logger
|
||||
---
|
||||
|
||||
# 📦 logger
|
||||
|
||||
An encapsulated logger for semantically formatting console messages.
|
||||
|
||||
Authors of packages in the Docusaurus ecosystem are encouraged to use this package to provide unified log formats.
|
||||
|
||||
## APIs
|
||||
|
||||
It exports a single object as default export: `logger`. `logger` has the following properties:
|
||||
|
||||
- Some useful colors.
|
||||
- `red`
|
||||
- `yellow`
|
||||
- `green`
|
||||
- `bold`
|
||||
- `dim`
|
||||
- Formatters. These functions all have the signature `(msg: unknown) => string`. Note that their implementations are not guaranteed. You should only care about their semantics.
|
||||
- `path`: formats a file path.
|
||||
- `url`: formats a URL.
|
||||
- `name`: formats an identifier.
|
||||
- `code`: formats a code snippet.
|
||||
- `subdue`: subdues the text.
|
||||
- `num`: formats a number.
|
||||
- The `interpolate` function. It is a template literal tag. The syntax can be found below.
|
||||
- Logging functions. All logging functions can both be used as normal functions (similar to the `console.log` family, but only accepts one parameter) or template literal tags.
|
||||
- `info`: prints information.
|
||||
- `warn`: prints a warning that should be paid attention to.
|
||||
- `error`: prints an error (not necessarily halting the program) that signals significant problems.
|
||||
- `success`: prints a success message.
|
||||
- The `report` function. It takes a `ReportingSeverity` value (`ignore`, `log`, `warn`, `throw`) and reports a message according to the severity.
|
||||
|
||||
:::caution A word on the `error` formatter
|
||||
|
||||
Beware that an `error` message, even when it doesn't hang the program, is likely going to cause confusion. When users inspect logs and find an `[ERROR]`, even when the build succeeds, they will assume something is going wrong. Use it sparingly.
|
||||
|
||||
Docusaurus only uses `logger.error` when printing messages immediately before throwing an error, or when user has set the reporting severity of `onBrokenLink`, etc. to `"error"`.
|
||||
|
||||
In addition, `warn` and `error` will color the **entire** message for better attention. If you are printing large blocks of help text about an error, better use `logger.info`.
|
||||
|
||||
:::
|
||||
|
||||
### Using the template literal tag
|
||||
|
||||
The template literal tag evaluates the template and expressions embedded. `interpolate` returns a new string, while other logging functions prints it. Below is a typical usage:
|
||||
|
||||
```js
|
||||
logger.info`Hello name=${name}! You have number=${money} dollars. Here are the ${
|
||||
items.length > 1 ? 'items' : 'item'
|
||||
} on the shelf: ${items}
|
||||
To buy anything, enter code=${'buy x'} where code=${'x'} is the item's name; to quit, press code=${'Ctrl + C'}.`;
|
||||
```
|
||||
|
||||
An embedded expression is optionally preceded by a flag in the form `[a-z]+=` (a few lowercase letters, followed by an equals sign, directly preceding the embedded expression). If the expression is not preceded by any flag, it's printed out as-is. Otherwise, it's formatted with one of the formatters:
|
||||
|
||||
- `path=`: `path`
|
||||
- `url=`: `url`
|
||||
- `name=`: `name`
|
||||
- `code=`: `code`
|
||||
- `subdue=`: `subdue`
|
||||
- `number=`: `num`
|
||||
|
||||
If the expression is an array, it's formatted by `` `\n- ${array.join('\n- ')}\n` `` (note it automatically gets a leading line end). Each member is formatted by itself and the bullet is not formatted. So you would see the above message printed as:
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
# Plugin Method References
|
||||
|
||||
:::caution
|
||||
|
||||
This section is a work in progress. Anchor links or even URLs are not guaranteed to be stable.
|
||||
|
||||
:::
|
||||
|
||||
Plugin APIs are shared by themes and plugins—themes are loaded just like plugins.
|
||||
|
||||
## Plugin module {#plugin-module}
|
||||
|
||||
Every plugin is imported as a module. The module is expected to have the following members:
|
||||
|
||||
- A **default export**: the constructor function for the plugin.
|
||||
- **Named exports**: the [static methods](./static-methods.md) called before plugins are initialized.
|
||||
|
||||
## Plugin constructor {#plugin-constructor}
|
||||
|
||||
The plugin module's default export is a constructor function with the signature `(context: LoadContext, options: PluginOptions) => Plugin | Promise<Plugin>`.
|
||||
|
||||
### `context` {#context}
|
||||
|
||||
`context` is plugin-agnostic, and the same object will be passed into all plugins used for a Docusaurus website. The `context` object contains the following fields:
|
||||
|
||||
```ts
|
||||
type LoadContext = {
|
||||
siteDir: string;
|
||||
generatedFilesDir: string;
|
||||
siteConfig: DocusaurusConfig;
|
||||
outDir: string;
|
||||
baseUrl: string;
|
||||
};
|
||||
```
|
||||
|
||||
### `options` {#options}
|
||||
|
||||
`options` are the [second optional parameter when the plugins are used](../../using-plugins.md#configuring-plugins). `options` are plugin-specific and are specified by users when they use them in `docusaurus.config.js`. If there's a [`validateOptions`](./static-methods.md#validateOptions) function exported, the `options` will be validated and normalized beforehand.
|
||||
|
||||
Alternatively, if a preset contains the plugin, the preset will then be in charge of passing the correct options into the plugin. It is up to the individual plugin to define what options it takes.
|
||||
|
||||
## Example {#example}
|
||||
|
||||
Here's a mental model for a presumptuous plugin implementation.
|
||||
|
||||
```js
|
||||
// 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.
|
||||
async function myPlugin(context, opts) {
|
||||
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
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
myPlugin.validateOptions = ({options, validate}) => {
|
||||
const validatedOptions = validate(myValidationSchema, options);
|
||||
return validationOptions;
|
||||
};
|
||||
|
||||
myPlugin.validateThemeConfig = ({themeConfig, validate}) => {
|
||||
const validatedThemeConfig = validate(myValidationSchema, options);
|
||||
return validatedThemeConfig;
|
||||
};
|
||||
|
||||
module.exports = myPlugin;
|
||||
```
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
label: Plugin method references
|
||||
position: 1
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Extending infrastructure
|
||||
|
||||
Docusaurus has some infrastructure like hot reloading, CLI, and swizzling, that can be extended by external plugins.
|
||||
|
||||
## `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.
|
||||
|
||||
Use this for files that are consumed server-side, because theme files are automatically watched by Webpack dev server.
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
const path = require('path');
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// highlight-start
|
||||
getPathsToWatch() {
|
||||
const contentPath = path.resolve(context.siteDir, options.path);
|
||||
return [`${contentPath}/**/*.{ts,tsx}`];
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `extendCli(cli)` {#extendCli}
|
||||
|
||||
Register an extra command to enhance the CLI of Docusaurus. `cli` is a [commander](https://www.npmjs.com/package/commander/v/5.1.0) object.
|
||||
|
||||
:::caution
|
||||
|
||||
The commander version matters! We use commander v5, and make sure you are referring to the right version documentation for available APIs.
|
||||
|
||||
:::
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// highlight-start
|
||||
extendCli(cli) {
|
||||
cli
|
||||
.command('roll')
|
||||
.description('Roll a random number between 1 and 1000')
|
||||
.action(() => {
|
||||
console.log(Math.floor(Math.random() * 1000 + 1));
|
||||
});
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `getThemePath()` {#getThemePath}
|
||||
|
||||
Returns the path to the directory where the theme components can be found. When your users call `swizzle`, `getThemePath` is called and its returned path is used to find your theme components. Relative paths are resolved against the folder containing the entry point.
|
||||
|
||||
For example, your `getThemePath` can be:
|
||||
|
||||
```js title="my-theme/src/index.js"
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'my-theme',
|
||||
// highlight-start
|
||||
getThemePath() {
|
||||
return './theme';
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `getTypeScriptThemePath()` {#getTypeScriptThemePath}
|
||||
|
||||
Similar to `getThemePath()`, it should return the path to the directory where the source code of TypeScript theme components can be found. This path is purely for swizzling TypeScript theme components, and theme components under this path will **not** be resolved by Webpack. Therefore, it is not a replacement for `getThemePath()`. Typically, you can make the path returned by `getTypeScriptThemePath()` be your source directory, and make the path returned by `getThemePath()` be the compiled JavaScript output.
|
||||
|
||||
:::tip
|
||||
|
||||
For TypeScript theme authors: you are strongly advised to make your compiled output as human-readable as possible. Only strip type annotations and don't transpile any syntaxes, because they will be handled by Webpack's Babel loader based on the targeted browser versions.
|
||||
|
||||
You should also format these files with Prettier. Remember—JS files can and will be directly consumed by your users.
|
||||
|
||||
:::
|
||||
|
||||
Example:
|
||||
|
||||
```js title="my-theme/src/index.js"
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'my-theme',
|
||||
// highlight-start
|
||||
getThemePath() {
|
||||
// Where compiled JavaScript output lives
|
||||
return '../lib/theme';
|
||||
},
|
||||
getTypeScriptThemePath() {
|
||||
// Where TypeScript source code lives
|
||||
return '../src/theme';
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `getSwizzleComponentList()` {#getSwizzleComponentList}
|
||||
|
||||
**This is a static method, not attached to any plugin instance.**
|
||||
|
||||
Returns a list of stable components that are considered safe for swizzling. These components will be swizzlable without `--danger`. All components are considered unstable by default. If an empty array is returned, all components are considered unstable. If `undefined` is returned, all components are considered stable.
|
||||
|
||||
```js title="my-theme/src/index.js"
|
||||
const swizzleAllowedComponents = [
|
||||
'CodeBlock',
|
||||
'DocSidebar',
|
||||
'Footer',
|
||||
'NotFound',
|
||||
'SearchBar',
|
||||
'hooks/useTheme',
|
||||
'prism-include-languages',
|
||||
];
|
||||
|
||||
myTheme.getSwizzleComponentList = () => swizzleAllowedComponents;
|
||||
```
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# I18n lifecycles
|
||||
|
||||
Plugins use these lifecycles to load i18n-related data.
|
||||
|
||||
## `getTranslationFiles({content})` {#getTranslationFiles}
|
||||
|
||||
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` should be omitted to remain generic.
|
||||
- `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()`](#translateContent) and [`translateThemeConfig()`](#translateThemeConfig)
|
||||
|
||||
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})` {#translateContent}
|
||||
|
||||
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})` {#translateThemeConfig}
|
||||
|
||||
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()` {#getDefaultCodeTranslationMessages}
|
||||
|
||||
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's 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
|
||||
};
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,420 @@
|
|||
---
|
||||
sidebar_position: 1
|
||||
toc_max_heading_level: 4
|
||||
---
|
||||
|
||||
# Lifecycle APIs
|
||||
|
||||
During the build, plugins are loaded in parallel to fetch their own contents and render them to routes. Plugins may also configure webpack or post-process the generated files.
|
||||
|
||||
## `async loadContent()` {#loadContent}
|
||||
|
||||
Plugins should use this lifecycle to fetch from data sources (filesystem, remote API, headless CMS, etc.) or do some server processing. The return value is the content it needs.
|
||||
|
||||
For example, this plugin below returns a random integer between 1 to 10 as content.
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// highlight-start
|
||||
async loadContent() {
|
||||
return 1 + Math.floor(Math.random() * 10);
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `async contentLoaded({content, actions})` {#contentLoaded}
|
||||
|
||||
The data that was loaded in `loadContent` will be consumed in `contentLoaded`. It can be rendered to routes, registered as global data, etc.
|
||||
|
||||
### `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` {#addRoute}
|
||||
|
||||
Create a route to add to the website.
|
||||
|
||||
```ts
|
||||
type RouteConfig = {
|
||||
path: string;
|
||||
component: string;
|
||||
modules?: RouteModules;
|
||||
routes?: RouteConfig[];
|
||||
exact?: boolean;
|
||||
priority?: number;
|
||||
};
|
||||
type RouteModules = {
|
||||
[module: string]: Module | RouteModules | RouteModules[];
|
||||
};
|
||||
type Module =
|
||||
| {
|
||||
path: string;
|
||||
__import?: boolean;
|
||||
query?: ParsedUrlQueryInput;
|
||||
}
|
||||
| string;
|
||||
```
|
||||
|
||||
#### `createData(name: string, data: any): Promise<string>` {#createData}
|
||||
|
||||
A declarative callback to create static data (generally JSON or string) which can later be provided to your routes as props. Takes the file name and data to be stored, and returns the actual data file's path.
|
||||
|
||||
For example, this plugin below creates a `/friends` page which displays `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 title="docusaurus-friends-plugin/src/index.js"
|
||||
export default function friendsPlugin(context, options) {
|
||||
return {
|
||||
name: 'docusaurus-friends-plugin',
|
||||
// highlight-start
|
||||
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,
|
||||
});
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
#### `setGlobalData(data: any): void` {#setGlobalData}
|
||||
|
||||
This function permits one 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 becomes accessible to your client-side/theme code through the [`useGlobalData`](../../docusaurus-core.md#useGlobalData) and [`usePluginData`](../../docusaurus-core.md#usePluginData) hooks.
|
||||
|
||||
:::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 creates a `/friends` page which displays `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 title="docusaurus-friends-plugin/src/index.js"
|
||||
export default function friendsPlugin(context, options) {
|
||||
return {
|
||||
name: 'docusaurus-friends-plugin',
|
||||
// highlight-start
|
||||
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,
|
||||
});
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
## `configureWebpack(config, isServer, utils, content)` {#configureWebpack}
|
||||
|
||||
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 second 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 configuration conditionally.
|
||||
|
||||
For example, this plugin below modify the webpack config to transpile `.foo` files.
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'custom-docusaurus-plugin',
|
||||
// highlight-start
|
||||
configureWebpack(config, isServer, utils) {
|
||||
const {getJSLoader} = utils;
|
||||
return {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.foo$/,
|
||||
use: [getJSLoader(isServer), 'my-custom-webpack-loader'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
### `content` {#content-1}
|
||||
|
||||
`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.
|
||||
|
||||
### Configuring dev server {#configuring-dev-server}
|
||||
|
||||
The dev server can be configured through returning a `devServer` field.
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'custom-docusaurus-plugin',
|
||||
configureWebpack(config, isServer, utils) {
|
||||
return {
|
||||
// highlight-start
|
||||
devServer: {
|
||||
open: '/docs', // Opens localhost:3000/docs instead of localhost:3000/
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `configurePostCss(options)` {#configurePostCss}
|
||||
|
||||
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)` {#postBuild}
|
||||
|
||||
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>[];
|
||||
content: Content;
|
||||
}
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```js title="docusaurus-plugin/src/index.js"
|
||||
module.exports = function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// highlight-start
|
||||
async postBuild({siteConfig = {}, routesPaths = [], outDir}) {
|
||||
// Print out to console all the rendered routes.
|
||||
routesPaths.map((route) => {
|
||||
console.log(route);
|
||||
});
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `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.
|
||||
|
||||
```ts
|
||||
function injectHtmlTags(): {
|
||||
headTags?: HtmlTags;
|
||||
preBodyTags?: HtmlTags;
|
||||
postBodyTags?: HtmlTags;
|
||||
};
|
||||
|
||||
type HtmlTags = string | HtmlTagObject | (string | HtmlTagObject)[];
|
||||
|
||||
type 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
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
## `getClientModules()` {#getClientModules}
|
||||
|
||||
Returns an array of paths to the [client modules](../../advanced/client.md#client-modules) that are to be imported into the client bundle.
|
||||
|
||||
As an example, to make your theme load a `customCss` or `customJs` file path from `options` passed in by the user:
|
||||
|
||||
```js 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',
|
||||
// highlight-start
|
||||
getClientModules() {
|
||||
return [customCss, customJs];
|
||||
},
|
||||
// highlight-end
|
||||
};
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Static methods
|
||||
|
||||
Static methods are not part of the plugin instance—they are attached to the constructor function. These methods are used to validate and normalize the plugin options and theme config, which are then used as constructor parameters to initialize the plugin instance.
|
||||
|
||||
## `validateOptions({options, validate})` {#validateOptions}
|
||||
|
||||
Returns validated and normalized options for the plugin. This method is called before the plugin is initialized. You must return the options since they will be passed to the 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 the arguments, 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 title="my-plugin/src/index.js"
|
||||
function myPlugin(context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// rest of methods
|
||||
};
|
||||
}
|
||||
|
||||
// highlight-start
|
||||
myPlugin.validateOptions = ({options, validate}) => {
|
||||
const validatedOptions = validate(myValidationSchema, options);
|
||||
return validationOptions;
|
||||
};
|
||||
// highlight-end
|
||||
|
||||
module.exports = myPlugin;
|
||||
```
|
||||
|
||||
In TypeScript, you can also choose to export this as a separate named export.
|
||||
|
||||
```ts title="my-plugin/src/index.ts"
|
||||
export default function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// rest of methods
|
||||
};
|
||||
}
|
||||
|
||||
// highlight-start
|
||||
export function validateOptions({options, validate}) {
|
||||
const validatedOptions = validate(myValidationSchema, options);
|
||||
return validationOptions;
|
||||
}
|
||||
// highlight-end
|
||||
```
|
||||
|
||||
## `validateThemeConfig({themeConfig, validate})` {#validateThemeConfig}
|
||||
|
||||
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 the arguments, 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 title="my-theme/src/index.js"
|
||||
function myPlugin(context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// rest of methods
|
||||
};
|
||||
}
|
||||
|
||||
// highlight-start
|
||||
myPlugin.validateThemeConfig = ({themeConfig, validate}) => {
|
||||
const validatedThemeConfig = validate(myValidationSchema, options);
|
||||
return validatedThemeConfig;
|
||||
};
|
||||
// highlight-end
|
||||
|
||||
module.exports = validateThemeConfig;
|
||||
```
|
||||
|
||||
In TypeScript, you can also choose to export this as a separate named export.
|
||||
|
||||
```ts title="my-theme/src/index.ts"
|
||||
export default function (context, options) {
|
||||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
// rest of methods
|
||||
};
|
||||
}
|
||||
|
||||
// highlight-start
|
||||
export function validateThemeConfig({themeConfig, validate}) {
|
||||
const validatedThemeConfig = validate(myValidationSchema, options);
|
||||
return validatedThemeConfig;
|
||||
}
|
||||
// highlight-end
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
label: Plugins
|
||||
position: 2
|
||||
link:
|
||||
type: doc
|
||||
id: api/plugins/plugins-overview # Dogfood using a "qualified id"
|
||||
30
website/versioned_docs/version-2.2.0/api/plugins/overview.md
Normal file
30
website/versioned_docs/version-2.2.0/api/plugins/overview.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
---
|
||||
sidebar_position: 0
|
||||
id: plugins-overview
|
||||
sidebar_label: Plugins overview
|
||||
slug: /api/plugins
|
||||
---
|
||||
|
||||
# Docusaurus 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,127 @@
|
|||
---
|
||||
sidebar_position: 4
|
||||
slug: /api/plugins/@docusaurus/plugin-client-redirects
|
||||
---
|
||||
|
||||
# 📦 plugin-client-redirects
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
Docusaurus Plugin to generate **client-side redirects**.
|
||||
|
||||
This plugin will write additional HTML pages to your static site that redirect the user to your existing Docusaurus pages with JavaScript.
|
||||
|
||||
:::caution production only
|
||||
|
||||
This plugin is always inactive in development and **only active in production** because it works on the build output.
|
||||
|
||||
:::
|
||||
|
||||
:::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}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<APITable>
|
||||
```
|
||||
|
||||
| Option | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `fromExtensions` | `string[]` | `[]` | The extensions to be removed from the route after redirecting. |
|
||||
| `toExtensions` | `string[]` | `[]` | The extensions to be appended to the route after redirecting. |
|
||||
| `redirects` | <code><a href="#RedirectRule">RedirectRule</a>[]</code> | `[]` | The list of redirect rules. |
|
||||
| `createRedirects` | <code><a href="#CreateRedirectsFn">CreateRedirectsFn</a></code> | `undefined` | A callback to create a redirect rule. Docusaurus query this callback against every path it has created, and use its return value to output more paths. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
This plugin will also read the [`siteConfig.onDuplicateRoutes`](../docusaurus.config.js.md#onDuplicateRoutes) config to adjust its logging level when multiple files will be emitted to the same location.
|
||||
|
||||
:::
|
||||
|
||||
### Types {#types}
|
||||
|
||||
#### `RedirectRule` {#RedirectRule}
|
||||
|
||||
```ts
|
||||
type RedirectRule = {
|
||||
to: string;
|
||||
from: string | string[];
|
||||
};
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
The idea of "from" and "to" is central in this plugin. "From" means a path that you want to _create_, i.e. an extra HTML file that will be written; "to" means a path to want to redirect _to_, usually a route that Docusaurus already knows about.
|
||||
|
||||
This is why you can have multiple "from" for the same "to": we will create multiple HTML files that all redirect to the same destination. On the other hand, one "from" can never have more than one "to": the written HTML file needs to have a determinate destination.
|
||||
|
||||
:::
|
||||
|
||||
#### `CreateRedirectsFn` {#CreateRedirectsFn}
|
||||
|
||||
```ts
|
||||
// The parameter `path` is a route that Docusaurus has already created. It can
|
||||
// be seen as the "to", and your return value is the "from". Returning a falsy
|
||||
// value will not create any redirect pages for this particular path.
|
||||
type CreateRedirectsFn = (path: string) => string[] | string | null | undefined;
|
||||
```
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
Here's an example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-client-redirects',
|
||||
// highlight-start
|
||||
{
|
||||
fromExtensions: ['html', 'htm'], // /myPage.html -> /myPage
|
||||
toExtensions: ['exe', 'zip'], // /myAsset -> /myAsset.zip (if latter exists)
|
||||
redirects: [
|
||||
// /docs/oldDoc -> /docs/newDoc
|
||||
{
|
||||
to: '/docs/newDoc',
|
||||
from: '/docs/oldDoc',
|
||||
},
|
||||
// Redirect from multiple old paths to the new path
|
||||
{
|
||||
to: '/docs/newDoc2',
|
||||
from: ['/docs/oldDocFrom2019', '/docs/legacyDocFrom2016'],
|
||||
},
|
||||
],
|
||||
createRedirects(existingPath) {
|
||||
if (existingPath.includes('/community')) {
|
||||
// Redirect from /docs/team/X to /community/X and /docs/support/X to /community/X
|
||||
return [
|
||||
existingPath.replace('/community', '/docs/team'),
|
||||
existingPath.replace('/community', '/docs/support'),
|
||||
];
|
||||
}
|
||||
return undefined; // Return a falsy value: no redirect created
|
||||
},
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
slug: /api/plugins/@docusaurus/plugin-content-blog
|
||||
---
|
||||
|
||||
# 📦 plugin-content-blog
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
Provides the [Blog](blog.mdx) feature and is the default blog plugin for Docusaurus.
|
||||
|
||||
:::caution some features production only
|
||||
|
||||
The [feed feature](../../blog.mdx#feed) works by extracting the build output, and is **only active in production**.
|
||||
|
||||
:::
|
||||
|
||||
## 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:
|
||||
|
||||
```mdx-code-block
|
||||
<APITable>
|
||||
```
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `path` | `string` | `'blog'` | Path to the blog content directory on the file system, relative to site dir. |
|
||||
| `editUrl` | <code>string \| <a href="#EditUrlFn">EditUrlFn</a></code> | `undefined` | Base URL to edit your site. The final URL is computed by `editUrl + relativePostPath`. Using a function allows more nuanced control for each file. Omitting this variable entirely will disable edit links. |
|
||||
| `editLocalizedFiles` | `boolean` | `false` | 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 section of your blog. Will be appended to `routeBasePath`. **DO NOT** include a trailing slash. |
|
||||
| `archiveBasePath` | <code>string \| null</code> | `'archive'` | URL route for the archive section of your blog. Will be appended to `routeBasePath`. **DO NOT** include a trailing slash. Use `null` to disable generation of archive. |
|
||||
| `include` | `string[]` | `['**/*.{md,mdx}']` | Array of glob patterns matching Markdown files to be built, relative to the content path. |
|
||||
| `exclude` | `string[]` | _See example configuration_ | Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the `include` option. |
|
||||
| `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. |
|
||||
| `blogArchiveComponent` | `string` | `'@theme/BlogArchivePage'` | Root component of the blog archive 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` | `RegExp` | `/<!--\s*(truncate)\s*-->/` | Truncate marker marking where the summary ends. |
|
||||
| `showReadingTime` | `boolean` | `true` | Show estimated reading time for the blog post. |
|
||||
| `readingTime` | `ReadingTimeFn` | 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. |
|
||||
| `feedOptions` | _See below_ | `{type: ['rss', 'atom']}` | Blog feed. |
|
||||
| `feedOptions.type` | <code><a href="#FeedType">FeedType</a> \| <a href="#FeedType">FeedType</a>[] \| 'all' \| null</code> | **Required** | Type of feed to be generated. Use `null` to disable generation. |
|
||||
| `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. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
### Types {#types}
|
||||
|
||||
#### `EditUrlFn` {#EditUrlFn}
|
||||
|
||||
```ts
|
||||
type EditUrlFunction = (params: {
|
||||
blogDirPath: string;
|
||||
blogPath: string;
|
||||
permalink: string;
|
||||
locale: string;
|
||||
}) => string | undefined;
|
||||
```
|
||||
|
||||
#### `ReadingTimeFn` {#ReadingTimeFn}
|
||||
|
||||
```ts
|
||||
type ReadingTimeOptions = {
|
||||
wordsPerMinute: number;
|
||||
wordBound: (char: string) => boolean;
|
||||
};
|
||||
|
||||
type ReadingTimeCalculator = (params: {
|
||||
content: string;
|
||||
frontMatter?: BlogPostFrontMatter & Record<string, unknown>;
|
||||
options?: ReadingTimeOptions;
|
||||
}) => number;
|
||||
|
||||
type ReadingTimeFn = (params: {
|
||||
content: string;
|
||||
frontMatter: BlogPostFrontMatter & Record<string, unknown>;
|
||||
defaultReadingTime: ReadingTimeCalculator;
|
||||
}) => number | undefined;
|
||||
```
|
||||
|
||||
#### `FeedType` {#FeedType}
|
||||
|
||||
```ts
|
||||
type FeedType = 'rss' | 'atom' | 'json';
|
||||
```
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
You can configure this plugin through preset options or plugin options.
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
```js config-tabs
|
||||
// Preset Options: blog
|
||||
// Plugin Options: @docusaurus/plugin-content-blog
|
||||
|
||||
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}) =>
|
||||
`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,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Markdown front matter {#markdown-front-matter}
|
||||
|
||||
Markdown documents can use the following Markdown front matter metadata fields, enclosed by a line `---` on either side.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<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_*` front matter 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. Draft blog posts will only 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: `/`. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
```ts
|
||||
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 front matter authors field allows various possible shapes
|
||||
type Authors = AuthorKey | Author | (AuthorKey | Author)[];
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```md
|
||||
---
|
||||
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,365 @@
|
|||
---
|
||||
sidebar_position: 1
|
||||
slug: /api/plugins/@docusaurus/plugin-content-docs
|
||||
---
|
||||
|
||||
# 📦 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.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<APITable>
|
||||
```
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `path` | `string` | `'docs'` | Path to the docs content directory on the file system, relative to site directory. |
|
||||
| `editUrl` | <code>string \| <a href="#EditUrlFunction">EditUrlFunction</a></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}']` | Array of glob patterns matching Markdown files to be built, relative to the content path. |
|
||||
| `exclude` | `string[]` | _See example configuration_ | Array of glob patterns matching Markdown files to be excluded. Serves as refinement based on the `include` option. |
|
||||
| `sidebarPath` | <code>false \| string</code> | `undefined` | Path to sidebar configuration. Use `false` to disable sidebars, or `undefined` to create a fully autogenerated sidebar. |
|
||||
| `sidebarCollapsible` | `boolean` | `true` | Whether sidebar categories are collapsible by default. See also [Collapsible categories](/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` | <a href="#SidebarGenerator"><code>SidebarGenerator</code></a> | _Omitted_ | Function used to replace the sidebar items of type `'autogenerated'` with real sidebar items (docs, categories, links...). See also [Customize the sidebar items generator](/docs/sidebar#customize-the-sidebar-items-generator) |
|
||||
| `numberPrefixParser` | <code>boolean \|</code> <a href="#PrefixParser"><code>PrefixParser</code></a> | _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. Provides the version data context, and is not unmounted when switching docs. |
|
||||
| `docItemComponent` | `string` | `'@theme/DocItem'` | Main doc container, with TOC, pagination, etc. |
|
||||
| `docTagsListComponent` | `string` | `'@theme/DocTagsListPage'` | Root component of the tags list page |
|
||||
| `docTagDocListComponent` | `string` | `'@theme/DocTagDocListPage'` | Root component of the "docs containing tag X" page. |
|
||||
| `docCategoryGeneratedIndexComponent` | `string` | `'@theme/DocCategoryGeneratedIndexPage'` | Root component of the generated category index page. |
|
||||
| `remarkPlugins` | `any[]` | `[]` | Remark plugins passed to MDX. |
|
||||
| `rehypePlugins` | `any[]` | `[]` | Rehype plugins passed to MDX. |
|
||||
| `beforeDefaultRemarkPlugins` | `any[]` | `[]` | Custom Remark plugins passed to MDX before the default Docusaurus Remark plugins. |
|
||||
| `beforeDefaultRehypePlugins` | `any[]` | `[]` | Custom Rehype plugins passed to MDX before the default Docusaurus Rehype plugins. |
|
||||
| `showLastUpdateAuthor` | `boolean` | `false` | Whether to display the author who last updated the doc. |
|
||||
| `showLastUpdateTime` | `boolean` | `false` | Whether to display the last date the doc was updated. |
|
||||
| `breadcrumbs` | `boolean` | `true` | Enable or disable the breadcrumbs on doc pages. |
|
||||
| `disableVersioning` | `boolean` | `false` | Explicitly disable versioning even when multiple versions exist. This will make the site only include the current version. Will error if `includeCurrentVersion: false` and `disableVersioning: true`. |
|
||||
| `includeCurrentVersion` | `boolean` | `true` | Include the current version of your docs. |
|
||||
| `lastVersion` | `string` | First version in `versions.json` | The version navigated to in priority and displayed by default for docs navbar items. |
|
||||
| `onlyIncludeVersions` | `string[]` | All versions available | Only include a subset of all available versions. |
|
||||
| `versions` | <a href="#VersionsConfig"><code>VersionsConfig</code></a> | `{}` | Independent customization of each version's properties. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
### Types {#types}
|
||||
|
||||
#### `EditUrlFunction` {#EditUrlFunction}
|
||||
|
||||
```ts
|
||||
type EditUrlFunction = (params: {
|
||||
version: string;
|
||||
versionDocsDirPath: string;
|
||||
docPath: string;
|
||||
permalink: string;
|
||||
locale: string;
|
||||
}) => string | undefined;
|
||||
```
|
||||
|
||||
#### `PrefixParser` {#PrefixParser}
|
||||
|
||||
```ts
|
||||
type PrefixParser = (filename: string) => {
|
||||
filename: string;
|
||||
numberPrefix?: number;
|
||||
};
|
||||
```
|
||||
|
||||
#### `SidebarGenerator` {#SidebarGenerator}
|
||||
|
||||
```ts
|
||||
type SidebarGenerator = (generatorArgs: {
|
||||
/** The sidebar item with type "autogenerated" to be transformed. */
|
||||
item: {type: 'autogenerated'; dirName: string};
|
||||
/** Useful metadata for the version this sidebar belongs to. */
|
||||
version: {contentPath: string; versionName: string};
|
||||
/** All the docs of that version (unfiltered). */
|
||||
docs: {
|
||||
id: string;
|
||||
title: string;
|
||||
frontMatter: DocFrontMatter & Record<string, unknown>;
|
||||
source: string;
|
||||
sourceDirName: string;
|
||||
sidebarPosition?: number | undefined;
|
||||
}[];
|
||||
/** Number prefix parser configured for this plugin. */
|
||||
numberPrefixParser: PrefixParser;
|
||||
/** The default category index matcher which you can override. */
|
||||
isCategoryIndex: CategoryIndexMatcher;
|
||||
/**
|
||||
* key is the path relative to the doc content directory, value is the
|
||||
* category metadata file's content.
|
||||
*/
|
||||
categoriesMetadata: {[filePath: string]: CategoryMetadata};
|
||||
/**
|
||||
* Useful to re-use/enhance the default sidebar generation logic from
|
||||
* Docusaurus.
|
||||
*/
|
||||
defaultSidebarItemsGenerator: SidebarGenerator;
|
||||
// Returns an array of sidebar items — same as what you can declare in
|
||||
// sidebars.js, except for shorthands. See https://docusaurus.io/docs/sidebar/items
|
||||
}) => Promise<SidebarItem[]>;
|
||||
|
||||
type CategoryIndexMatcher = (param: {
|
||||
/** The file name, without extension */
|
||||
fileName: string;
|
||||
/**
|
||||
* The list of directories, from lowest level to highest.
|
||||
* If there's no dir name, directories is ['.']
|
||||
*/
|
||||
directories: string[];
|
||||
/** The extension, with a leading dot */
|
||||
extension: string;
|
||||
}) => boolean;
|
||||
```
|
||||
|
||||
#### `VersionsConfig` {#VersionsConfig}
|
||||
|
||||
```ts
|
||||
type VersionConfig = {
|
||||
/**
|
||||
* The base path of the version, will be appended to `baseUrl` +
|
||||
* `routeBasePath`.
|
||||
*/
|
||||
path?: string;
|
||||
/** The label of the version to be used in badges, dropdowns, etc. */
|
||||
label?: string;
|
||||
/** The banner to show at the top of a doc of that version. */
|
||||
banner?: 'none' | 'unreleased' | 'unmaintained';
|
||||
/** Show a badge with the version label at the top of each doc. */
|
||||
badge?: boolean;
|
||||
/** Prevents search engines from indexing this version */
|
||||
noIndex?: boolean;
|
||||
/** Add a custom class name to the <html> element of each doc */
|
||||
className?: string;
|
||||
};
|
||||
|
||||
type VersionsConfig = {[versionName: string]: VersionConfig};
|
||||
```
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
You can configure this plugin through preset options or plugin options.
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
```js config-tabs
|
||||
// Preset Options: docs
|
||||
// Plugin Options: @docusaurus/plugin-content-docs
|
||||
|
||||
const config = {
|
||||
path: 'docs',
|
||||
breadcrumbs: true,
|
||||
// Simple use-case: string editUrl
|
||||
// editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/',
|
||||
// Advanced use-case: functional editUrl
|
||||
editUrl: ({versionDocsDirPath, docPath}) =>
|
||||
`https://github.com/facebook/docusaurus/edit/main/website/${versionDocsDirPath}/${docPath}`,
|
||||
editLocalizedFiles: false,
|
||||
editCurrentVersion: false,
|
||||
routeBasePath: 'docs',
|
||||
include: ['**/*.md', '**/*.mdx'],
|
||||
exclude: [
|
||||
'**/_*.{js,jsx,ts,tsx,md,mdx}',
|
||||
'**/_*/**',
|
||||
'**/*.test.{js,jsx,ts,tsx}',
|
||||
'**/__tests__/**',
|
||||
],
|
||||
sidebarPath: 'sidebars.js',
|
||||
async sidebarItemsGenerator({
|
||||
defaultSidebarItemsGenerator,
|
||||
numberPrefixParser,
|
||||
item,
|
||||
version,
|
||||
docs,
|
||||
isCategoryIndex,
|
||||
}) {
|
||||
// Use the provided data to generate a custom sidebar slice
|
||||
return [
|
||||
{type: 'doc', id: 'intro'},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Tutorials',
|
||||
items: [
|
||||
{type: 'doc', id: 'tutorial1'},
|
||||
{type: 'doc', id: 'tutorial2'},
|
||||
],
|
||||
},
|
||||
];
|
||||
},
|
||||
numberPrefixParser(filename) {
|
||||
// Implement your own logic to extract a potential number prefix
|
||||
const numberPrefix = findNumberPrefix(filename);
|
||||
// Prefix found: return it with the cleaned filename
|
||||
if (numberPrefix) {
|
||||
return {
|
||||
numberPrefix,
|
||||
filename: filename.replace(prefix, ''),
|
||||
};
|
||||
}
|
||||
// No number prefix found
|
||||
return {numberPrefix: undefined, filename};
|
||||
},
|
||||
docLayoutComponent: '@theme/DocPage',
|
||||
docItemComponent: '@theme/DocItem',
|
||||
remarkPlugins: [require('remark-math')],
|
||||
rehypePlugins: [],
|
||||
beforeDefaultRemarkPlugins: [],
|
||||
beforeDefaultRehypePlugins: [],
|
||||
showLastUpdateAuthor: false,
|
||||
showLastUpdateTime: false,
|
||||
disableVersioning: false,
|
||||
includeCurrentVersion: true,
|
||||
lastVersion: undefined,
|
||||
versions: {
|
||||
current: {
|
||||
label: 'Android SDK v2.0.0 (WIP)',
|
||||
path: 'android-2.0.0',
|
||||
banner: 'none',
|
||||
},
|
||||
'1.0.0': {
|
||||
label: 'Android SDK v1.0.0',
|
||||
path: 'android-1.0.0',
|
||||
banner: 'unmaintained',
|
||||
},
|
||||
},
|
||||
onlyIncludeVersions: ['current', '1.0.0', '2.0.0'],
|
||||
};
|
||||
```
|
||||
|
||||
## Markdown front matter {#markdown-front-matter}
|
||||
|
||||
Markdown documents can use the following Markdown front matter metadata fields, enclosed by a line `---` on either side.
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<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. |
|
||||
| `sidebar_custom_props` | `string` | `undefined` | Assign custom metadata to the sidebar item referencing this doc. |
|
||||
| `displayed_sidebar` | `string` | `undefined` | Force the display of a given sidebar when browsing the current document. Read the [multiple sidebars guide](../../guides/docs/sidebar/multiple-sidebars.md) for details. |
|
||||
| `hide_title` | `boolean` | `false` | Whether to hide the title at the top of the doc. It only hides a title declared through the front matter, and have no effect on a Markdown title at the top of your document. |
|
||||
| `hide_table_of_contents` | `boolean` | `false` | Whether to hide the table of contents to the right. |
|
||||
| `toc_min_heading_level` | `number` | `2` | The minimum heading level shown in the table of contents. Must be between 2 and 6 and lower or equal to the max value. |
|
||||
| `toc_max_heading_level` | `number` | `3` | The max heading level shown in the table of contents. Must be between 2 and 6. |
|
||||
| `pagination_next` | <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. |
|
||||
| `draft` | `boolean` | `false` | A boolean flag to indicate that a document is a work-in-progress. Draft documents will only be displayed during development. |
|
||||
| `last_update` | `FileChange` | `undefined` | Allows overriding the last updated author and/or date. Date can be any [parsable date string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse). |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
```ts
|
||||
type Tag = string | {label: string; permalink: string};
|
||||
```
|
||||
|
||||
```ts
|
||||
type FileChange = {date: string; author: string};
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```md
|
||||
---
|
||||
id: doc-markdown
|
||||
title: Docs Markdown Features
|
||||
hide_title: false
|
||||
hide_table_of_contents: false
|
||||
sidebar_label: Markdown
|
||||
sidebar_position: 3
|
||||
pagination_label: Markdown features
|
||||
custom_edit_url: https://github.com/facebook/docusaurus/edit/main/docs/api-doc-markdown.md
|
||||
description: How do I find you when I cannot solve this problem
|
||||
keywords:
|
||||
- docs
|
||||
- docusaurus
|
||||
image: https://i.imgur.com/mErPwqL.png
|
||||
slug: /myDoc
|
||||
last_update:
|
||||
date: 1/1/2000
|
||||
author: custom author name
|
||||
---
|
||||
|
||||
# Markdown Features
|
||||
|
||||
My Document Markdown content
|
||||
```
|
||||
|
||||
## i18n {#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/[versionName]`
|
||||
|
||||
### 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,101 @@
|
|||
---
|
||||
sidebar_position: 3
|
||||
slug: /api/plugins/@docusaurus/plugin-content-pages
|
||||
---
|
||||
|
||||
# 📦 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.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<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. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
You can configure this plugin through preset options or plugin options.
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
```js config-tabs
|
||||
// Preset Options: pages
|
||||
// Plugin Options: @docusaurus/plugin-content-pages
|
||||
|
||||
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: [],
|
||||
};
|
||||
```
|
||||
|
||||
## 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
|
||||
```
|
||||
108
website/versioned_docs/version-2.2.0/api/plugins/plugin-debug.md
Normal file
108
website/versioned_docs/version-2.2.0/api/plugins/plugin-debug.md
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
---
|
||||
sidebar_position: 5
|
||||
slug: /api/plugins/@docusaurus/plugin-debug
|
||||
---
|
||||
|
||||
# 📦 plugin-debug
|
||||
|
||||
```mdx-code-block
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
:::info
|
||||
|
||||
If you use the plugin via the classic preset, the preset will **enable the plugin in development and disable it in production** by default (`debug: undefined`) to avoid exposing potentially sensitive information. You can use `debug: true` to always enable it or `debug: false` to always disable it.
|
||||
|
||||
If you use a standalone plugin, you may need to achieve the same effect by checking the environment:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
// highlight-next-line
|
||||
process.env.NODE_ENV === 'production' && '@docusaurus/plugin-debug',
|
||||
].filter(Boolean),
|
||||
};
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::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](/__docusaurus/debug).
|
||||
|
||||
:::
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-debug
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you use the preset `@docusaurus/preset-classic`, you don't need to install this plugin as a dependency.
|
||||
|
||||
You can configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
This plugin currently has no options.
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
You can configure this plugin through preset options or plugin options.
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
```mdx-code-block
|
||||
<Tabs groupId="api-config-ex">
|
||||
<TabItem value="preset" label="Preset options">
|
||||
```
|
||||
|
||||
If you use a preset, configure this plugin through the [preset options](../../using-plugins.md#docusauruspreset-classic):
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'@docusaurus/preset-classic',
|
||||
{
|
||||
// highlight-next-line
|
||||
debug: true, // This will enable the plugin in production
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
</TabItem>
|
||||
<TabItem value="plugin" label="Plugin Options">
|
||||
```
|
||||
|
||||
If you are using a standalone plugin, provide options directly to the plugin:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// highlight-next-line
|
||||
plugins: ['@docusaurus/plugin-debug'],
|
||||
};
|
||||
```
|
||||
|
||||
```mdx-code-block
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
```
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
sidebar_position: 6
|
||||
slug: /api/plugins/@docusaurus/plugin-google-analytics
|
||||
---
|
||||
|
||||
# 📦 plugin-google-analytics
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
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.
|
||||
|
||||
:::caution production only
|
||||
|
||||
This plugin is always inactive in development and **only active in production** to avoid polluting the analytics statistics.
|
||||
|
||||
:::
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-google-analytics
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you use the preset `@docusaurus/preset-classic`, you don't need to install this plugin as a dependency.
|
||||
|
||||
You can configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<APITable>
|
||||
```
|
||||
|
||||
| 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. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
You can configure this plugin through preset options or plugin options.
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
```js config-tabs
|
||||
// Preset Options: googleAnalytics
|
||||
// Plugin Options: @docusaurus/plugin-google-analytics
|
||||
|
||||
const config = {
|
||||
trackingID: 'UA-141789564-1',
|
||||
anonymizeIP: true,
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
---
|
||||
sidebar_position: 7
|
||||
slug: /api/plugins/@docusaurus/plugin-google-gtag
|
||||
---
|
||||
|
||||
# 📦 plugin-google-gtag
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
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. 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!
|
||||
|
||||
:::
|
||||
|
||||
:::caution production only
|
||||
|
||||
This plugin is always inactive in development and **only active in production** to avoid polluting the analytics statistics.
|
||||
|
||||
:::
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-google-gtag
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
If you use the preset `@docusaurus/preset-classic`, you don't need to install this plugin as a dependency.
|
||||
|
||||
You can configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<APITable>
|
||||
```
|
||||
|
||||
| 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. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
You can configure this plugin through preset options or plugin options.
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
```js config-tabs
|
||||
// Preset Options: gtag
|
||||
// Plugin Options: @docusaurus/plugin-google-gtag
|
||||
|
||||
const config = {
|
||||
trackingID: 'G-226F0LR9KE',
|
||||
anonymizeIP: true,
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
sidebar_position: 8
|
||||
slug: /api/plugins/@docusaurus/plugin-ideal-image
|
||||
---
|
||||
|
||||
# 📦 plugin-ideal-image
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder).
|
||||
|
||||
:::info
|
||||
|
||||
By default, the plugin is **inactive in development** so you could always view full-scale images. If you want to debug the ideal image behavior, you could set the [`disableInDev`](#disableInDev) option to `false`.
|
||||
|
||||
:::
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @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')} />
|
||||
```
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<APITable>
|
||||
```
|
||||
|
||||
| Option | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `name` | `string` | `ideal-img/[name].[hash:hex:7].[width].[ext]` | Filename template for output files. |
|
||||
| `sizes` | `number[]` | _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` | `number` | _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` | `number` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. |
|
||||
| `max` | `number` | | See `min` above |
|
||||
| `steps` | `number` | `4` | Configure the number of images generated between `min` and `max` (inclusive) |
|
||||
| `quality` | `number` | `85` | JPEG compression quality |
|
||||
| `disableInDev` | `boolean` | `true` | You can test ideal image behavior in dev mode by setting this to `false`. **Tip**: use [network throttling](https://www.browserstack.com/guide/how-to-perform-network-throttling-in-chrome) in your browser to simulate slow networks. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
Here's an example configuration:
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
plugins: [
|
||||
[
|
||||
'@docusaurus/plugin-ideal-image',
|
||||
// highlight-start
|
||||
{
|
||||
quality: 70,
|
||||
max: 1030, // max resized image's size.
|
||||
min: 640, // min resized image's size. if original is lower, use that size.
|
||||
steps: 2, // the max number of images generated between min and max (inclusive)
|
||||
disableInDev: false,
|
||||
},
|
||||
// highlight-end
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
303
website/versioned_docs/version-2.2.0/api/plugins/plugin-pwa.md
Normal file
303
website/versioned_docs/version-2.2.0/api/plugins/plugin-pwa.md
Normal file
|
|
@ -0,0 +1,303 @@
|
|||
---
|
||||
sidebar_position: 9
|
||||
slug: /api/plugins/@docusaurus/plugin-pwa
|
||||
---
|
||||
|
||||
# 📦 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: `('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 <= 996px)
|
||||
- `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://developer.chrome.com/docs/workbox/reference/workbox-build/#type-InjectManifestOptions) 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}'],
|
||||
// ...
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### `pwaHead` {#pwahead}
|
||||
|
||||
- Type: `({ tagName: string; [attributeName: 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>
|
||||
```
|
||||
|
||||
## Customizing reload popup {#customizing-reload-popup}
|
||||
|
||||
The `@theme/PwaReloadPopup` component is rendered when a new service worker is waiting to be installed, and we suggest a reload to the user. You can [swizzle](../../swizzling.md) this component and implement your own UI. It will receive an `onReload` callback as props, which 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.
|
||||
|
||||
The default theme includes an implementation for the reload popup and uses [Infima Alerts](https://infima.dev/docs/components/alert).
|
||||
|
||||
|
||||
|
||||
Your component can render `null`, but this is not recommended: users won't have a way to get up-to-date content.
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
---
|
||||
sidebar_position: 10
|
||||
slug: /api/plugins/@docusaurus/plugin-sitemap
|
||||
---
|
||||
|
||||
# 📦 plugin-sitemap
|
||||
|
||||
import APITable from '@site/src/components/APITable';
|
||||
|
||||
This plugin creates sitemaps for your site so that search engine crawlers can crawl your site more accurately.
|
||||
|
||||
:::caution production only
|
||||
|
||||
This plugin is always inactive in development and **only active in production** because it works on the build output.
|
||||
|
||||
:::
|
||||
|
||||
## Installation {#installation}
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save @docusaurus/plugin-sitemap
|
||||
```
|
||||
|
||||
:::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:
|
||||
|
||||
```mdx-code-block
|
||||
<APITable>
|
||||
```
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `changefreq` | `string` | `'weekly'` | See [sitemap docs](https://www.sitemaps.org/protocol.html#xmlTagDefinitions) |
|
||||
| `priority` | `number` | `0.5` | See [sitemap docs](https://www.sitemaps.org/protocol.html#xmlTagDefinitions) |
|
||||
| `ignorePatterns` | `string[]` | `[]` | A list of glob patterns; matching route paths will be filtered from the sitemap. Note that you may need to include the base URL in here. |
|
||||
| `filename` | `string` | `sitemap.xml` | The path to the created sitemap file, relative to the output directory. Useful if you have two plugin instances outputting two files. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
This plugin also respects some site config:
|
||||
|
||||
- [`noIndex`](../docusaurus.config.js.md#noIndex): results in no sitemap generated
|
||||
- [`trailingSlash`](../docusaurus.config.js.md#trailingSlash): determines if the URLs in the sitemap have trailing slashes
|
||||
|
||||
:::
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
You can configure this plugin through preset options or plugin options.
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
```js config-tabs
|
||||
// Preset Options: sitemap
|
||||
// Plugin Options: @docusaurus/plugin-sitemap
|
||||
|
||||
const config = {
|
||||
changefreq: 'weekly',
|
||||
priority: 0.5,
|
||||
ignorePatterns: ['/tags/**'],
|
||||
filename: 'sitemap.xml',
|
||||
};
|
||||
```
|
||||
|
||||
You can find your sitemap at `/sitemap.xml`.
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
label: Themes
|
||||
position: 3
|
||||
link:
|
||||
type: doc
|
||||
id: themes-overview # Dogfood using a "local id"
|
||||
34
website/versioned_docs/version-2.2.0/api/themes/overview.md
Normal file
34
website/versioned_docs/version-2.2.0/api/themes/overview.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
---
|
||||
sidebar_position: 0
|
||||
id: themes-overview
|
||||
sidebar_label: Themes overview
|
||||
slug: /api/themes
|
||||
---
|
||||
|
||||
# Docusaurus 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,61 @@
|
|||
---
|
||||
sidebar_position: 2
|
||||
slug: /api/themes/@docusaurus/theme-classic
|
||||
---
|
||||
|
||||
# 📦 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.
|
||||
|
||||
:::
|
||||
|
||||
## Configuration {#configuration}
|
||||
|
||||
Accepted fields:
|
||||
|
||||
```mdx-code-block
|
||||
<APITable>
|
||||
```
|
||||
|
||||
| Option | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `customCss` | <code>string[] \| string</code> | `[]` | Stylesheets to be imported globally as [client modules](../../advanced/client.md#client-modules). Relative paths are resolved against the site directory. |
|
||||
|
||||
```mdx-code-block
|
||||
</APITable>
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
Most configuration for the theme is done in `themeConfig`, which can be found in [theme configuration](./theme-configuration.md).
|
||||
|
||||
:::
|
||||
|
||||
### Example configuration {#ex-config}
|
||||
|
||||
You can configure this theme through preset options or plugin options.
|
||||
|
||||
:::tip
|
||||
|
||||
Most Docusaurus users configure this plugin through the preset options.
|
||||
|
||||
:::
|
||||
|
||||
```js config-tabs
|
||||
// Preset Options: theme
|
||||
// Plugin Options: @docusaurus/theme-classic
|
||||
|
||||
const config = {
|
||||
customCss: require.resolve('./src/css/custom.css'),
|
||||
};
|
||||
```
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
sidebar_position: 3
|
||||
slug: /api/themes/@docusaurus/theme-live-codeblock
|
||||
---
|
||||
|
||||
# 📦 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}
|
||||
|
||||
```js 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
|
||||
slug: /api/themes/@docusaurus/theme-search-algolia
|
||||
---
|
||||
|
||||
# 📦 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 swizzlable `SearchPage` component) path with OpenSearch support. You can change this default path via `themeConfig.algolia.searchPagePath`. Use `false` to disable search page.
|
||||
|
||||
:::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