Docusaurus
Documentation
docusaurus.config.js
Theme-Configuration
Markdown-Features
Docs Frontmatter
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. |
sidebar_class_name | string | undefined | Gives the corresponding sidebar label a special class name when using autogenerated sidebars. |
sidebar_custom_props | object | undefined | Assign custom props 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 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 | string | null | 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 | string | null | 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. |
custom_edit_url | string | null | Computed using the editUrl plugin option | The URL for editing this document. Use null to disable showing "Edit this page" for this page. |
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 as the <meta property="og:image" content="..."/> in the <head> , enhancing link previews on social media and messaging platforms. |
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. Strings can be a reference to keys of a tags file (usually tags.yml ) |
draft | boolean | false | Draft documents will only be available during development. |
unlisted | boolean | false | Unlisted documents will be available in both development and production. They will be "hidden" in production, not indexed, excluded from sitemaps, and can only be accessed by users having a direct link. |
last_update | FrontMatterLastUpdate | undefined | Allows overriding the last update author/date. Date can be any parsable date string. |
MDX
Import image
import image_identifier from './img/image.jpeg';
<img src={image_identifier} class="my-class" alt="alt text" />
Tabs
<Tabs>
<TabItem value="first" label="First" default>
first
</TabItem>
<TabItem value="second" label="Second">
second
</TabItem>
<TabItem value="third" label="Third">
third
</TabItem>
</Tabs>
Collabsible
<details>
<summary>Name</summary>
Content
</details>
Infima
center an image
<div class="text--center">
<img src={img_echteteilmenge} class="img-400 text--center" alt="echte teilmenge" />
</div>
colored text
<p class="text--primary">Primary Text</p>
<p class="text--secondary">Secondary Text</p>
<p class="text--success">Success Text</p>
<p class="text--info">Info Text</p>
<p class="text--warning">Warning Text</p>
<p class="text--danger">Danger Text</p>
badges
<span class="badge badge--primary">Primary</span>
<span class="badge badge--secondary">Secondary</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--info">Info</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--danger">Danger</span>
button-like links
<div>
<a class="button button--primary" href="#url">Primary</a>
<a class="button button--secondary" href="#url">Secondary</a>
<a class="button button--success" href="#url">Success</a>
<a class="button button--info" href="#url">Info</a>
<a class="button button--warning" href="#url">Warning</a>
<a class="button button--danger" href="#url">Danger</a>
<a class="button button--link" href="#url">Link</a>
</div>
card
<div class="card-demo">
<div class="card">
<div class="card__header">
<h3>Lorem Ipsum</h3>
</div>
<div class="card__body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
suspendisse ultrices gravida.
</p>
</div>
<div class="card__footer">
<button class="button button--secondary button--block">See All</button>
</div>
</div>
</div>