コンポーネントを拡張する例では、実際には次の 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
js.txt
の内容として「customcommentsystem.js」と入力します。
「すべて保存」を選択します。
SCFコンポーネントを拡張(上書き)する場合、resourceTypeは異なります(オーバーレイでは、/libs
の前に/apps
を検索する相対検索メカニズムを使用して、resourceTypeを同じままにします)。 このため、(クライアントライブラリ内の)JavaScriptを記述して、SCF JSモデルとカスタムresourceTypeのビューを登録する必要があります。
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
に設定します。