mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-06 10:20:09 +02:00
docs(v2): Reorganize/split the guides doc sections (#3975)
* docs reorg * refactor docs/markdown features section * fix broken links after docs refactor
This commit is contained in:
parent
a0c5177182
commit
d99d53a236
20 changed files with 1347 additions and 1192 deletions
|
@ -0,0 +1,117 @@
|
|||
---
|
||||
id: inline-toc
|
||||
title: Inline TOC
|
||||
description: Using inline table-of-contents inside Docusaurus Markdown
|
||||
slug: /markdown-features/inline-toc
|
||||
---
|
||||
|
||||
import BrowserWindow from '@site/src/components/BrowserWindow';
|
||||
|
||||
Each markdown document displays a tab of content on the top-right corner.
|
||||
|
||||
But it is also possible to display an inline table of contents directly inside a markdown document, thanks to MDX.
|
||||
|
||||
## Full table of contents
|
||||
|
||||
The `toc` variable is available in any MDX document, and contain all the top level headings of a MDX document.
|
||||
|
||||
```jsx
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
||||
<TOCInline toc={toc} />;
|
||||
```
|
||||
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
||||
<BrowserWindow>
|
||||
|
||||
<TOCInline toc={toc} />
|
||||
|
||||
</BrowserWindow>
|
||||
|
||||
## Custom table of contents
|
||||
|
||||
The `toc` props is just a list of table of contents items:
|
||||
|
||||
```ts
|
||||
type TOCItem = {
|
||||
value: string;
|
||||
id: string;
|
||||
children: TOCItem[];
|
||||
};
|
||||
```
|
||||
|
||||
You can create this TOC tree manually, or derive a new TOC tree from the `toc` variable:
|
||||
|
||||
```jsx
|
||||
import TOCInline from '@theme/TOCInline';
|
||||
|
||||
<TOCInline
|
||||
toc={
|
||||
// Only show 3th and 5th top-level heading
|
||||
[toc[2], toc[4]]
|
||||
}
|
||||
/>;
|
||||
```
|
||||
|
||||
<BrowserWindow>
|
||||
|
||||
<TOCInline toc={[toc[2], toc[4]]} />
|
||||
|
||||
</BrowserWindow>
|
||||
|
||||
---
|
||||
|
||||
:::caution
|
||||
|
||||
The underlying content is just an example to have more table-of-contents items available in current page.
|
||||
|
||||
:::
|
||||
|
||||
## Example Section 1
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 1 a
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 1 b
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 1 c
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
## Example Section 2
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 2 a
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 2 b
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 2 c
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
## Example Section 3
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 3 a
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 3 b
|
||||
|
||||
Lorem ipsum
|
||||
|
||||
### Example Subsection 3 c
|
||||
|
||||
Lorem ipsum
|
Loading…
Add table
Add a link
Reference in a new issue