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

はじめに introduction

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

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

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

clientlib は、コンポーネントが適切に機能(JavaScript)し、スタイル設定(CSS)するために必要です。

機能に コミュニティ機能がある場合、必要なすべてのコンポーネントおよび設定(必要な clientlib を含む)がコミュニティサイトに存在します。 作成者が追加のコンポーネントを使用できるようにする場合にのみ、clientlib を追加する必要があります。

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

例:Clientlibs を使用せずに配置したレビュー example-placed-reviews-without-clientlibs

placed-reviews

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

reviews-clientlibs

必要な Clientlibs の識別 identifying-required-clientlibs

デベロッパーにとって不可欠な機能情報は、必要な clientlib を特定します。

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

例えば、 レビューページの上部に必須の clientlib が一覧表示されます

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

clientlibs-reviews

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

Communities コンポーネントをページに追加する場合、コンポーネントに必要な clientlib がまだ存在しない場合は追加する必要があります。

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

CRXDE Lite を使用してコミュニティサイトのクライアントライブラリを追加するには:

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

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

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

    • String[] プロパティの scg:requiredClientLibs を見つけます。

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

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

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

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

        • OK」を選択します。

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

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

AEM Communities使用の手引きの例を使用します。site-nameengage です。レビューコンポーネントを追加する場合、clientliblist は次のように表示されます。

review-component

recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791