目次
ブログコンテンツ や マニュアル系コンテンツ などで便利な、見出し一覧を目次として出力するための組み込み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>