コンポーネントの作成 create-the-components

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
Communities

作成対象：

User

CAUTION

AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。詳細は、技術サポート期間. サポートされているバージョンを見つけるここ.

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

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

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

NOTE

サイトページごとに 1 つのコメントシステムのみ使用できます。

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

コメントコンポーネントの作成 create-the-comments-component

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

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

参照先 CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
カスタムアプリケーションの場所を作成します。
- を選択します。 /apps ノード
  - フォルダーを作成 名前付き カスタム
- を選択します。 /apps/custom ノード
  - フォルダーを作成 名前付き コンポーネント
を選択します。 /apps/custom/components ノード
- 作成/コンポーネント…
  - ラベル: コメント
  - タイトル: Alt コメント
  - 説明: 代替のコメントスタイル
  - スーパータイプ: social/commons/components/hbs/comments
  - グループ: カスタム
- 選択次へ
- 選択次へ
- 選択次へ
- 選択 OK
作成したノードを展開します。 /apps/custom/components/comments
選択 すべて保存
右クリック comments.jsp
選択削除
選択 すべて保存

chlimage_1-70

子コメントコンポーネントの作成 create-the-child-comment-component

これらの方向は設定されました グループ から .hidden 親コンポーネントのみをページ内に含める必要があるので。

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

次に移動： /apps/custom/components/comments ノード
ノードを右クリックします。
- 選択 作成/コンポーネント…
  - ラベル: コメント
  - タイトル: 代替コメント
  - 説明: 代替のコメントスタイル
  - スーパータイプ: social/commons/components/hbs/comments/comment
  - グループ：*.hidden*
- 選択次へ
- 選択次へ
- 選択次へ
- 選択 OK
作成したノードを展開します。 /apps/custom/components/comments/comment
選択 すべて保存
右クリック comment.jsp
選択削除
選択 すべて保存

chlimage_1-71 chlimage_1-72

デフォルトの HBS スクリプトをコピーして変更する copy-and-modify-the-default-hbs-scripts

使用 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
  - To /apps/custom/components/comments/comment
選択 /apps/custom ノード
選択 すべて保存

クライアントライブラリフォルダーの作成 create-a-client-library-folder

このクライアントライブラリを明示的に含める必要がないように、デフォルトのコメントシステムの 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 モデルとビューの登録 register-the-scf-model-view

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

次のテキストをコンテンツとして入力 customcommentsystem.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);

選択 すべて保存

アプリの公開 publish-the-app

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

その方法の 1 つは、

グローバルナビゲーションから
- 選択 ツール/導入/レプリケーション
- Activate Tree を選択します。
- 設定 Start Path:から /apps/custom
- オフ Only Modified
- 選択 Activateボタン

recommendation-more-help

5d37d7b0-a330-461b-814d-068612705ff6