コンポーネントの作成

最終更新日: 2023-10-19
  • トピック:
  • Communities
    このトピックの詳細を表示
  • 作成対象:
  • User

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

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

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

メモ

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

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

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

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

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

  1. 参照先 CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. カスタムアプリケーションの場所を作成します。

    • を選択します。 /apps ノード

      • フォルダーを作成 名前付き カスタム
    • を選択します。 /apps/custom ノード

      • フォルダーを作成 名前付き コンポーネント
  3. を選択します。 /apps/custom/components ノード

    • 作成/コンポーネント…

      • ラベル: コメント
      • タイトル: Alt コメント
      • 説明: 代替のコメントスタイル
      • スーパータイプ: social/commons/components/hbs/comments
      • グループ化: カスタム
    • 選択 次へ

    • 選択 次へ

    • 選択 次へ

    • 選択 OK

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

  5. 選択 すべて保存

  6. 右クリック comments.jsp

  7. 選択 削除

  8. 選択 すべて保存

create-component

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

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

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

  1. 次に移動: /apps/custom/components/comments ノード

  2. ノードを右クリックします。

    • 選択 作成 > コンポーネント…

      • ラベル: コメント
      • タイトル: 代替コメント
      • 説明: 代替のコメントスタイル
      • スーパータイプ: social/commons/components/hbs/comments/comment
      • グループ*.hidden*
    • 選択 次へ

    • 選択 次へ

    • 選択 次へ

    • 選択 OK

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

  4. 選択 すべて保存

  5. 右クリック comment.jsp

  6. 選択 削除

  7. 選択 すべて保存

create-child-component

create-component-crxde

デフォルトの HBS スクリプトをコピーして変更する

使用 CRXDE Lite:

  • コピー comments.hbs

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

  • 編集 comment.hbs 移動先:

    • data-scf-component 属性の値を変更します(19 行目以降)。

      • 送信元 social/commons/components/hbs/comments/comment
      • To /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

  • 選択 すべて保存

comments-clientlibs

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 に設定
    • オフ 変更済みのみ
    • 選択 有効化 ボタン

このページ