目次コンポーネント table-of-contents-component
目次コンポーネントは、ページコンテンツ内のタイトルに基づいて目次（ToC）を作成するので、読者がページを素早く移動できるようになります。
使用方法 usage
ページコンテンツのタイトルに基づいて目次コンポーネントから効率的に生成された ToC を通じて、サイト訪問者はページのコンテンツをすばやく移動できます。
- ToC は、サーバー側で生成されます。
- Dispatcher で完全にキャッシュされるので、高速に配信できます。
- コアコンポーネントだけでなく、ページ上のすべてのコンポーネントで機能します。
編集ダイアログでは、ToC で使用されるタイトルの範囲をコンテンツ作成者が定義できます。 デザインダイアログを使用すると、テンプレート作成者は、コンテンツ作成者が目次コンポーネントをページに追加したときのタイトルのデフォルト値を設定できるほか、ToC に含まれるタイトルをクラス名に基づいて制限できます。
バージョンと互換性 version-and-compatibility
このドキュメントでは、目次コンポーネントの現在のバージョン v1 について説明します。このバージョンは、2022年5月にコアコンポーネントのリリース 2.20.0 で導入されたものです。
コンポーネントのすべてのサポート対象バージョン、コンポーネントの各バージョンと互換性のある AEM バージョン、以前のバージョンのドキュメントへのリンクを次の表に示します。
コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンを参照してください。
技術的詳細 technical-details
目次コンポーネントに関する最新の技術ドキュメントについては、GitHub を参照してください。
コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントを参照してください。
編集ダイアログ edit-dialog
編集ダイアログでは、目次コンポーネントが ToC としてレンダリングするタイトルレベルの範囲をコンテンツ作成者が定義できます。
リストタイプ - このオプションは、リストを箇条書きリストと番号付きリストのどちらにするかを定義します。
-
タイトルの開始レベル - このオプションは、目次コンポーネントでレンダリングする最上位のタイトルを定義します。
-
タイトルの停止レベル - このオプションは、目次コンポーネントでレンダリングする最下位のタイトルを定義します。
-
ID - このオプションを使用すると、HTML 内およびデータレイヤー内のコンポーネントの一意の識別子を制御できます。
- 空白のままにした場合、一意の ID が自動的に生成されます。生成された ID は結果のページを調べることで確認できます。
- ID を指定した場合、作者はその ID が一意であることを確認する必要があります。
- ID を変更すると、CSS、JS、およびデータレイヤーのトラッキングに影響を与える可能性があります。
デザインダイアログ design-dialog
デザインダイアログを使用すると、テンプレート作成者は、目次コンポーネントのタイトル範囲のデフォルト値を設定できるほか、ToC に含まれるタイトルをクラス名に基づいて制限できます。
「プロパティ」タブ properties-tab
-
リストタイプの制限 - このオプションは、コンポーネントで生成されるリストのタイプを定義します。 このオプションを選択すると、異なるリストタイプをコンテンツ作成者が選択できなくなります。
-
開始レベルの制限 - このオプションは、ToC の定義でコンテンツ作成者が選択できる最上位のタイトルレベルを定義します。
-
停止レベルの制限 - このオプションは、ToC の定義でコンテンツ作成者が選択できる最下位のタイトルレベルを定義します。
-
含めるクラス名 - このオプションを設定した場合、指定したクラス名を含んだタイトル、または指定したクラス名の要素内に含まれるタイトルのみが目次コンポーネントで考慮されます。
- 「追加」アイコンをタップまたはクリックすると、クラス名を 1 つ以上追加できます。
- クラス名の横にある「削除」アイコンをタップまたはクリックすると、そのクラス名を削除できます。
-
無視する除外名 - このオプションを設定した場合、指定したクラス名を含んだタイトル、または指定したクラス名の要素内に含まれるタイトルは、目次コンポーネントで無視されます。
- 「追加」アイコンをタップまたはクリックすると、クラス名を 1 つ以上追加できます。
- クラス名の横にある「削除」アイコンをタップまたはクリックすると、そのクラス名を削除できます。
「スタイル」タブ styles-tab
目次コンポーネントでは、AEM スタイルシステムをサポートしています。
Adobe クライアントデータレイヤー data-layer
目次コンポーネントでは、Adobe クライアントデータレイヤーをサポートしています。