コンポーネントの作成

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

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

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

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

これらの方向は、 グループ 以外の値 .hidden そのため、コンポーネントをコンポーネントブラウザー（サイドキック）から使用できるようにします。

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

1. CRXDE Lite（http://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. 「すべて保存」を選択します。

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

これらの方向は設定されました グループ から .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

  • 送信者 /libs/social/commons/components/hbs/comments
  • 宛先 /apps/custom/components/comments

• 編集 comments.hbs 移動先：

  • 値を data-scf-component 属性（20 行目以上）:

    • 送信元 social/commons/components/hbs/comments
    • To /apps/custom/components/comments

  • カスタムコメントコンポーネントを含めるように変更します（75 行目まで）。

    • Replace {{include this resourceType='social/commons/components/hbs/comments/comment'}}
    • を次のタグに置換します。{{include this resourceType='/apps/custom/components/comments/comment'}}

• コピー comment.hbs

  • 送信者 /libs/social/commons/components/hbs/comments/comment
  • 宛先 /apps/custom/components/comments/comment

• 編集 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

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

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

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

  • 選択 ツール > 導入 > レプリケーション
  • 選択 ツリーをアクティベート
  • Start Path を /apps/custom に設定
  • オフ 変更済みのみ
  • 選択 有効化 ボタン

Business.Adobe.com リソース

Cms Cloud Targeted Content Personalized Communications Customer Experience Management Content Management Digital Asset Management