コンポーネントの作成

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

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

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

メモ

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

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

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

これらの指示に従って、.hidden以外の​Group​値を指定するので、コンポーネントはコンポーネントブラウザー(サイドキック)から利用できます。

デフォルトの 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

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

これらの方向は、Group​を.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 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
  • 「customcommentsystem.js」をjs.txtの内容として入力

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

chlimage_1-73

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

SCFコンポーネントを拡張(オーバーライド)する場合、resourceTypeは異なります(オーバーレイでは、resourceTypeが同じになるように、/appsの前に/libsを検索する相対的な検索メカニズムを使用します)。 このため、カスタム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);
  • すべて保存」を選択します。

アプリの公開

拡張されたコンポーネントをパブリッシュ環境で確認するには、カスタムコンポーネントをレプリケートする必要があります。

その一つの方法は

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

    • ツール/導入/レプリケーション​を選択します。
    • Activate Tree
    • Start Pathを設定:を/apps/customに変更します。
    • Only Modifiedのチェックを外す
    • Activateボタンを選択

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now