サイト制作に関するメモ書き

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

見出しから目次を生成する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 目次で使用するテキストを指定。(目次の要素ではなく見出しの要素に指定。)

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

【参考サイト】

コメントを残す

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

▲PAGE TOP