コミュニティコンポーネントの clientlib clientlibs-for-communities-components

はじめに introduction

ドキュメントのこの節では、クライアントサイドライブラリ(clientlibs)をコミュニティコンポーネントのページに追加する方法について説明します。

基本的な情報については、次を参照してください。

Clientlibsが必要な理由 why-clientlibs-are-required

コンポーネントの適切な機能(JavaScript)とスタイル設定(CSS)には、Clientlibが必要です。

機能に​ コミュニティ関数が存在する場合、必要なクライアントライブラリを含むすべての必要なコンポーネントと設定がコミュニティサイトに存在します。 追加のコンポーネントを作成者が使用できる場合にのみ、追加のクライアントライブラリを追加する必要があります。

必要なclientlibが見つからない場合、Communities コンポーネントをページ ​に追加すると、JavaScript エラーが発生し、予期しない外観になる可能性があります。

例:Clientlibsを使用しないレビューの配置 example-placed-reviews-without-clientlibs

配置済みレビュー

例:Clientlibsを使用したレビューの配置 example-placed-reviews-with-clientlibs

reviews-clientlibs

必要なクライアントライブラリの特定 identifying-required-clientlibs

開発者に必要な機能情報によって、必要なクライアントライブラリが特定されます。

また、AEM インスタンスから​ コミュニティコンポーネントガイド ​を参照すると、コンポーネントに必要なclientlib カテゴリのリストにアクセスできます。

例えば、​ レビューページ ​の上部に、リストされている必須のclientlibは次のとおりです

  • cq.ckeditor
  • cq.social.hbs.reviews

clientlibs-reviews

必要なClientlibの追加 adding-required-clientlibs

コミュニティ コンポーネントをページに追加する場合は、コンポーネントに必要なclientlibsを追加する必要があります(まだ存在しない場合)。

CRXDE|Liteを使用して、コミュニティサイトページの既存のclientlibslistを変更します。

CRXDE Liteを使用してコミュニティサイトのclientlibを追加するには:

  • https://<server>:<port>/crx/deを参照します。

  • コンポーネントを追加するページのclientlibslist ノードを見つけます。

    • /content/sites/sample/en/page/jcr:content/clientlibslist
  • clientlibslist ノードを選択しました:

    • 文字列[] プロパティ scg:requiredClientLibsを見つけます。

    • そのValueを選択して、文字列配列ダイアログボックスにアクセスします。

      • 必要に応じて下にスクロールします。

      • 「+」を選択して、新しいクライアントライブラリを入力します。

        • この手順を繰り返して、クライアントライブラリをさらに追加します。

        • 「OK」を選択します。

    • 「すべて保存」を選択します。

NOTE
サイトがコミュニティサイトでない場合は、サイトで使用されているクライアントライブラリの存在または場所を検出する必要があります。

AEM Communitiesの使用開始の例(site-nameは​ engage ​です)を使用すると、レビューコンポーネントを追加する場合にclientliblistが次のように表示されます。

review-component

recommendation-more-help
experience-manager-65-help-communities