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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
コミュニティ

作成対象：

開発者

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

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

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

NOTE

サイトページごとに 1 つのコメントシステムのみが許可されます。

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

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

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

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

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

create-component

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

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

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

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

create-child-component

create-component-crxde

デフォルトの 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 から
  - /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 選択
「すべて保存」を選択します。

クライアントライブラリフォルダーの作成 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/clientlibs ノードを選択した状態で、次の 3 つのファイルを作成します。
- 名前：css.txt
- 名前：js.txt
- 名前:customcommentsystem.js
js.txt のコンテンツとして「customcommentsystem.js」と入力します
「すべて保存」を選択します。

comments-clientlibs

SCF モデルとビューの登録 register-the-scf-model-view

SCF コンポーネントを拡張（上書き）する場合、resourceType は異なります（オーバーレイでは、resourceType が同じままになるように、/libs 前に /apps を検索する相対検索メカニズムを使用します）。そのため、SCF JS モデルを登録してカスタム resourceType を表示するには、（クライアントライブラリに）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 publish-the-app

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

その方法の 1 つは次のとおりです。

グローバルナビゲーションから
- ツール/導入/レプリケーション を選択します。
- ツリーのアクティブ化 を選択します。
- Start Path を /apps/custom に設定
- 「変更済みのみ」をオフにします
- 「アクティベート」ボタンを選択します

recommendation-more-help

81e2cd9d-0789-409d-b87c-2a8ce4f28791