クライアント側のカスタマイズ

クライアント側でAEM Communitiesコンポーネントの外観や動作をカスタマイズするには、いくつかの方法があります。

主にコンポーネントをオーバーレイまたは拡張する方法が 2 つあります。

オーバーレイ コンポーネントは、デフォルトのコンポーネントを変更し、コンポーネントへのすべての参照に影響を与えます。

拡張ガイド コンポーネントは一意の名前を付け、変更の範囲を制限します。 「extend」という用語は、「override」と同じ意味で使用されます。

オーバーレイ

コンポーネントのオーバーレイは、デフォルトのコンポーネントに変更を加え、デフォルトを使用するすべてのインスタンスに影響を与える方法です。

オーバーレイは、 /内のデフォルトコンポーネントのコピーを変更することで実行されます。アプリ ディレクトリ内に配置されます。libs ディレクトリ。 コンポーネントは、同じ相対パスを使用して構築されますが、「libs」が「apps」に置き換えられる点が異なります。

/apps ディレクトリは、要求を解決するために最初に検索される場所です。見つからない場合は、/libs ディレクトリにあるデフォルトバージョンが使用されます。

/libs ディレクトリ内のデフォルトコンポーネントは、今後のパッチやアップグレードでは、パブリックインターフェイスを維持しながら必要な方法で/libs ディレクトリを自由に変更できるので、変更しないでください。

これは、 拡張 特定の用途に対して変更を加え、コンポーネントへの一意のパスを作成し、/libs ディレクトリ内の元のデフォルトコンポーネントをスーパーリソースタイプとして参照することを希望するデフォルトコンポーネント。

コメントコンポーネントのオーバーレイの簡単な例については、 コメントコンポーネントのオーバーレイのチュートリアル.

拡張子

コンポーネントの拡張（上書き）は、デフォルトを使用するすべてのインスタンスに影響を与えることなく、特定の使用に対して変更を加える方法です。 拡張されたコンポーネントは、/apps フォルダー内で一意の名前を付け、/libs フォルダー内のデフォルトコンポーネントを参照するので、コンポーネントのデフォルトのデザインと動作は変更されません。

これは、 重ね Sling の特性が解決されるデフォルトコンポーネントは、libs/フォルダー内で検索する前に apps/フォルダーへの相対参照を解決するので、コンポーネントのデザインや動作はグローバルに変更されます。

コメントコンポーネントの拡張の簡単な例については、 コメントコンポーネントの拡張チュートリアル.

JavaScript の連結

コンポーネントの HBS スクリプトは、この機能を実装する JavaScript オブジェクト、モデル、ビューにバインドする必要があります。

の値 data-scf-component 属性は、 social/tally/components/hbs/rating​または拡張（カスタマイズ）されたコンポーネント（カスタマイズされた機能）( 例： weretail/components/hbs/rating.

コンポーネントをバインドするには、コンポーネントスクリプト全体を <div> 要素に次の属性を追加します。

• data-component-id="{{id}}"

  コンテキストから id プロパティに解決されます。

• data-scf-component="<resourcetype>

例： /apps/weretail/components/hbs/rating/rating.hbs:

<div class="we-Rating" data-component-id="{{id}}" data-scf-component="weretail/components/hbs/rating">

     <!-- HTML with HBS accessing the rating component -->

</div>

カスタムプロパティ

コンポーネントを拡張またはオーバーレイする場合、変更したダイアログにプロパティを追加できます。

コンポーネントやリソースに設定されたすべてのプロパティにアクセスするには、handlebars テンプレート内のプロパティキーを参照します。

{{properties.<property_name>}}

CSS のスキニング

色、フォント、画像、ボタン、リンク、間隔、さらには特定の程度の位置の変更など、Web サイトの全体的なテーマに合わせたコンポーネントのカスタマイズは、「スキン表示」によって実現できます。

スキニングは、フレームワークスタイルを選択的に上書きするか、まったく新しいスタイルシートを書き込むことで実現できます。 SCF コンポーネントは、コンポーネントを構成する様々な要素に影響を与える名前空間化された、モジュラー型およびセマンティック型の CSS クラスを定義します。

コンポーネントをスキンするには：

1. 変更する要素を指定します（例：コンポーザー領域、ツールバーボタン、メッセージフォントなど）。

2. これらの要素に影響する CSS クラス/ルールを特定します。

3. スタイルシートファイル (.css) を作成します。

4. クライアントライブラリフォルダー (clientlibs) をクリックし、それを ui:includeClientLib.

5. スタイルシートで指定した CSS クラスおよびルール (#2) を再定義し、スタイルを追加します。

カスタムスタイルがデフォルトのフレームワークスタイルを上書きし、新しいスキンでコンポーネントがレンダリングされるようになりました。

JavaScript の拡張

JavaScript の実装コンポーネントを拡張するには、次のみが必要です

1. jcr:resourceSuperType を拡張コンポーネントの jcr:resourceType の値に設定して、アプリのコンポーネントを作成します（例： social/forum/components/hbs/forum）。
2. デフォルトの SCF コンポーネントの JavaScript を調べて、SCF.registerComponent() を使用して登録する必要があるメソッドを判断します。
3. 拡張コンポーネントの JavaScript をコピーするか、最初から開始する
4. メソッドの拡張
5. SCF.registerComponent() を使用して、すべてのメソッドをデフォルトまたはカスタマイズされたオブジェクトとビューのいずれかに登録します。

forum.js:フォーラムのサンプル拡張 — HBS

(function($CQ, _, Backbone, SCF) {
    "use strict";
    var GMForumView = SCF.ForumView.extend({
        viewName: "GMForum",
        showComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        },
        hideComposer: function(e) {
            SCF.ForumView.prototype.toggleComposer.apply(this);
            var cancel = this.$el.find('.cancel-new-topic');
            cancel.toggle();
        }
    });

    SCF.registerComponent('social/forum/components/hbs/post', SCF.Post, SCF.PostView);
    SCF.registerComponent('social/forum/components/hbs/topic', SCF.Topic, SCF.TopicView);
    SCF.registerComponent('social/forum/components/hbs/forum', SCF.Forum, GMForumView );
})($CQ, _, Backbone, SCF);

スクリプトタグ

スクリプトタグは、クライアント側フレームワークの固有の部分です。 これは、サーバー側で生成されたマークアップを、クライアント側のモデルやビューと結び付けるのに役立つ接着剤です。

コンポーネントをオーバーレイまたは上書きする際に、SCF スクリプト内のスクリプトタグを削除しないでください。 HTMLに JSON を挿入するために自動的に作成された SCF スクリプトタグは、属性で識別されます。 data-scf-json=true.

SCF の clientlibs

の使用 クライアントサイドライブラリ (clientlibs) は、クライアント上でコンテンツをレンダリングするために使用する JavaScript と CSS を整理および最適化する手段を提供します。

SCF の clientlib は、2 つのバリアントに対して非常に具体的な命名パターンに従います。これは、カテゴリ名に「author」が存在する場合にのみ異なります。

完全な clientlibs

完全な（作成者以外の）clientlib は依存関係を含み、ui:includeClientLib を含めるのに便利です。

これらのバージョンは、次の場所にあります。

• /etc/clientlibs/social/hbs/<component name="">

次に例を示します。

• クライアントフォルダーノード：/etc/clientlibs/social/hbs/forum
• Categories プロパティ：cq.social.hbs.forum

この コミュニティコンポーネントガイド 各 SCF コンポーネントに必要な完全な clientlib を示します。

コミュニティコンポーネントの clientlib を使用して、ページに clientlibs を追加する方法を説明します。

オーサー Clientlibs

オーサーバージョンの clientlib は、コンポーネントの実装に必要な最小限の JavaScript まで削除されます。

これらの clientlib は直接含めるべきではなく、サイト用に手作りされた他の clientlib に埋め込むことができます。

これらのバージョンは、SCF libs フォルダーにあります。

• /libs/social/<feature>/components/hbs/<component name="">/clientlibs

次に例を示します。

• クライアントフォルダーノード：/libs/social/forum/hbs/forum/clientlibs
• Categories プロパティ：cq.social.author.hbs.forum

注意：オーサー clientlibs は他のライブラリを埋め込みませんが、依存関係をリストします。 他のライブラリに埋め込まれる場合、依存関係は自動的に取り込まれず、埋め込む必要があります。

必要なオーサー clientlib は、 コミュニティコンポーネントガイド.

使用に関する考慮事項

クライアントライブラリの管理方法は、サイトごとに異なります。 次のような要因が考えられます。

• 全体の速度：サイトがレスポンシブであることが望ましいのかもしれませんが、最初のページの読み込みが少し遅くなることが許容されます。 多くのページで同じ JavaScript を使用している場合、様々な JavaScript を 1 つの clientlib に埋め込み、最初のページから参照して読み込むことができます。 この単一のダウンロードでの JavaScript はキャッシュされたままになり、後続のページでダウンロードするデータ量が最小限に抑えられます。
• 最初のページまでの短い時間：最初のページがすばやく読み込まれるようにしたい場合があります。 この場合、JavaScript は複数の小さなファイルに含まれ、必要な場所でのみ参照されます。
• 最初のページ読み込みとそれ以降のダウンロードの間のバランス。

Business.Adobe.com リソース

Ecommerce Integrations Auto Form Fill Asset Collections Embedded Charts Content As A Service Dynamic Forms