AEM Guides用の既存のAEM サイトテンプレートのカスタマイズ

このガイドでは、既存のAEM サイトテンプレートをカスタマイズし、AEM Guidesで使用して DITA マップとトピックからAEM Sitesを生成する手順を順を追って説明します。

標準のAEM Guides(AEMG ドキュメント)テンプレートを使用している場合は、設定とコンポーネントは既に配置されており、AEM Guides コンテンツの公開にそのまま使用できます。 ただし、既存のAEM Sites テンプレートをカスタムブランディングで使用してAEM Guides コンテンツを公開する場合は、次の手順に従って、サイトテンプレートをAEM Guidesのレンダリング要件に合わせます。

前提条件

  • 適切な権限とAEM テンプレートへのアクセス権を持っている。

  • AEMの編集可能テンプレートとAEM Site 構造について理解している。

  • 編集可能なテンプレートを使用して構築された既存のサイト階層がある。

  • 既存のプロジェクトから少なくとも 2 つのテンプレートがある。

    • ドキュメントコンテナページテンプレート DITA マップをドキュメントルートとしてレンダリングするために使用されます。
    • トピックページテンプレート 個々の DITA トピックページのレンダリングに使用します。

テンプレートの命名に関する考慮事項

テンプレート名は、プロジェクト設定に応じて異なります。 例えば、OOTB AEMG ドキュメント設定では次のようになります。

  • ドキュメントコンテナページ:/conf/AEMG-Docs-Site/settings/wcm/templates/kb-content

  • トピックページ:/conf/AEMG-Docs-Site/settings/wcm/templates/topic-content

カスタマイズ: カスタマイズプロセスには、次の 2 つの主な手順が含まれます。

  1. テンプレートの設定:2 つのテンプレート(コンテナとトピック)を識別して設定します。
  2. レンダリングガイドコンポーネント:必要なAEM Guides コンポーネントを埋め込んで、目次、ナビゲーション、メタデータ表示などの機能を有効にします。

テンプレート設定

AEM サイトから 2 つの編集可能なテンプレートを選択して設定します。

ドキュメントコンテナページテンプレート

ドキュメントコンテナページテンプレートは、DITA マップのコンテンツをレンダリングする製品ドキュメントコンテナページを作成するために使用されます。

  • これは、特定のドキュメントセット(製品マニュアルやガイドなど)のエントリポイントまたはホームページとして機能します。

  • テンプレートの最初のノードの jcr:content に id="category-page" プロパティを追加します。 これにより、このテンプレートから作成されたすべてのページが、AEM Guidesでドキュメントコンテナとして自動的に扱われます。

    id="category-page"の追加 {width="650"}

  • 必須プロパティ text="$category.html$"を持つテキストコンポーネントを追加します。

    テキストコンポーネントの追加 {width="650"}

  • 通常、ナビゲーション要素(ドキュメント内のセクションやトピックへのリンクなど)が含まれます。

  • ブランディング、ヘッダー、フッターおよびその他のデザイン要素を含めるようにカスタマイズできます。

ユースケースの例:
製品マニュアルの DITA マップがある場合、ドキュメントコンテナページテンプレートは、そのマニュアルのホームページを生成し、概要と個々のトピックへのリンクを表示します。

トピック ページ テンプレート

  • トピックページテンプレート は、個々の DITA トピック のページを作成するために使用します。

  • DITA マップ内の各トピックは、このテンプレートを使用して個別のページとしてレンダリングされます。

  • 必須のプロパティ text="$topic.content$"を持つ テキストコンポーネント」が含まれます。

    必須プロパティを持つテキストコンポーネントの追加 {width="650"}

  • このプレースホルダーは、サイト生成時に DITA トピックの実際のコンテンツに置き換えられます。

    • テキストコンポーネントは、適切なレイアウトとスタイル設定を確保するために、通常は コンテナ コンポーネント 内に配置されます。
    • は、すべてのトピックページにわたって一貫したヘッダー、フッター、ナビゲーション要素を含めるようにカスタマイズできます。

ユースケースの例:
「インストール手順」に関する DITA トピックがある場合、トピックページテンプレートは、そのトピックのコンテンツを表示するページを生成します。

コンテナコンポーネント:

コンテナコンポーネントの追加 {width="650"}

NOTE
wcm/foundation/components の下にある sling:resourceType を使用しているコンポーネントが、対応する core/wcm/components に移行されていることを確認します。

同じテンプレートの構造に同じ(コンテナとテキストコンポーネント)を追加します。

コンテナとテキストコンポーネントの追加 {width="650"}

カスタマイズされたテンプレートでのガイド コンポーネントのレンダリング

目次、ページリダイレクト、ナビゲーション、メタデータ表示などのコア AEM Guides コンポーネント機能を有効にするには、特定のAEM Guides コンポーネントをカスタムテンプレートに含める必要があります。 これらのコンポーネントは、サイトの生成時および実行時に意図した機能が使用可能になるように、対応する編集可能なテンプレート(ドキュメントコンテナページまたはトピックページ)に明示的に追加する必要があります。

コンポーネントのリストとその使用方法については、次の表を参照してください。

機能
コンポーネント名
説明
推奨テンプレート
目次
案内的ナビゲーション
DITA マップから目次をすべてレンダリングします
ドキュメントコンテナ
ページリダイレクト
childredirect
マップの最初のトピック ページにリダイレクトします
ドキュメントコンテナ
ミニ目次
最小
現在のトピックの目次を表示します
トピックページ
最終更新日
pageproperty
最終変更日を表示します
トピックページ
ポケットベル
ページャ
前のトピック ページと次のトピック ページ間を移動できるようにします。
トピックページ
言語ナビゲーション
言語化
異なる言語バージョンを切り替えることができます。
いずれかのテンプレート

コンポーネントの使用例

  • リダイレクトコンポーネント (childredirect): これをドキュメントコンテナページテンプレートに追加して、DITA マップから生成された製品ホームページが自動的に最初のトピックページにリダイレクトされるようにします。 ドキュメントコンテナページが、カスタムコンポーネントとレイアウトを備えたスタンドアロンのホームページとして機能するように設計されている場合、このコンポーネントは必要ありません。

  • 目次(guidessidenavigation): これをトピックページテンプレートに追加して、トピックコンテンツと共にナビゲーション可能な目次をレンダリングします。 TOC は DITA マップから派生し、ユーザーが兄弟トピック間を移動できるようにします。

Guides クライアントライブラリの有効化

デフォルトでは、AEM Guides コンポーネントパッケージで提供されるクライアントライブラリ(clientlibs)は、カスタムテンプレートには適用されません。 これらを有効にするには:

  1. テンプレートを編集:

    1. 製品ページエディターモード で開きます。

    2. テンプレートを編集 を選択します(conf/settings/wcm/templates/structure.htmlのような URL が開きます)。

      テンプレートの編集 {width="650"}

  2. ページポリシーを更新:

    1. ページ情報」ボタンに移動し、「ページポリシー」を選択します。

    2. 次のクライアントライブラリを追加します。

      • クライアントライブラリ
      • クライアントライブラリのJavaScriptページの先頭
  3. 変更を保存: 必要なクライアントライブラリを追加した後にテンプレートを保存します。

    クライアントライブラリの追加 {width="650"}

NOTE
実稼動環境にデプロイする前に、非実稼動環境でテンプレートがテストされていることを確認します。

詳しくは、AEM Guides および AEM Sites の公式ドキュメントを参照してください。
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178