📕

[Slidev]スライドに目次を挿入する

2022/11/30に公開

このページではSlidevでスライドに目次(TOC: Table Of Contents)を挿入する方法を解説します。

目次を挿入する

目次を挿入したいページに、以下のように記述するだけで目次を挿入することができます。

<Toc />

目次は各スライドの最初のタイトル要素から自動的に取得されます。

例えば以下のようなスライドの場合:

slides.md
# タイトル1

1ページ目

---

# タイトル2

2ページ目

以下のような目次が生成されます:

1. タイトル1
2. タイトル2

SPAの場合、クリックすることで該当ページへジャンプすることができます。

目次に特定のページのタイトルを非表示にする

目次にタイトルを表示したくないページには、フロントマターで以下の設定を行います。

---
hideInToc: true
---

目次に表示するタイトルを変更する

以下のように設定することで、目次に表示するタイトルを変更することができます。

slides.md
---
title: 目次用タイトル
level: 1
---

例えば1ページ目のスライドのフロントマターに上記を設定すると、目次は以下のように変わります。

1. 目次用タイトル
2. タイトル2

目次を複数列で表示する

columnsオプションを指定すると、目次を複数列で表示することができます。
例えば2列で表示したい場合は、以下のように記述します。

slides.md
<Toc columns="2"/>

以下のように表示されます。

参考サイト

コンポーネント#TOC | Slidev

Discussion