コンポーネントの作成

注意

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

コンポーネントを拡張する例では、コメントシステムを使用します。コメントシステムは、実際には 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. 選択 すべて保存

chlimage_1-70

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

これらの方向は設定されました グループ から .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. 選択 すべて保存

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 行目まで）。

      • 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

  • 選択 すべて保存

chlimage_1-73

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 つは、

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

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

このページ