131 lines
3.2 KiB
Markdown
131 lines
3.2 KiB
Markdown
---
|
|
sidebar_position: 3
|
|
---
|
|
|
|
# Site configuration
|
|
|
|
# Docusaurus Configuration Guide
|
|
|
|
This guide explains the key configurations in your `docusaurus.config.ts` file.
|
|
|
|
---
|
|
|
|
## Basic Site Metadata
|
|
|
|
The following properties define the site's basic details:
|
|
|
|
```ts
|
|
title: 'My Site',
|
|
tagline: 'Dinosaurs are cool',
|
|
favicon: 'img/favicon.ico',
|
|
```
|
|
|
|
- ***title***: The main title displayed in the browser tab and homepage.
|
|
- ***tagline***: A short description displayed under the title.
|
|
- ***favicon***: The icon shown in the browser tab.
|
|
|
|
## Website Deployment Configuration
|
|
```ts
|
|
url: 'https://your-docusaurus-site.example.com',
|
|
baseUrl: '/',
|
|
```
|
|
- ***url***: The production URL where your site is hosted.
|
|
- ***baseUrl***: The subdirectory where your site is served. If deploying to GitHub Pages under /projectName/, set baseUrl: '/projectName/'.
|
|
|
|
If deploying to GitHub Pages:
|
|
|
|
```ts
|
|
organizationName: 'facebook',
|
|
projectName: 'docusaurus',
|
|
organizationName: Your GitHub username or organization.
|
|
```
|
|
***projectName***: The repository name.
|
|
|
|
## Theme Configuration (Navbar, Footer, Code Highlighting)
|
|
The themeConfig defines UI elements like the navbar, footer, and syntax highlighting.
|
|
|
|
```ts
|
|
themeConfig: {
|
|
// Replace with your project's social card
|
|
image: 'img/docusaurus-social-card.jpg',
|
|
navbar: {
|
|
title: 'My Site',
|
|
logo: {
|
|
alt: 'My Site Logo',
|
|
src: 'img/logo.svg',
|
|
},
|
|
items: [
|
|
{
|
|
type: 'docSidebar',
|
|
sidebarId: 'tutorialSidebar',
|
|
position: 'left',
|
|
label: 'Tutorial',
|
|
},
|
|
{to: '/blog', label: 'Blog', position: 'left'},
|
|
{
|
|
href: 'https://github.com/facebook/docusaurus',
|
|
label: 'GitHub',
|
|
position: 'right',
|
|
},
|
|
],
|
|
},
|
|
footer: {
|
|
style: 'dark',
|
|
links: [
|
|
{
|
|
title: 'Docs',
|
|
items: [
|
|
{
|
|
label: 'Tutorial',
|
|
to: '/docs/intro',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'Community',
|
|
items: [
|
|
{
|
|
label: 'Stack Overflow',
|
|
href: 'https://stackoverflow.com/questions/tagged/docusaurus',
|
|
},
|
|
{
|
|
label: 'Discord',
|
|
href: 'https://discordapp.com/invite/docusaurus',
|
|
},
|
|
{
|
|
label: 'X',
|
|
href: 'https://x.com/docusaurus',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: 'More',
|
|
items: [
|
|
{
|
|
label: 'Blog',
|
|
to: '/blog',
|
|
},
|
|
{
|
|
label: 'GitHub',
|
|
href: 'https://github.com/facebook/docusaurus',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
|
|
},
|
|
prism: {
|
|
theme: prismThemes.github,
|
|
darkTheme: prismThemes.dracula,
|
|
},
|
|
}
|
|
```
|
|
|
|
- ***navbar***: Defines navigation items.
|
|
- ***title***: Title in the navbar.
|
|
- ***logo***: Logo settings.
|
|
- ***items***: Menu items, including documentation links and external links.
|
|
- ***footer***: Defines footer styling and copyright.
|
|
- ***prism***: Configures code syntax highlighting.
|
|
- ***theme***: Light mode theme.
|
|
- ***darkTheme***: Dark mode theme. |