目次
ブログコンテンツ や マニュアル系コンテンツ などで便利な、見出し一覧を目次として出力するための組み込みJSです。
以下画像のような目次ユニットの作成などに利用することが可能です。
デモ
左側に入力用のHTML、右側に出力された目次要素を表示しています。
使い方
目次を生成するコンテンツ内容を js-outline
クラスを振った要素で囲み、data-target
で出力先を指定します。
<div class="js-outline-yield"></div> <div class="js-outline" data-target=".js-outline-yield"> <!-- コンテンツ内容 --> </div>
設定
目次を生成するコンテンツ内容を指定するセレクターと目次生成機能のオプションを設定できます。
目次を生成するコンテンツを指定するセレクターは、 ACMS.Config.documentOutlinerMark
を変更することで設定することができます。
ACMS.Ready(() => { ACMS.Config.documentOutlinerMark = '.js-toc'; });
オプションは data属性で指定します。または、ACMS.Config.documentOutlinerConfig
の値を変更することで指定可能です。
data属性はコンテンツを囲う、js-outline
クラスをつけた div 要素で指定します。
オプション | 詳細 | デフォルト値 |
---|---|---|
link | 見出しへのリンクを生成するか設定 | true |
listType | リストを ol か ul で作るか指定 | 'ol' |
listClassName | ol / ul の class名を指定 | 'acms-ol' |
itemClassName | li の class名を指定 | ''acms-ol-item' |
linkClassName | a の class名を指定 | 'scrollTo' |
anchorName | アンカーリンクを指定 ($1 には数字が入ります) | 'heading-$1' |
exceptClass | 見出しリストの生成対象から除外する h1 ~ h6 要素に指定する class 名を指定 | 'js-except' |
levelLimit | 見出しリストの階層を指定 | 5 |
data 属性で指定する場合の例は以下になります。
<div class="entry-body acms-entry js-outline" data-target=".js-outline-yield" data-link="true" data-listType="ol" data-listClassName="outline-list" data-itemClassName="outline-item" data-linkClassName="scrollTo" data-anchorName="heading-$1" data-levelLimit="1" data-exceptClass="js-except"> <!-- コンテンツ --> </div>