現在表示中:

コンポーネントを拡張する例では、実際には次の 2 つのコンポーネントで構成されるコメントシステムを使用します。

  • comments - ページに配置されるコンポーネントである包括的なコメントシステム
  • comment - 投稿されたコメントのインスタンスを捕捉するコンポーネント
投稿されたコメントの外観をカスタマイズする場合は特に、両方のコンポーネントを配置する必要があります。

注意:

1 つのサイトページで使用できるコメントシステムは 1 つのみです。

多くのコミュニティ機能には、拡張されたコメントシステムを参照するように resourceType を変更できるコメントシステムが既に含まれています。

コメントコンポーネントの作成

この手順では、コンポーネントブラウザー(サイドキック)からコンポーネントを使用できるように、「グループ」に .hidden 以外の値を指定します。

デフォルトの HBS ファイルを代わりに使用するので、自動的に作成された JSP ファイルは削除します。

  1. CRXDE Litehttp://localhost:4502/crx/de/index.jsp)を表示します。
  2. カスタムアプリケーションの場所を作成します。
    • /apps ノードを選択します。
      • フォルダーを作成」を選択し、custom という名前のフォルダーを作成します。
    • /apps/custom ノードを選択します。
      • フォルダーを作成」を選択し、components という名前のフォルダーを作成します。
  3. /apps/custom/components ノードを選択します。
    • 作成/コンポーネント... を選択します。
      • ラベル:comments
      • タイトル:Alt Comments
      • 説明:Alternative comments style
      • スーパータイプ:social/commons/components/hbs/comments
      • グループ:Custom
    • 次へ」を選択します。
    • 次へ」を選択します。
    • 次へ」を選択します。
    • OK」を選択します。
  4. 作成したノード /apps/custom/components/comments を展開します。
  5. すべて保存」を選択します。
  6. comments.jsp を右クリックします。
  7. 削除」を選択します。
  8. すべて保存」を選択します。

子コメントコンポーネントの作成

この手順では、「グループ」を .hidden に設定し、親コンポーネントのみがページに含まれるようにします。

デフォルトの HBS ファイルを代わりに使用するので、自動的に作成された JSP ファイルは削除します。

  1. /apps/custom/components/comments ノードに移動します。
  2. このノードを右クリックします。
    • 作成/コンポーネント... を選択します。
      • ラベル:comment
      • タイトル:Alt Comment
      • 説明:Alternative comment style
      • スーパータイプ:social/commons/components/hbs/comments/comment
      • グループ:.hidden
    • 次へ」を選択します。
    • 次へ」を選択します。
    • 次へ」を選択します。
    • OK」を選択します。
  3. 作成したノード /apps/custom/components/comments/comment を展開します。
  4. すべて保存」を選択します。
  5. comment.jsp を右クリックします。
  6. 削除」を選択します。
  7. すべて保存」を選択します。

デフォルトの HBS スクリプトのコピーと変更

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'}}
  • /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  複数
      • 名前 dependencies  タイプ String  cq.social.scf  複数
  • すべて保存」を選択します。
  • /apps/custom/components/comments/clientlibs ノードを選択した状態で、次の 3 つのファイルを作成します。
    • 名前css.txt
    • 名前js.txt
    • 名前:customcommentsystem.js
  • js.txt の内容として、「customcomments.js」と入力します。
  • すべて保存」を選択します。

SCF モデルおよびビューの登録

SCF コンポーネントを拡張(上書き)する場合は、resourceType が異なります(オーバーレイでは、/libs の前に /apps を検索する相対検索メカニズムが使用されるので、resourceType は同じままです)。このような理由から、JavaScript(クライアントライブラリ内)を記述して、カスタム resourceType の SCF JS モデルおよびビューを登録する必要があります。

customcommentsystem.js の内容として次のテキストを入力します。

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 つの方法は次のとおりです。

  • グローバルナビゲーションから、次の操作を行います。
    • ツール/導入/レプリケーションを選択します。
    • ツリーをアクティベート」を選択します。
    • 開始パス」を /apps/custom に設定します。
    • 変更済みのみ」をオフにします。
    • アクティベート」ボタンを選択します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー