クライアント側のカスタマイズ client-side-customization

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

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

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

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

オーバーレイ overlays

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

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

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

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

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

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

拡張子 extensions

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

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

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

JavaScript の連結 javascript-binding

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

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

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

例： /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>

カスタムプロパティ custom-properties

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

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

{{properties.<property_name>}}

CSS のスキニング skinning-css

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

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

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

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

JavaScript の拡張 extending-javascript

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

forum.js:フォーラムのサンプル拡張 — HBS forum-js-sample-extension-of-forum-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);

スクリプトタグ script-tags

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

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

SCF の clientlibs clientlibs-for-scf

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

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

完全な clientlibs complete-clientlibs

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

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

次に例を示します。

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

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

オーサー Clientlibs author-clientlibs

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

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

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

次に例を示します。

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

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

使用に関する考慮事項 usage-considerations

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