見出しから目次を生成するJavaScriptのライブラリ「toc.js」を使ってみる

ページ内にある見出しから目次を自動生成するJavaScriptのライブラリ「toc.js」を使ってみます。

設定方法

Githubのページから一式をダウンロードします。
ダウンロード後にファイルを解凍して、ターミナル(Windowsの場合はコマンドプロンプト)でtoc-masterへ移動します。

cd 設置したディレクトリまでのパス/toc-master

必要なパッケージをインストールします。

npm install

パッケージのインストール完了後、ビルドを実行して必要なファイルを生成します。

npm run build

distディレクトリが生成されるので、その中にあるtoc.bundle.jsを読み込ませます。

<script src="toc.bundle.js"></script>

目次を追加する要素を用意します。

<div class="toc" data-toc="h1,h2,h3"></div>

data属性のdata-tocで対象の見出しを設定しています。
これで見出しから目次の生成が行えました。
目次生成のデモページ

HTMLは以下のように出力されています。

<div class="toc" data-toc="h1,h2,h3">
	<ul>
		<li class="toc-li-0 toc-h1" data-scroll-init="true"><a href="#toc-1" data-smooth-active="true">記事タイトル</a></li>
		<li class="toc-li-1 toc-h2" data-scroll-init="true"><a href="#toc-2" data-smooth-active="true">h2タイトル1</a></li>
		<li class="toc-li-2 toc-h2" data-scroll-init="true"><a href="#toc-3" data-smooth-active="true">h2タイトル2</a></li>
		<li class="toc-li-3 toc-h2" data-scroll-init="true"><a href="#toc-4" data-smooth-active="true">h2タイトル3</a></li>
		<li class="toc-li-4 toc-h3" data-scroll-init="true"><a href="#toc-5" data-smooth-active="true">h3タイトル1</a></li>
		<li class="toc-li-5 toc-h3" data-scroll-init="true"><a href="#toc-6" data-smooth-active="true">h3タイトル2</a></li>
		<li class="toc-li-6 toc-h3" data-scroll-init="true"><a href="#toc-7" data-smooth-active="true">h3タイトル3</a></li>
	</ul>
</div>

オプション

オプション設定のデモページ