コンポーネントを拡張する例では、実際には次の 2 つのコンポーネントで構成されるコメントシステムを使用します。
投稿されたコメントの外観をカスタマイズする場合は特に、両方のコンポーネントを配置する必要があります。
1 つのサイトページで使用できるコメントシステムは 1 つのみです。
多くのコミュニティ機能には、拡張されたコメントシステムを参照するように resourceType を変更できるコメントシステムが既に含まれています。
これらの指示に従って、.hidden
以外のGroup値を指定するので、コンポーネントはコンポーネントブラウザー(サイドキック)から利用できます。
デフォルトの HBS ファイルを代わりに使用するので、自動的に作成された JSP ファイルは削除します。
CRXDE Lite(http://localhost:4502/crx/de/index.jsp)を表示します。
カスタムアプリケーションの場所の作成:
/apps
ノードを選択
/apps/custom
ノードを選択
/apps/custom/components
ノードを選択
作成/コンポーネント… を選択します。
「次へ」を選択します。
「次へ」を選択します。
「次へ」を選択します。
「OK」を選択します。
作成したノードを展開します。/apps/custom/components/comments
「すべて保存」を選択します。
comments.jsp
を右クリック
削除を選択
「すべて保存」を選択します。
これらの方向は、Groupを.hidden
に設定します。これは、親コンポーネントのみをページに含める必要があるためです。
デフォルトの HBS ファイルを代わりに使用するので、自動的に作成された JSP ファイルは削除します。
/apps/custom/components/comments
ノードに移動します
ノードを右クリック
作成/コンポーネントを選択…
*.hidden*
「次へ」を選択します。
「次へ」を選択します。
「次へ」を選択します。
「OK」を選択します。
作成したノードを展開します。/apps/custom/components/comments/comment
「すべて保存」を選択します。
comment.jsp
を右クリック
削除を選択
「すべて保存」を選択します。
CRXDE Lite を使用して、次の手順を実行します。
コピー comments.hbs
comments.hbs
を編集して次を実行:
data-scf-component
属性の値を変更(~行20):
social/commons/components/hbs/comments
/apps/custom/components/comments
カスタムコメントコンポーネントを含めるように変更(~行75):
{{include this resourceType='social/commons/components/hbs/comments/comment'}}
{{include this resourceType='/apps/custom/components/comments/comment'}}
コピー comment.hbs
comment.hbs
を編集して次を実行:
data-scf-component属性の値の変更(~行19)
social/commons/components/hbs/comments/comment
/apps/custom/components/comments/comment
へ/apps/custom
ノードを選択
「すべて保存」を選択します。
このクライアントライブラリを明示的に含めなくても済むように、デフォルトのコメントシステムの clientlib の categories 値(cq.social.author.hbs.comments
)を使用できますが、これを使用すると、デフォルトのコンポーネントのすべてのインスタンスについても、この clientlib が含まれるようになります。
CRXDE Lite を使用して、次の手順を実行します。
/apps/custom/components/comments
ノードを選択
ノードを作成を選択
名前:clientlibs
型:cq:ClientLibraryFolder
追加プロパティタブ:
categories
String
NameTypeValue cq.social.author.hbs.comments
Multi
dependencies
String
NameTypeValue cq.social.scf
Multi
「すべて保存」を選択します。
/apps/custom/components/comments/clientlib
のノードを選択した状態で、3つのファイルを作成します。
css.txt
js.txt
「customcommentsystem.js」をjs.txt
の内容として入力
「すべて保存」を選択します。
SCFコンポーネントを拡張(オーバーライド)する場合、resourceTypeは異なります(オーバーレイでは、resourceTypeが同じになるように、/apps
の前に/libs
を検索する相対的な検索メカニズムを使用します)。 このため、カスタムresourceTypeのSCF JSモデルと表示を登録するために、(クライアントライブラリ内に)JavaScriptを作成する必要があります。
次のテキストをcustomcommentsystem.js
の内容として入力します。
(function($CQ, _, Backbone, SCF) {
"use strict";
var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;
var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;
SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);
})($CQ, _, Backbone, SCF);
拡張されたコンポーネントをパブリッシュ環境で確認するには、カスタムコンポーネントをレプリケートする必要があります。
その方法の1つは、次のとおりです。
グローバルナビゲーションから、
Start Path
を/apps/custom
に設定