mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-03 16:59:06 +02:00
docs(v2): various improvements (#2768)
This commit is contained in:
Alexey Pyltsyn
GitHub
parent
cc688f48fc
commit
fc161b8455
20 changed files with 180 additions and 159 deletions
|
|
@ -118,13 +118,13 @@ module.exports = {
|
|||
|
||||
Accessing the feed:
|
||||
|
||||
The feed for RSS can be found at
|
||||
The feed for RSS can be found at:
|
||||
|
||||
```text
|
||||
https://{your-domain}/blog/rss.xml
|
||||
```
|
||||
|
||||
and for atom
|
||||
and for Atom:
|
||||
|
||||
```text
|
||||
https://{your-domain}/blog/atom.xml
|
||||
|
|
@ -134,9 +134,7 @@ https://{your-domain}/blog/atom.xml
|
|||
|
||||
### Blog-only mode
|
||||
|
||||
You can run your Docusaurus 2 site without a landing page and instead have your blog's post list page as the index page. Set the `routeBasePath` to be `''` to indicate it's the root path.
|
||||
|
||||
**Note:** Make sure there's no `index.js` page in `src/pages` or else there will be two files mapping to the same route!
|
||||
You can run your Docusaurus 2 site without a landing page and instead have your blog's post list page as the index page. Set the `routeBasePath` to be `'/'` to indicate it's the root path.
|
||||
|
||||
```js {9} title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
|
|
@ -155,6 +153,12 @@ module.exports = {
|
|||
};
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
Make sure there's no `index.js` page in `src/pages` or else there will be two files mapping to the same route!
|
||||
|
||||
:::
|
||||
|
||||
<!--
|
||||
|
||||
Adding a blog using the blog plugin.
|
||||
|
|
|
|||
|
|
@ -44,8 +44,8 @@ Builds and serves a preview of your site locally with [Webpack Dev Server](https
|
|||
|
||||
| Name | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| `--port` | `3000` | Specifies the port of the dev server |
|
||||
| `--host` | `localhost` | Specify a host to use. E.g., if you want your server to be accessible externally, you can use `--host 0.0.0.0` |
|
||||
| `--port` | `3000` | Specifies the port of the dev server. |
|
||||
| `--host` | `localhost` | Specify a host to use. For example, if you want your server to be accessible externally, you can use `--host 0.0.0.0`. |
|
||||
| `--hot-only` | `false` | Enables Hot Module Replacement without page refresh as fallback in case of build failures. More information [here](https://webpack.js.org/configuration/dev-server/#devserverhotonly). |
|
||||
| `--no-open` | `false` | Do not open automatically the page in the browser. |
|
||||
| `--poll` | `false` | Use polling of files rather than watching for live reload as a fallback in environments where watching doesn't work. More information [here](https://webpack.js.org/configuration/watch/#watchoptionspoll). |
|
||||
|
|
@ -64,7 +64,7 @@ Compiles your site for production.
|
|||
|
||||
| Name | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| `--bundle-analyzer` | `false` | Analyze your bundle with the [webpack bundle analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) |
|
||||
| `--bundle-analyzer` | `false` | Analyze your bundle with the [webpack bundle analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). |
|
||||
| `--out-dir` | `build` | The full path for the new output directory, relative to the current workspace. |
|
||||
| `--no-minify` | `false` | Build website without minimizing JS/CSS bundles. |
|
||||
|
||||
|
|
@ -81,7 +81,7 @@ Change any Docusaurus theme components to your liking with `docusaurus swizzle`.
|
|||
```shell
|
||||
docusaurus swizzle <themeName> [componentName] [siteDir]
|
||||
|
||||
# example (leaving out the siteDir to indicate this directory)
|
||||
# Example (leaving out the siteDir to indicate this directory)
|
||||
docusaurus swizzle @docusaurus/theme-classic DocSidebar
|
||||
```
|
||||
|
||||
|
|
@ -103,7 +103,7 @@ To learn more about swizzling, check [here](#).
|
|||
|
||||
### `docusaurus deploy`
|
||||
|
||||
Deploys your site with [GitHub Pages](https://pages.github.com/).
|
||||
Deploys your site with [GitHub Pages](https://pages.github.com/). Check out the docs on [deployment](deployment.md/#deploying-to-github-pages) for more details.
|
||||
|
||||
#### Options
|
||||
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@ However, it can be helpful if you have a high-level understanding of how the con
|
|||
|
||||
The high-level overview of Docusaurus configuration can be categorized into:
|
||||
|
||||
- [Site Metadata](#site-metadata)
|
||||
- [Deployment Configurations](#deployment-configurations)
|
||||
- [Theme, Plugin, and Preset Configurations](#theme-plugin-and-preset-configurations)
|
||||
- [Custom Configurations](#custom-configurations)
|
||||
- [Site metadata](#site-metadata)
|
||||
- [Deployment configurations](#deployment-configurations)
|
||||
- [Theme, plugin, and preset configurations](#theme-plugin-and-preset-configurations)
|
||||
- [Custom configurations](#custom-configurations)
|
||||
|
||||
For exact reference to each of the configurable fields, you may refer to [**`docusaurus.config.js` API reference**](docusaurus.config.js.md).
|
||||
|
||||
|
|
@ -126,7 +126,7 @@ module.exports = {
|
|||
|
||||
Your configuration object will be made available to all the components of your site. And you may access them via React context as `siteConfig`.
|
||||
|
||||
Basic Example:
|
||||
Basic example:
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ In this component-based development era, it is encouraged to co-locate your styl
|
|||
- Add a `/src/pages/support.js` file
|
||||
- Create a `/src/pages/support/` directory and a `/src/pages/support/index.js` file.
|
||||
|
||||
The latter is preferred as it has the benefits of letting you put files related to the page within that directory. For e.g. a CSS module file (`styles.module.css`) with styles meant to only be used on the "Support" page. **Note:** this is merely a recommended directory structure and you will still need to manually import the CSS module file within your component module (`support/index.js`).
|
||||
The latter is preferred as it has the benefits of letting you put files related to the page within that directory. For example, a CSS module file (`styles.module.css`) with styles meant to only be used on the "Support" page. **Note:** this is merely a recommended directory structure and you will still need to manually import the CSS module file within your component module (`support/index.js`).
|
||||
|
||||
```sh
|
||||
my-website
|
||||
|
|
|
|||
|
|
@ -188,8 +188,8 @@ To deploy your Docusaurus 2 sites to [Netlify](https://www.netlify.com/), first
|
|||
|
||||
```js {2-3} title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
url: 'https://docusaurus-2.netlify.com', // url to your site with no trailing slash
|
||||
baseUrl: '/', // base directory of your site relative to your repo
|
||||
url: 'https://docusaurus-2.netlify.com', // Url to your site with no trailing slash
|
||||
baseUrl: '/', // Base directory of your site relative to your repo
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
|
@ -223,7 +223,7 @@ Most importantly, however, deploying a Docusaurus project only takes a couple of
|
|||
npm i -g now
|
||||
```
|
||||
|
||||
2. Run a single command inside the root directory of your project:
|
||||
1. Run a single command inside the root directory of your project:
|
||||
|
||||
```bash
|
||||
now
|
||||
|
|
@ -239,9 +239,9 @@ Render offers [free static site hosting](https://render.com/docs/static-sites) w
|
|||
|
||||
1. Create a new **Web Service** on Render, and give Render permission to access your Docusaurus repo.
|
||||
|
||||
2. Select the branch to deploy. The default is `master`.
|
||||
1. Select the branch to deploy. The default is `master`.
|
||||
|
||||
3. Enter the following values during creation.
|
||||
1. Enter the following values during creation.
|
||||
|
||||
| Field | Value |
|
||||
| --------------------- | ------------- |
|
||||
|
|
@ -263,13 +263,13 @@ Deploy your app in a matter of seconds using surge with the following steps:
|
|||
npm install --g surge
|
||||
```
|
||||
|
||||
2. To build the static files of your site for production in the root directory of your project, run:
|
||||
1. To build the static files of your site for production in the root directory of your project, run:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
3. Then, run this command inside the root directory of your project:
|
||||
1. Then, run this command inside the root directory of your project:
|
||||
|
||||
```bash
|
||||
surge build/
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ Every document has a unique `id`. By default, a document `id` is the name of the
|
|||
For example, `greeting.md` id is `greeting` and `guide/hello.md` id is `guide/hello`.
|
||||
|
||||
```bash
|
||||
website # root directory of your site
|
||||
website # Root directory of your site
|
||||
└── docs
|
||||
├── greeting.md
|
||||
└── guide
|
||||
|
|
@ -61,7 +61,7 @@ The document id of `_index` is reserved exclusively for the home doc page, so it
|
|||
|
||||
:::note
|
||||
|
||||
The page `docs` that you created (eg. `src/pages/docs.js`) will take precedence over the route generated via the `homePageId` option.
|
||||
The page `docs` that you created (eg. `src/pages/docs.js`) will take precedence over the route generated via the `homePageId` option.
|
||||
|
||||
:::
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ module.exports = {
|
|||
|
||||
### Sidebar object
|
||||
|
||||
A sidebar object is defined like this.
|
||||
A sidebar object is defined like this:
|
||||
|
||||
```typescript
|
||||
type Sidebar = {
|
||||
|
|
@ -211,8 +211,8 @@ Sidebar item type that links to a non-document page. Example:
|
|||
```js
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Custom Label', // string - the label that should be displayed.
|
||||
href: 'https://example.com' // string - the target URL.
|
||||
label: 'Custom Label', // The label that should be displayed (string).
|
||||
href: 'https://example.com' // The target URL (string).
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -230,7 +230,7 @@ Sidebar item type that links to doc without bounding it to the sidebar. Example:
|
|||
```js
|
||||
{
|
||||
type: 'ref',
|
||||
id: 'doc1', // string - document id
|
||||
id: 'doc1', // Document id (string).
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ function MyPage() {
|
|||
|
||||
| Field | Description |
|
||||
| --- | --- |
|
||||
| `ExecutionEnvironment.canUseDOM` | `true` if on client, `false` if SSR. |
|
||||
| `ExecutionEnvironment.canUseDOM` | `true` if on client, `false` if prerendering. |
|
||||
| `ExecutionEnvironment.canUseEventListeners` | `true` if on client and has `window.addEventListener`. |
|
||||
| `ExecutionEnvironment.canUseIntersectionObserver` | `true` if on client and has `IntersectionObserver`. |
|
||||
| `ExecutionEnvironment.canUseViewport` | `true` if on client and has `window.screen`. |
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@ module.exports = {
|
|||
|
||||
### `customFields`
|
||||
|
||||
Docusaurus guards `docusaurus.config.js` from unknown fields. To add a custom field, define it on `customFields`
|
||||
Docusaurus guards `docusaurus.config.js` from unknown fields. To add a custom field, define it on `customFields`.
|
||||
|
||||
- Type: `Object`
|
||||
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@ my-website
|
|||
|
||||
### Project structure rundown
|
||||
|
||||
- `/blog/` - Contains the blog markdown files. You can delete the directory if you do not want/need a blog. More details can be found in the [blog guide](blog.md).
|
||||
- `/docs/` - Contains the markdown files for the docs. Customize the order of the docs sidebar in `sidebars.js`. More details can be found in the [docs guide](markdown-features.mdx).
|
||||
- `/blog/` - Contains the blog Markdown files. You can delete the directory if you do not want/need a blog. More details can be found in the [blog guide](blog.md).
|
||||
- `/docs/` - Contains the Markdown files for the docs. Customize the order of the docs sidebar in `sidebars.js`. More details can be found in the [docs guide](markdown-features.mdx).
|
||||
- `/src/` - Non-documentation files like pages or custom React components. You don't have to strictly put your non-documentation files in here but putting them under a centralized directory makes it easier to specify in case you need to do some sort of linting/processing
|
||||
- `/src/pages` - Any files within this directory will be converted into a website page. More details can be found in the [pages guide](creating-pages.md).
|
||||
- `/static/` - Static directory. Any contents inside here will be copied into the root of the final `build` directory.
|
||||
|
|
|
|||
|
|
@ -4,13 +4,11 @@ title: Introduction
|
|||
description: Docusaurus was designed from the ground up to be easily installed and used to get your website up and running quickly.
|
||||
---
|
||||
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
## Disclaimer
|
||||
|
||||
It has been a year since we made the first **alpha release** of Docusaurus 2 and things have been pretty stable since then. Many of Facebook's new open source websites are using Docusaurus 2 now. At this point, we highly encourage you to use Docusaurus 2 over Docusaurus 1 for your new websites. For feedback and questions, chat with us on [**Discord**](https://discordapp.com/invite/docusaurus) :wink:
|
||||
|
||||
**You should use this if**
|
||||
**You should use this if:**
|
||||
|
||||
- :white_check_mark: You want to contribute to Docusaurus 2
|
||||
- :white_check_mark: You want to build a modern website with client-side routing and prerendering
|
||||
|
|
@ -19,7 +17,7 @@ It has been a year since we made the first **alpha release** of Docusaurus 2 and
|
|||
- :white_check_mark: You want to ease the pain of migration in future
|
||||
- :white_check_mark: You do not need support for IE11
|
||||
|
||||
**Do not use this if**
|
||||
**Do not use this if:**
|
||||
|
||||
- :x: You need a fully production-ready solution (try [Docusaurus 1](https://docusaurus.io/) instead)
|
||||
- :x: You need the translation features present in v1
|
||||
|
|
@ -28,7 +26,7 @@ It has been a year since we made the first **alpha release** of Docusaurus 2 and
|
|||
|
||||
## A better Docusaurus is coming to town
|
||||
|
||||
<img alt="Docusaurus " src={useBaseUrl('img/slash-introducing.svg')} />
|
||||
<img alt="Docusaurus " src={require('@docusaurus/useBaseUrl').default('img/slash-introducing.svg')} />
|
||||
|
||||
Docusaurus 1 used to be a pure documentation site generator. In Docusaurus 2, we rebuilt it from the ground up, allowing for more customizability but preserved the best parts of Docusaurus 1 - easy to get started, versioned docs, and i18n (_coming soon_).
|
||||
|
||||
|
|
@ -44,8 +42,8 @@ Docusaurus is built with high attention to your experience building your site an
|
|||
- Extend and customize with React
|
||||
- Gain full control of your site's browsing experience by `swizzling` in your own components
|
||||
- **Pluggable**
|
||||
- Bootstrap your site with a basic template, then pick and plug functionalities built by us and our community.
|
||||
- Open source your plugins to share with your fellow documentarians, because sharing is caring.
|
||||
- Bootstrap your site with a basic template, then pick and plug functionalities built by us and our community
|
||||
- Open source your plugins to share with your fellow documentarians, because sharing is caring
|
||||
- ✂️ **Developer experience**
|
||||
- Multiple bootstrapping templates to get your site up and running, start writing your docs right now
|
||||
- Universal configuration entry point to make it more maintainable by contributors
|
||||
|
|
|
|||
|
|
@ -111,12 +111,12 @@ module.exports = function(context, options) {
|
|||
name: 'docusaurus-plugin',
|
||||
async contentLoaded({content, actions}) {
|
||||
const {createData, addRoute} = actions;
|
||||
// create a data named 'prizes.json'
|
||||
// Create a data named 'prizes.json'.
|
||||
const prizes = JSON.stringify(['$1', 'a cybertruck', 'nothing']);
|
||||
const prizesDataPath = await createData('prizes.json', prizes);
|
||||
|
||||
// add '/roll' page using 'website/src/component/roll.js` as the component
|
||||
// and providing 'prizes' as props
|
||||
// Add '/roll' page using 'website/src/component/roll.js` as the component
|
||||
// and providing 'prizes' as props.
|
||||
addRoute({
|
||||
path: '/roll',
|
||||
component: '@site/src/components/roll.js',
|
||||
|
|
@ -201,7 +201,7 @@ module.exports = function (context, options) {
|
|||
return {
|
||||
name: 'docusaurus-plugin',
|
||||
async postBuild({siteConfig = {}, routesPaths = [], outDir}) {
|
||||
// Print out to console all the rendered routes
|
||||
// Print out to console all the rendered routes.
|
||||
routesPaths.map((route) => {
|
||||
console.log(route);
|
||||
});
|
||||
|
|
@ -234,7 +234,7 @@ module.exports = function (context, options) {
|
|||
|
||||
## `injectHtmlTags()`
|
||||
|
||||
Inject head and/or body html tags to Docusaurus generated html.
|
||||
Inject head and/or body HTML tags to Docusaurus generated HTML.
|
||||
|
||||
```typescript
|
||||
function injectHtmlTags(): {
|
||||
|
|
@ -247,7 +247,7 @@ type HtmlTags = string | HtmlTagObject | (string | HtmlTagObject)[];
|
|||
|
||||
interface HtmlTagObject {
|
||||
/**
|
||||
* Attributes of the html tag
|
||||
* Attributes of the HTML tag
|
||||
* E.g. `{'disabled': true, 'value': 'demo', 'rel': 'preconnect'}`
|
||||
*/
|
||||
attributes?: {
|
||||
|
|
@ -368,22 +368,22 @@ module.exports = function (context, opts) {
|
|||
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
|
||||
// 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}) {
|
||||
// contentLoaded hook is done after loadContent hook is done
|
||||
// actions are set of functional API provided by Docusaurus. e.g: addRoute
|
||||
// The contentLoaded hook is done after loadContent hook is done.
|
||||
// `actions` are set of functional API provided by Docusaurus (e.g. addRoute)
|
||||
},
|
||||
|
||||
async routesLoaded(routes) {
|
||||
// routesLoaded hook is done after contentLoaded hook is done
|
||||
// The routesLoaded hook is done after contentLoaded hook is done.
|
||||
// This can be useful if you need to change any route.
|
||||
},
|
||||
|
||||
async postBuild(props) {
|
||||
// after docusaurus <build> finish
|
||||
// After docusaurus <build> finish.
|
||||
},
|
||||
|
||||
// TODO
|
||||
|
|
@ -408,7 +408,7 @@ module.exports = function (context, opts) {
|
|||
},
|
||||
|
||||
getPathsToWatch() {
|
||||
// Path to watch
|
||||
// Paths to watch.
|
||||
},
|
||||
|
||||
getThemePath() {
|
||||
|
|
@ -423,11 +423,11 @@ module.exports = function (context, opts) {
|
|||
},
|
||||
|
||||
extendCli(cli) {
|
||||
// Register an extra command to enhance the CLI of docusaurus
|
||||
// Register an extra command to enhance the CLI of Docusaurus
|
||||
},
|
||||
|
||||
injectHtmlTags() {
|
||||
// Inject head and/or body html tags
|
||||
// Inject head and/or body HTML tags.
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ Docusaurus 2 uses modern tooling to help you compose your interactive documentat
|
|||
In this section, we'd like to introduce you to the tools we've picked that we believe will help you build powerful documentation. Let us walk you through with an example.
|
||||
|
||||
:::important
|
||||
|
||||
All the following content assumes you are using `@docusaurus/preset-classic` or `@docusaurus/plugin-content-docs`.
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
|
@ -89,7 +91,7 @@ The headers are well-spaced so that the hierarchy is clear.
|
|||
|
||||
</BrowserWindow>
|
||||
|
||||
## Markdown Headers
|
||||
## Markdown headers
|
||||
|
||||
Documents use the following markdown header fields that are enclosed by a line `---` on either side:
|
||||
|
||||
|
|
@ -119,6 +121,7 @@ keywords:
|
|||
- docusaurus
|
||||
image: https://i.imgur.com/mErPwqL.png
|
||||
---
|
||||
|
||||
```
|
||||
|
||||
## Referencing other documents
|
||||
|
|
@ -128,7 +131,8 @@ If you want to reference another document file, you could use the name of the do
|
|||
For example, if you are in `doc2.md` and you want to reference `doc1.md` and `folder/doc3.md`:
|
||||
|
||||
```md
|
||||
I am referencing a [document](doc1.md). Reference to another [document in a folder](folder/doc3.md)
|
||||
I am referencing a [document](doc1.md). Reference to another [document in a folder](folder/doc3.md).
|
||||
|
||||
[Relative document](../doc2.md) referencing works as well.
|
||||
```
|
||||
|
||||
|
|
@ -140,7 +144,7 @@ Docusaurus has built-in support for [MDX](https://mdxjs.com), which allows you t
|
|||
|
||||
**Note 1:** While both `.md` and `.mdx` files are parsed using MDX, some of the syntax are treated slightly differently. For the most accurate parsing and better editor support, we recommend using the `.mdx` extension for files containing MDX syntax. Let's rename the previous file to `greeting.mdx`.
|
||||
|
||||
**Note 2:** Since all doc files are parsed using MDX, any HTML is treated as JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects. This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](./migrating-from-v1-to-v2.md#convert-style-attributes-to-style-objects-in-mdx).
|
||||
**Note 2:** Since all doc files are parsed using MDX, any HTML is treated as JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects. This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](migrating-from-v1-to-v2.md#convert-style-attributes-to-style-objects-in-mdx).
|
||||
|
||||
Try this block here:
|
||||
|
||||
|
|
@ -178,7 +182,8 @@ export const Highlight = ({children, color}) => (
|
|||
|
||||
<BrowserWindow minHeight={240} url="http://localhost:3000">
|
||||
|
||||
<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
|
||||
<Highlight color="#25c2a0">Docusaurus green</Highlight>
|
||||
{` `}and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
|
||||
|
||||
I can write **Markdown** alongside my _JSX_!
|
||||
|
||||
|
|
@ -190,9 +195,9 @@ You can also import your own components defined in other files or third-party co
|
|||
|
||||
### Configuring plugins
|
||||
|
||||
You can expand the MDX functionalities, using plugins. An MDX plugin is usually a npm package, so you install them like other npm packages using npm. Docusaurus supports both [remark](https://github.com/remarkjs/remark) and [rehype](https://github.com/rehypejs/rehype) plugins that work with MDX.
|
||||
You can expand the MDX functionalities, using plugins. An MDX plugin is usually a npm package, so you install them like other npm packages using npm. Docusaurus supports both [Remark](https://github.com/remarkjs/remark) and [Rehype](https://github.com/rehypejs/rehype) plugins that work with MDX.
|
||||
|
||||
First, install your [remark](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins) and [rehype](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#list-of-plugins) plugins.
|
||||
First, install your [Remark](https://github.com/remarkjs/remark/blob/master/doc/plugins.md#list-of-plugins) and [Rehype](https://github.com/rehypejs/rehype/blob/master/doc/plugins.md#list-of-plugins) plugins.
|
||||
|
||||
For example:
|
||||
|
||||
|
|
@ -267,15 +272,14 @@ import TabItem from '@theme/TabItem';
|
|||
<Tabs
|
||||
defaultValue="apple"
|
||||
values={[
|
||||
{ label: 'Apple', value: 'apple', },
|
||||
{ label: 'Orange', value: 'orange', },
|
||||
{ label: 'Banana', value: 'banana', },
|
||||
]
|
||||
}>
|
||||
<TabItem value="apple">This is an apple 🍎</TabItem>
|
||||
<TabItem value="orange">This is an orange 🍊</TabItem>
|
||||
<TabItem value="banana">This is a banana 🍌</TabItem>
|
||||
</Tabs>
|
||||
{label: 'Apple', value: 'apple'},
|
||||
{label: 'Orange', value: 'orange'},
|
||||
{label: 'Banana', value: 'banana'},
|
||||
]}>
|
||||
<TabItem value="apple">This is an apple 🍎</TabItem>
|
||||
<TabItem value="orange">This is an orange 🍊</TabItem>
|
||||
<TabItem value="banana">This is a banana 🍌</TabItem>
|
||||
</Tabs>;
|
||||
```
|
||||
|
||||
will result in
|
||||
|
|
@ -283,27 +287,26 @@ will result in
|
|||
<Tabs
|
||||
defaultValue="apple"
|
||||
values={[
|
||||
{ label: 'Apple', value: 'apple', },
|
||||
{ label: 'Orange', value: 'orange', },
|
||||
{ label: 'Banana', value: 'banana', },
|
||||
]
|
||||
}>
|
||||
<TabItem value="apple">This is an apple 🍎</TabItem>
|
||||
<TabItem value="orange">This is an orange 🍊</TabItem>
|
||||
<TabItem value="banana">This is a banana 🍌</TabItem>
|
||||
{label: 'Apple', value: 'apple'},
|
||||
{label: 'Orange', value: 'orange'},
|
||||
{label: 'Banana', value: 'banana'},
|
||||
]}>
|
||||
<TabItem value="apple">This is an apple 🍎</TabItem>
|
||||
<TabItem value="orange">This is an orange 🍊</TabItem>
|
||||
<TabItem value="banana">This is a banana 🍌</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### Syncing tab choices
|
||||
|
||||
You may want choices of the same kind of tabs to sync with each other. For example, you might want to provide different instructions for users on Windows vs users on macOS, and you want to changing all OS-specific instructions tabs in one click. To achieve that, you can give all related tabs the same `groupId` prop. Note that doing this will persist the choice in `localStorage` and all `<Tab>` instances with the same `groupId` will update automatically when the value of one of them is changed. Not that `groupID` are globally-namespaced.
|
||||
You may want choices of the same kind of tabs to sync with each other. For example, you might want to provide different instructions for users on Windows vs users on macOS, and you want to changing all OS-specific instructions tabs in one click. To achieve that, you can give all related tabs the same `groupId` prop. Note that doing this will persist the choice in `localStorage` and all `<Tab>` instances with the same `groupId` will update automatically when the value of one of them is changed. Not that `groupID` are globally-namespaced.
|
||||
|
||||
```jsx {2,14}
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
values={[
|
||||
{ label: 'Windows', value: 'win', },
|
||||
{ label: 'macOS', value: 'mac', },
|
||||
{label: 'Windows', value: 'win'},
|
||||
{label: 'macOS', value: 'mac'},
|
||||
]
|
||||
}>
|
||||
<TabItem value="win">Use Ctrl + C to copy.</TabItem>
|
||||
|
|
@ -314,8 +317,8 @@ You may want choices of the same kind of tabs to sync with each other. For examp
|
|||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
values={[
|
||||
{ label: 'Windows', value: 'win', },
|
||||
{ label: 'macOS', value: 'mac', },
|
||||
{label: 'Windows', value: 'win'},
|
||||
{label: 'macOS', value: 'mac'},
|
||||
]
|
||||
}>
|
||||
<TabItem value="win">Use Ctrl + V to paste.</TabItem>
|
||||
|
|
@ -327,24 +330,22 @@ You may want choices of the same kind of tabs to sync with each other. For examp
|
|||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
values={[
|
||||
{ label: 'Windows', value: 'win', },
|
||||
{ label: 'macOS', value: 'mac', },
|
||||
]
|
||||
}>
|
||||
<TabItem value="win">Use Ctrl + C to copy.</TabItem>
|
||||
<TabItem value="mac">Use Command + C to copy.</TabItem>
|
||||
{label: 'Windows', value: 'win'},
|
||||
{label: 'macOS', value: 'mac'},
|
||||
]}>
|
||||
<TabItem value="win">Use Ctrl + C to copy.</TabItem>
|
||||
<TabItem value="mac">Use Command + C to copy.</TabItem>
|
||||
</Tabs>
|
||||
|
||||
<Tabs
|
||||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
values={[
|
||||
{ label: 'Windows', value: 'win', },
|
||||
{ label: 'macOS', value: 'mac', },
|
||||
]
|
||||
}>
|
||||
<TabItem value="win">Use Ctrl + V to paste.</TabItem>
|
||||
<TabItem value="mac">Use Command + V to paste.</TabItem>
|
||||
{label: 'Windows', value: 'win'},
|
||||
{label: 'macOS', value: 'mac'},
|
||||
]}>
|
||||
<TabItem value="win">Use Ctrl + V to paste.</TabItem>
|
||||
<TabItem value="mac">Use Command + V to paste.</TabItem>
|
||||
</Tabs>
|
||||
|
||||
---
|
||||
|
|
@ -356,8 +357,8 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
values={[
|
||||
{ label: 'Windows', value: 'win', },
|
||||
{ label: 'macOS', value: 'mac', },
|
||||
{label: 'Windows', value: 'win'},
|
||||
{label: 'macOS', value: 'mac'},
|
||||
]
|
||||
}>
|
||||
<TabItem value="win">Windows in windows.</TabItem>
|
||||
|
|
@ -368,8 +369,8 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
groupId="non-mac-operating-systems"
|
||||
defaultValue="win"
|
||||
values={[
|
||||
{ label: 'Windows', value: 'win', },
|
||||
{ label: 'Unix', value: 'unix', },
|
||||
{label: 'Windows', value: 'win'},
|
||||
{label: 'Unix', value: 'unix'},
|
||||
]
|
||||
}>
|
||||
<TabItem value="win">Windows is windows.</TabItem>
|
||||
|
|
@ -381,30 +382,27 @@ Tab choices with different `groupId`s will not interfere with each other:
|
|||
groupId="operating-systems"
|
||||
defaultValue="win"
|
||||
values={[
|
||||
{ label: 'Windows', value: 'win', },
|
||||
{ label: 'macOS', value: 'mac', },
|
||||
]
|
||||
}>
|
||||
<TabItem value="win">Windows in windows.</TabItem>
|
||||
<TabItem value="mac">macOS is macOS.</TabItem>
|
||||
{label: 'Windows', value: 'win'},
|
||||
{label: 'macOS', value: 'mac'},
|
||||
]}>
|
||||
<TabItem value="win">Windows in windows.</TabItem>
|
||||
<TabItem value="mac">macOS is macOS.</TabItem>
|
||||
</Tabs>
|
||||
|
||||
<Tabs
|
||||
groupId="non-mac-operating-systems"
|
||||
defaultValue="win"
|
||||
values={[
|
||||
{ label: 'Windows', value: 'win', },
|
||||
{ label: 'Unix', value: 'unix', },
|
||||
]
|
||||
}>
|
||||
<TabItem value="win">Windows is windows.</TabItem>
|
||||
<TabItem value="unix">Unix is unix.</TabItem>
|
||||
{label: 'Windows', value: 'win'},
|
||||
{label: 'Unix', value: 'unix'},
|
||||
]}>
|
||||
<TabItem value="win">Windows is windows.</TabItem>
|
||||
<TabItem value="unix">Unix is unix.</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## Callouts/admonitions
|
||||
|
||||
In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions.
|
||||
Admonitions are wrapped by a set of 3 colons.
|
||||
In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions. Admonitions are wrapped by a set of 3 colons.
|
||||
|
||||
Example:
|
||||
|
||||
|
|
@ -429,23 +427,33 @@ Example:
|
|||
:::
|
||||
|
||||
:::note
|
||||
The content and title *can* include markdown.
|
||||
|
||||
The content and title _can_ include markdown.
|
||||
|
||||
:::
|
||||
|
||||
:::tip You can specify an optional title
|
||||
|
||||
Heads up! Here's a pro-tip.
|
||||
|
||||
:::
|
||||
|
||||
:::info
|
||||
|
||||
Useful information.
|
||||
|
||||
:::
|
||||
|
||||
:::caution
|
||||
|
||||
Warning! You better pay attention!
|
||||
|
||||
:::
|
||||
|
||||
:::danger
|
||||
|
||||
Danger danger, mayday!
|
||||
|
||||
:::
|
||||
|
||||
### Specifying title
|
||||
|
|
@ -457,10 +465,12 @@ You may also specify an optional title
|
|||
:::
|
||||
|
||||
:::note Your Title
|
||||
The content and title *can* include markdown.
|
||||
|
||||
The content and title _can_ include Markdown.
|
||||
|
||||
:::
|
||||
|
||||
## Code Blocks
|
||||
## Code blocks
|
||||
|
||||
Code blocks within documentation are super-powered 💪.
|
||||
|
||||
|
|
@ -512,8 +522,7 @@ module.exports = {
|
|||
|
||||
By default, Docusaurus comes with this subset of [commonly used languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).
|
||||
|
||||
To add syntax highlighting for any of the other [Prism supported languages](https://prismjs.com/#supported-languages),
|
||||
define it in an array of additional languages.
|
||||
To add syntax highlighting for any of the other [Prism supported languages](https://prismjs.com/#supported-languages), define it in an array of additional languages.
|
||||
|
||||
For example, if you want to add highlighting for the `powershell` language:
|
||||
|
||||
|
|
@ -565,7 +574,7 @@ To accomplish this, Docusaurus adds the `docusaurus-highlight-code-line` class t
|
|||
|
||||
/* If you have a different syntax highlighting theme for dark mode. */
|
||||
html[data-theme='dark'] .docusaurus-highlight-code-line {
|
||||
background-color: /* Color which works with dark mode syntax highlighting theme */
|
||||
background-color: ; /* Color which works with dark mode syntax highlighting theme */
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -599,7 +608,6 @@ function MyComponent(props) {
|
|||
export default MyComponent;
|
||||
```
|
||||
|
||||
|
||||
You can also use comments with `highlight-next-line`, `highlight-start`, and `highlight-end` to select which lines are highlighted.
|
||||
|
||||
```jsx
|
||||
|
|
@ -646,12 +654,12 @@ function HighlightMoreText(highlight) {
|
|||
|
||||
Supported commenting syntax:
|
||||
|
||||
|Language|Syntax|
|
||||
|---|---|
|
||||
|JavaScript|`/* ... */` and `// ...`|
|
||||
|JSX|`{/* ... */}`|
|
||||
|Python|`# ...`|
|
||||
|HTML|`<!-- ... -->`|
|
||||
| Language | Syntax |
|
||||
| ---------- | ------------------------ |
|
||||
| JavaScript | `/* ... */` and `// ...` |
|
||||
| JSX | `{/* ... */}` |
|
||||
| Python | `# ...` |
|
||||
| HTML | `<!-- ... -->` |
|
||||
|
||||
If there's a syntax that is not currently supported, we are open to adding them! Pull requests welcome.
|
||||
|
||||
|
|
@ -674,7 +682,7 @@ module.exports = {
|
|||
// ...
|
||||
themes: ['@docusaurus/theme-live-codeblock'],
|
||||
// ...
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
To use the plugin, create a code block with `live` attached to the language meta string.
|
||||
|
|
|
|||
|
|
@ -151,9 +151,9 @@ module.exports = {
|
|||
'@docusaurus/preset-classic',
|
||||
{
|
||||
docs: {
|
||||
// docs folder path relative to website dir.
|
||||
// Docs folder path relative to website dir.
|
||||
path: '../docs',
|
||||
// sidebars file relative to website dir.
|
||||
// Sidebars file relative to website dir.
|
||||
sidebarPath: require.resolve('./sidebars.json'),
|
||||
},
|
||||
// ...
|
||||
|
|
@ -231,10 +231,10 @@ module.exports = {
|
|||
src: 'https://docusaurus.io/img/oss_logo.png',
|
||||
href: 'https://opensource.facebook.com/',
|
||||
},
|
||||
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here
|
||||
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`, // You can also put own HTML here.
|
||||
},
|
||||
image: 'img/docusaurus.png',
|
||||
// Equivalent to `docsSideNavCollapsible`
|
||||
// Equivalent to `docsSideNavCollapsible`.
|
||||
sidebarCollapsible: false,
|
||||
// ...
|
||||
},
|
||||
|
|
@ -292,7 +292,7 @@ module.exports = {
|
|||
algolia: {
|
||||
apiKey: '47ecd3b21be71c5822571b9f59e52544',
|
||||
indexName: 'docusaurus-2',
|
||||
algoliaOptions: { ... },
|
||||
algoliaOptions: { //... },
|
||||
},
|
||||
// ...
|
||||
},
|
||||
|
|
@ -340,7 +340,7 @@ module.exports = {
|
|||
docs: {
|
||||
// Equivalent to `customDocsPath`.
|
||||
path: 'docs',
|
||||
// Equivalent to `editUrl` but should point to `website` dir instead of `website/docs`
|
||||
// Equivalent to `editUrl` but should point to `website` dir instead of `website/docs`.
|
||||
editUrl: 'https://github.com/facebook/docusaurus/edit/master/website',
|
||||
// Equivalent to `docsUrl`.
|
||||
routeBasePath: 'docs',
|
||||
|
|
@ -471,7 +471,7 @@ In Docusaurus 2, the markdown syntax has been changed to [MDX](https://mdxjs.com
|
|||
|
||||
**Tips**: You might want to use some online tools like [HTML to JSX](https://transform.tools/html-to-jsx) to make the migration easier.
|
||||
|
||||
### Language-specific Code Tabs
|
||||
### Language-specific code tabs
|
||||
|
||||
Refer to the [multi-language support code blocks](markdown-features.mdx#multi-language-support-code-blocks) section.
|
||||
|
||||
|
|
@ -502,7 +502,7 @@ my-project
|
|||
└── static
|
||||
```
|
||||
|
||||
Start the development server and fix any errors
|
||||
Start the development server and fix any errors:
|
||||
|
||||
```bash
|
||||
cd website
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Presets
|
|||
|
||||
Presets are collections of plugins and themes.
|
||||
|
||||
## Using Presets
|
||||
## Using presets
|
||||
|
||||
A preset is usually a npm package, so you install them like other npm packages using npm.
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ module.exports = {
|
|||
};
|
||||
```
|
||||
|
||||
## Presets -> Themes and Plugins
|
||||
## Presets -> themes and plugins
|
||||
|
||||
Presets in some way are a shorthand function to add plugins and themes to your docusaurus config. For example, you can specify a preset that includes the following themes and plugins,
|
||||
|
||||
|
|
@ -66,7 +66,7 @@ module.exports = {
|
|||
|
||||
This is especially useful when some plugins and themes are intended to be used together.
|
||||
|
||||
## Official Presets
|
||||
## Official presets
|
||||
|
||||
### `@docusaurus/preset-classic`
|
||||
|
||||
|
|
|
|||
|
|
@ -36,17 +36,18 @@ import DocusaurusLogoWithKeytar from '@site/static/img/docusaurus_keytar.svg';
|
|||
|
||||
Thanks to MDX, you can also use `useBaseUrl` utility function in Markdown files! You'd have to use `<img>` tags instead of the Markdown image syntax though. The syntax is exactly the same as in JSX.
|
||||
|
||||
```txt title="my-doc.mdx"
|
||||
```jsx title="my-doc.mdx"
|
||||
---
|
||||
id: my-doc
|
||||
title: My Doc
|
||||
---
|
||||
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl'; // Add to the top of the file below the front matter.
|
||||
// Add to the top of the file below the front matter.
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
...
|
||||
|
||||
<img alt="Docusaurus with Keytar" src={useBaseUrl('img/docusaurus_keytar.svg')} />;
|
||||
<img alt="Docusaurus with Keytar" src={useBaseUrl('img/docusaurus_keytar.svg')} />
|
||||
```
|
||||
|
||||
You could also just use Markdown image syntax, but you would have to manually maintain the image paths yourself and isn't recommended.
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@ Name your stylesheet files with the `.module.scss` suffix (e.g. `welcome.module.
|
|||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
```jsx
|
||||
import styles from './styles.module.scss';
|
||||
|
||||
function MyComponent() {
|
||||
|
|
|
|||
|
|
@ -57,16 +57,16 @@ module.exports = {
|
|||
|
||||
Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and dismissable panel above the navbar.
|
||||
|
||||
```js {4-9} title="docusaurus.config.js"
|
||||
```js {4-10} title="docusaurus.config.js"
|
||||
module.exports = {
|
||||
// ...
|
||||
themeConfig: {
|
||||
announcementBar: {
|
||||
id: 'support_us', // Any value that will identify this message
|
||||
id: 'support_us', // Any value that will identify this message.
|
||||
content:
|
||||
'We are looking to revamp our docs, please fill <a target="_blank" rel="noopener noreferrer" href="#">this survey</a>',
|
||||
backgroundColor: '#fafbfc', // Defaults to `#fff`
|
||||
textColor: '#091E42', // Defaults to `#000`
|
||||
backgroundColor: '#fafbfc', // Defaults to `#fff`.
|
||||
textColor: '#091E42', // Defaults to `#000`.
|
||||
},
|
||||
// ...
|
||||
},
|
||||
|
|
@ -86,7 +86,7 @@ import React from 'react';
|
|||
// highlight-next-line
|
||||
import useThemeContext from '@theme/hooks/useThemeContext';
|
||||
|
||||
const Test = () => {
|
||||
const Example = () => {
|
||||
// highlight-next-line
|
||||
const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext();
|
||||
|
||||
|
|
@ -96,7 +96,7 @@ const Test = () => {
|
|||
|
||||
## Navbar
|
||||
|
||||
### Navbar Title & Logo
|
||||
### Navbar title & logo
|
||||
|
||||
You can add a logo and title to the navbar via `themeConfig.navbar`. Logo can be placed in [static folder](static-assets.md). Logo URL is set to base URL of your site by default. Although you can specify your own URL for the logo, if it is an external link, it will open in a new tab. In addition, you can override a value for the target attribute of logo link, it can come in handy if you are hosting docs website in a subdirectory of your main website, and in which case you probably do not need a link in the logo to the main website will open in a new tab.
|
||||
|
||||
|
|
@ -111,9 +111,9 @@ module.exports = {
|
|||
logo: {
|
||||
alt: 'Site Logo',
|
||||
src: 'img/logo.svg',
|
||||
srcDark: 'img/logo_dark.svg', // default to logo.src
|
||||
href: 'https://v2.docusaurus.io/', // default to siteConfig.baseUrl
|
||||
target: '_self', // by default, this value is calculated based on the `href` attribute (the external link will open in a new tab, all others in the current one)
|
||||
srcDark: 'img/logo_dark.svg', // Default to `logo.src`.
|
||||
href: 'https://v2.docusaurus.io/', // Default to `siteConfig.baseUrl`.
|
||||
target: '_self', // By default, this value is calculated based on the `href` attribute (the external link will open in a new tab, all others in the current one).
|
||||
},
|
||||
},
|
||||
// ...
|
||||
|
|
@ -121,7 +121,7 @@ module.exports = {
|
|||
};
|
||||
```
|
||||
|
||||
### Navbar Links
|
||||
### Navbar links
|
||||
|
||||
You can add links to the navbar via `themeConfig.navbar.links`:
|
||||
|
||||
|
|
@ -165,7 +165,7 @@ React Router should automatically apply active link styling to links, but you ca
|
|||
|
||||
Outbound (external) links automatically get `target="_blank" rel="noopener noreferrer"` attributes.
|
||||
|
||||
### Navbar Dropdown
|
||||
### Navbar dropdown
|
||||
|
||||
Navbar items can also be dropdown items by specifying the `items`, an inner array of navbar links.
|
||||
|
||||
|
|
@ -213,10 +213,14 @@ module.exports = {
|
|||
};
|
||||
```
|
||||
|
||||
<!--
|
||||
|
||||
## Footer
|
||||
|
||||
TODO.
|
||||
|
||||
-->
|
||||
|
||||
## CodeBlock
|
||||
|
||||
Docusaurus uses [Prism React Renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight code blocks.
|
||||
|
|
@ -238,7 +242,11 @@ module.exports = {
|
|||
};
|
||||
```
|
||||
|
||||
**Note:** If you use the line highlighting Markdown syntax, you might need to specify a different highlight background color for the dark mode syntax highlighting theme. Refer to the [docs for guidance](markdown-features.mdx#line-highlighting).
|
||||
:::note
|
||||
|
||||
If you use the line highlighting Markdown syntax, you might need to specify a different highlight background color for the dark mode syntax highlighting theme. Refer to the [docs for guidance](markdown-features.mdx#line-highlighting).
|
||||
|
||||
:::
|
||||
|
||||
### Default language
|
||||
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ module.exports = function(context, options) {
|
|||
name: 'my-docusaurus-plugin',
|
||||
async loadContent() { ... },
|
||||
async contentLoaded({content, actions}) { ... },
|
||||
/* other lifecycle api */
|
||||
/* other lifecycle API */
|
||||
};
|
||||
};
|
||||
```
|
||||
|
|
@ -116,7 +116,7 @@ interface LoadContext {
|
|||
|
||||
#### Return value
|
||||
|
||||
The returned object value should implement the [lifecycle APIs](./lifecycle-apis.md).
|
||||
The returned object value should implement the [lifecycle APIs](lifecycle-apis.md).
|
||||
|
||||
## Official plugins
|
||||
|
||||
|
|
@ -428,7 +428,7 @@ This plugin supports the PNG, GIF and JPG formats only.
|
|||
import Image from '@theme/IdealImage';
|
||||
import thumbnail from './path/to/img.png';
|
||||
|
||||
// your react code
|
||||
// your React code
|
||||
<Image img={thumbnail} />
|
||||
|
||||
// or
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ For example, a Docusaurus blog consists of a blog plugin and a blog theme.
|
|||
}
|
||||
```
|
||||
|
||||
and if you want to use Bootstrap styling, you can swap out the theme with `theme-blog-bootstrap` (fictitious non-existing theme):
|
||||
And if you want to use Bootstrap styling, you can swap out the theme with `theme-blog-bootstrap` (fictitious non-existing theme):
|
||||
|
||||
```js title="docusaurus.config.js"
|
||||
{
|
||||
|
|
@ -125,6 +125,8 @@ This theme provides a `@theme/SearchBar` component that integrates with Algolia
|
|||
npm install --save @docusaurus/theme-search-algolia
|
||||
```
|
||||
|
||||
This theme also adds search page available at `/search` path with OpenSearch support.
|
||||
|
||||
:::tip
|
||||
|
||||
If you have installed `@docusaurus/preset-classic`, you don't need to install it as a dependency.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue