⇐機能の基本事項 | サーバー側のカスタマイズ ⇒ |
---|---|
SCF Handlebars ヘルパー ⇒ |
クライアント側でAEM Communitiesコンポーネントの外観や動作をカスタマイズするには、いくつかの方法があります。
主にコンポーネントをオーバーレイまたは拡張する方法が 2 つあります。
オーバーレイ コンポーネントは、デフォルトのコンポーネントを変更し、コンポーネントへのすべての参照に影響を与えます。
拡張ガイド コンポーネントは一意の名前を付け、変更の範囲を制限します。 「extend」という用語は、「override」と同じ意味で使用されます。
コンポーネントのオーバーレイは、デフォルトのコンポーネントに変更を加え、デフォルトを使用するすべてのインスタンスに影響を与える方法です。
オーバーレイは、 /内のデフォルトコンポーネントのコピーを変更することで実行されます。アプリ ディレクトリ内に配置されます。libs ディレクトリ。 コンポーネントは、同じ相対パスを使用して構築されますが、「libs」が「apps」に置き換えられる点が異なります。
/apps ディレクトリは、要求を解決するために最初に検索される場所です。見つからない場合は、/libs ディレクトリにあるデフォルトバージョンが使用されます。
/libs ディレクトリ内のデフォルトコンポーネントは、今後のパッチやアップグレードでは、パブリックインターフェイスを維持しながら必要な方法で/libs ディレクトリを自由に変更できるので、変更しないでください。
これは、 拡張 特定の用途に対して変更を加え、コンポーネントへの一意のパスを作成し、/libs ディレクトリ内の元のデフォルトコンポーネントをスーパーリソースタイプとして参照することを希望するデフォルトコンポーネント。
コメントコンポーネントのオーバーレイの簡単な例については、 コメントコンポーネントのオーバーレイのチュートリアル.
コンポーネントの拡張(上書き)は、デフォルトを使用するすべてのインスタンスに影響を与えることなく、特定の使用に対して変更を加える方法です。 拡張されたコンポーネントは、/apps フォルダー内で一意の名前を付け、/libs フォルダー内のデフォルトコンポーネントを参照するので、コンポーネントのデフォルトのデザインと動作は変更されません。
これは、 重ね Sling の特性が解決されるデフォルトコンポーネントは、libs/フォルダー内で検索する前に apps/フォルダーへの相対参照を解決するので、コンポーネントのデザインや動作はグローバルに変更されます。
コメントコンポーネントの拡張の簡単な例については、 コメントコンポーネントの拡張チュートリアル.
コンポーネントの 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>}}
色、フォント、画像、ボタン、リンク、間隔、さらには特定の程度の位置の変更など、Web サイトの全体的なテーマに合わせたコンポーネントのカスタマイズは、「スキン表示」によって実現できます。
スキニングは、フレームワークスタイルを選択的に上書きするか、まったく新しいスタイルシートを書き込むことで実現できます。 SCF コンポーネントは、コンポーネントを構成する様々な要素に影響を与える名前空間化された、モジュラー型およびセマンティック型の CSS クラスを定義します。
コンポーネントをスキンするには:
変更する要素を指定します(例:コンポーザー領域、ツールバーボタン、メッセージフォントなど)。
これらの要素に影響する CSS クラス/ルールを特定します。
スタイルシートファイル (.css) を作成します。
クライアントライブラリフォルダー (clientlibs) をクリックし、それを ui:includeClientLib.
スタイルシートで指定した CSS クラスおよびルール (#2) を再定義し、スタイルを追加します。
カスタムスタイルがデフォルトのフレームワークスタイルを上書きし、新しいスキンでコンポーネントがレンダリングされるようになりました。
先頭に scf-js-* には、javascript コードで特に使用されます。 これらのクラスは、コンポーネントの状態に影響を与えます(非表示から表示に切り替えるなど)。上書きも削除もできません。
一方、scf-js-*クラスはスタイルに影響を与えません。クラス名は、要素の状態を制御するので、副作用が生じる可能性があるという注意を払って、スタイルシートで使用できます。
JavaScript の実装コンポーネントを拡張するには、次のみが必要です
(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.
の使用 クライアントサイドライブラリ (clientlibs) は、クライアント上でコンテンツをレンダリングするために使用する JavaScript と CSS を整理および最適化する手段を提供します。
SCF の clientlib は、2 つのバリアントに対して非常に具体的な命名パターンに従います。これは、カテゴリ名に「author」が存在する場合にのみ異なります。
Clientlib のバリアント | カテゴリプロパティのパターン |
---|---|
complete clientlib | cq.social.hbs.<component name> |
オーサー clientlib | cq.social.author.hbs.<component name> |
完全な(作成者以外の)clientlib は依存関係を含み、ui:includeClientLib を含めるのに便利です。
これらのバージョンは、次の場所にあります。
次に例を示します。
この コミュニティコンポーネントガイド 各 SCF コンポーネントに必要な完全な clientlib を示します。
コミュニティコンポーネントの clientlib を使用して、ページに clientlibs を追加する方法を説明します。
オーサーバージョンの clientlib は、コンポーネントの実装に必要な最小限の JavaScript まで削除されます。
これらの clientlib は直接含めるべきではなく、サイト用に手作りされた他の clientlib に埋め込むことができます。
これらのバージョンは、SCF libs フォルダーにあります。
次に例を示します。
注意:オーサー clientlibs は他のライブラリを埋め込みませんが、依存関係をリストします。 他のライブラリに埋め込まれる場合、依存関係は自動的に取り込まれず、埋め込む必要があります。
必要なオーサー clientlib は、 コミュニティコンポーネントガイド.
クライアントライブラリの管理方法は、サイトごとに異なります。 次のような要因が考えられます。
⇐機能の基本事項 | サーバー側のカスタマイズ ⇒ |
---|---|
SCF Handlebars ヘルパー ⇒ |