コンポーネントの作成

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

  • コメント — ページ上に配置されるコンポーネントである包括的なコメントシステム
  • コメント — 投稿されたコメントのインスタンスをキャプチャするコンポーネント

投稿されたコメントの外観をカスタマイズする場合は特に、両方のコンポーネントを配置する必要があります。

メモ

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 ノード

    • 作成/コンポーネント… を選択します。

      • ラベル: コメント
      • タイトル:Alt Comments **
      • 説明:Alternative comments style **
      • スーパータイプ:social/commons/components/hbs/comments **
      • グループ:Custom **
    • 次へ」を選択します。

    • 次へ」を選択します。

    • 次へ」を選択します。

    • OK」を選択します。

  4. 作成したノードを展開します。 /apps/custom/components/comments

  5. すべて保存」を選択します。

  6. 右クリック comments.jsp

  7. 選択 削除

  8. すべて保存」を選択します。

chlimage_1-70

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

これらの方向は設定されました グループ から .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. すべて保存」を選択します。

chlimage_1-71 chlimage_1-72

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

CRXDE Lite を使用して、次の手順を実行します。

  • コピー comments.hbs

  • 編集 comments.hbs 移動先:

    • 値を data-scf-component 属性(20 行目以上):

      • 送信元 social/commons/components/hbs/comments
      • To /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
  • 次の内容を'customcommentsystem.js'と入力します。 js.txt

  • すべて保存」を選択します。

chlimage_1-73

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

SCF コンポーネントを拡張(上書き)する場合、resourceType は異なります(オーバーレイは、検索を実行する相対検索メカニズムを利用します) /apps/libs したがって、resourceType は同じままです )。 このため、カスタム resourceType の SCF JS モデルとビューを登録するために、(クライアントライブラリに)JavaScript を記述する必要があります。

次のテキストをコンテンツとして入力 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 つは、

  • グローバルナビゲーションから

    • 選択 ツール/導入/レプリケーション
    • Activate Tree
    • 設定 Start Path:から /apps/custom
    • オフ Only Modified
    • 選択 Activateボタン

このページ