見出しから目次を生成する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>

オプション

data-toc 見出しとして使用する要素を指定。
data-toc-container 目次を生成する範囲の要素を指定。
data-toc-offset 次の見出しを表示する位置を指定。
data-toc-title 目次で使用するテキストを指定。(目次の要素ではなく見出しの要素に指定。)

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

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31