コンポーネントを拡張する例では、実際には次の 2 つのコンポーネントで構成されるコメントシステムを使用します。
投稿されたコメントの外観をカスタマイズする場合は特に、両方のコンポーネントを配置する必要があります。
1 つのサイトページで使用できるコメントシステムは 1 つのみです。
多くのコミュニティ機能には、拡張されたコメントシステムを参照するように resourceType を変更できるコメントシステムが既に含まれています。
これらの方向は、 グループ 以外の値 .hidden
そのため、コンポーネントをコンポーネントブラウザー(サイドキック)から使用できるようにします。
デフォルトの HBS ファイルを代わりに使用するので、自動的に作成された JSP ファイルは削除します。
CRXDE Lite(http://localhost:4502/crx/de/index.jsp)を表示します。
カスタムアプリケーションの場所を作成します。
を選択します。 /apps
ノード
を選択します。 /apps/custom
ノード
を選択します。 /apps/custom/components
ノード
作成/コンポーネント… を選択します。
「次へ」を選択します。
「次へ」を選択します。
「次へ」を選択します。
「OK」を選択します。
作成したノードを展開します。 /apps/custom/components/comments
「すべて保存」を選択します。
右クリック comments.jsp
選択 削除
「すべて保存」を選択します。
これらの方向は設定されました グループ から .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
値 cq.social.author.hbs.comments
Multi
dependencies
タイプ String
値 cq.social.scf
Multi
「すべて保存」を選択します。
を使用 /apps/custom/components/comments/clientlib
選択した s ノード、3 つのファイルを作成します。
css.txt
js.txt
次の内容を'customcommentsystem.js'と入力します。 js.txt
「すべて保存」を選択します。
SCF コンポーネントを拡張(上書き)する場合、resourceType は異なります(オーバーレイは、検索を実行する相対検索メカニズムを利用します) /apps
前 /libs
したがって、resourceType は同じままです )。 このため、カスタム 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
に設定