3.6 KiB
| id | title |
|---|---|
| configuration | Configuration |
Docusaurus has a unique take on configurations. We encourage you to congregate information of your site into one place. We will guard the fields of this file, and facilitate making this data object accessible across your site.
Keeping a well-maintained docusaurus.config.js helps you, your collaborators, and your open source contributors be able to focus on docs while having certain fields easy to customize.
For reference to each of the configurable fields, you may refer to the API reference of docusaurus.config.js.
What goes into docusaurus.config.js?
You should not have to write your docusaurus.config.js from scratch even if you are developing your site. All templates come with a docusaurus.config.js at root that includes the necessary data for the initial site.
However, it can be helpful if you have a high-level understanding of how the configurations are designed and implemented.
The configurations can be categorized into:
- Site meta
- Deployment configurations
- Theme configurations, plugins, and presets
- Custom configurations
Site meta
Site meta contains the essential meta information such as titles and favicon.
They are used by your site app in a number of places such as your site's title and headings, browser tab icon, and SEO.
Deployment configurations
Deployment configurations are used when you deploy your site with Docusaurus' deploy command. The related fields are:
You may also check the doc for Deployment for more information about the fields.
Theme, plugins, and presets configurations
Custom configurations
Docusaurus guards docusaurus.config.js from unknown fields. To add a custom field, define it on customFields
Example:
// docusaurus.config.js
module.exports = {
customFields: {
'image': '',
'keywords': []
}
};
Accessing configuration from your site
Your configuration object will be made available to all the components of your site. And you may access them via context as siteConfig:
import React from 'react';
import Head from '@docusaurus/Head';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
const Layout = props => {
const context = useDocusaurusContext();
const {siteConfig = {}} = context;
const {title, tagline, seo} = siteConfig;
return (
<React.Fragment>
<Head defaultTitle={`${defaultTitle} · ${tagline}`}>
{description && <meta name="description" content={seo.description} />}
</Head>
<h1>{title}</h1>
<h2>{tagline}</h2>
</React.Fragment>
);
};