메인 컨텐츠로 이동
버전: 3.5.2

제목과 목차

Markdown headings​

마크다운에서 일반적으로 제목 단락을 만드는 방법을 사용할 수 있습니다.

## Level 2 title

### Level 3 title

#### Level 4 title

각 마크다운 제목 단락은 목차에 표시됩니다.

Heading IDs​

각 제목 단락은 자동으로 생성되거나 별도 지정한 ID 값을 가집니다. 제목 단락 ID는 마크다운이나 JSX에서 해당 문서에 대한 링크를 작성할 때 사용할 수 있습니다.

[link](#heading-id)
<Link to="#heading-id">link</Link>

기본적으로 도큐사우루스에서는 제목 단락 텍스트에 따라 ID를 자동으로 생성합니다. For example, ### Hello World will have ID hello-world.

Generated IDs have some limitations:

  • ID가 직관적이지 않을 수 있습니다.
  • You might want to change or translate the text without updating the existing ID

A special Markdown syntax lets you set an explicit heading id:

### Hello World {#my-explicit-id}
팁

Use the write-heading-ids CLI command to add explicit IDs to all your Markdown documents.

Avoid colliding IDs

생성된 제목 단락 ID는 각 페이지에서는 고유한 것이 보장되지만 사용자 지정 ID를 사용하는 경우에는 각 ID가 각 페이지에서 정확하게 한 번만 표시되는지 확인하세요. 그렇지 않으면 같은 ID를 가진 두 개의 DOM 요소가 존재하게 됩니다. 이는 잘못된 HTML이며 제목과 적절하게 연결할 수 없게 됩니다.

Table of contents heading level​

마크다운 문서는 화면 오른쪽 상단에 목차를 보여줍니다. 기본적으로 목차에서는 h2, h3 제목만 표시하므로 페이지 구조를 한 눈에 보기에 충분합니다. 표시되는 제목 범위를 수정하고자 한다면 페이지 단위 또는 전역적으로 최소, 최대 제목 수준을 지정할 수 있습니다.

To set the heading level for a particular page, use the toc_min_heading_level and toc_max_heading_level front matter.

myDoc.md
---
# h2부터 h5까지 제목을 표시합니다
toc_min_heading_level: 2
toc_max_heading_level: 5
---

To set the heading level for all pages, use the themeConfig.tableOfContents option.

docusaurus.config.js
export default {
  themeConfig: {
    tableOfContents: {
      minHeadingLevel: 2,
      maxHeadingLevel: 5,
    },
  },
};

옵션을 전역적으로 설정했더라도 프런트매터에서 다시 재정의할 수 있습니다.

참고

The themeConfig option would apply to all TOC on the site, including inline TOC, but front matter options only affect the top-right TOC. You need to use the minHeadingLevel and maxHeadingLevel props to customize each <TOCInline /> component.

Inline table of contents​

MDX 덕분에 마크다운 문서 내에 바로 목차 단락을 추가하는 기능도 사용할 수 있습니다.

The toc variable is available in any MDX document and contains all the headings of an MDX document. By default, only h2 and h3 headings are displayed in the TOC. You can change which heading levels are visible by setting minHeadingLevel or maxHeadingLevel for individual TOCInline components.

import TOCInline from '@theme/TOCInline';

<TOCInline toc={toc} />
http://localhost:3000

The toc global is just a list of heading items:

declare const toc: {
  value: string;
  id: string;
  level: number;
}[];

Note that the toc global is a flat array, so you can easily cut out unwanted nodes or insert extra nodes, and create a new TOC tree.

import TOCInline from '@theme/TOCInline';

<TOCInline
  // Only show h2 and h4 headings
  toc={toc.filter((node) => node.level === 2 || node.level === 4)}
  minHeadingLevel={2}
  // Show h4 headings in addition to the default h2 and h3 headings
  maxHeadingLevel={4}
/>
http://localhost:3000

Customizing table of contents generation​

The table-of-contents is generated by parsing the Markdown source with a Remark plugin. There are known edge-cases where it generates false-positives and false-negatives.

Markdown headings within hideable areas will still show up in the TOC. For example, headings within Tabs and details will not be excluded.

Non-Markdown headings will not show up in the TOC. This can be used to your advantage to tackle the aforementioned issue.

<details>
<summary>Some details containing headings</summary>
<h2 id="#heading-id">I'm a heading that will not show up in the TOC</h2>

Some content...

</details>

The ability to ergonomically insert extra headings or ignore certain headings is a work-in-progress. If this feature is important to you, please report your use-case in this issue.

경고

아래는 현재 페이지에서 더 많은 목차 항목을 사용할 수 있는 더미 콘텐츠입니다.

Example Section 1​

Lorem ipsum

Example Subsection 1 a​

Lorem ipsum

Example subsubsection 1 a I​

Example subsubsection 1 a II​

Example subsubsection 1 a III​

Example Subsection 1 b​

Lorem ipsum

Example subsubsection 1 b I​

Example subsubsection 1 b II​

Example subsubsection 1 b III​

Example Subsection 1 c​

Lorem ipsum

Example subsubsection 1 c I​

Example subsubsection 1 c II​

Example subsubsection 1 c III​

Example Section 2​

Lorem ipsum

Example Subsection 2 a​

Lorem ipsum

Example subsubsection 2 a I​

Example subsubsection 2 a II​

Example subsubsection 2 a III​

Example Subsection 2 b​

Lorem ipsum

Example subsubsection 2 b I​

Example subsubsection 2 b I​

Example subsubsection 2 b III​

Example Subsection 2 c​

Lorem ipsum

Example subsubsection 2 c I​

Example subsubsection 2 c II​

Example subsubsection 2 c III​

Example Section 3​

Lorem ipsum

Example Subsection 3 a​

Lorem ipsum

Example subsubsection 3 a I​

Example subsubsection 3 a II​

Example subsubsection 3 a III​

Example Subsection 3 b​

Lorem ipsum

Example subsubsection 3 b I​

Example subsubsection 3 b II​

Example subsubsection 3 b III​

Example Subsection 3 c​

Lorem ipsum

Example subsubsection 3 c I​

Example subsubsection 3 c II​

Example subsubsection 3 c III​