建立元件

擴展元件的示例使用注釋系統,該系統實際上由兩個元件組成

  • 注釋——包含的注釋系統,該系統是放置在頁面上的元件。
  • Comment —— 擷取已張貼留言之例項的元件。

這兩個元件都必須到位,尤其是自訂已張貼留言的外觀時。

注意

每個網站頁面僅允許一個注釋系統。

許多Communities功能已包含注釋系統,其resourceType可修改以參考擴充的注釋系統。

建立注釋元件

這些方向指定除.hidden外的​Group​值,以便從元件瀏覽器(sidekick)使元件可用。

刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。

  1. 瀏覽至​CRXDE|Lite(http://localhost:4502/crx/de/index.jsp)

  2. 建立自訂應用程式的位置:

    • 選擇/apps節點

      • 建立 Foldernamed自
    • 選擇/apps/custom節點

      • 建立 Foldernamed元
  3. 選擇/apps/custom/components節點

    • 「建立>元件……」

      • 標籤: 留言
      • 標題: 替代注釋
      • 說明: 替代注釋樣式
      • 超類型: social/commons/components/hbs/comments
      • 群組: 自訂
    • 選擇​Next

    • 選擇​Next

    • 選擇​Next

    • 選擇​確定

  4. 展開剛建立的節點:/apps/custom/components/comments

  5. 選擇​全部保存

  6. 按一下右鍵comments.jsp

  7. 選擇​Delete

  8. 選擇​全部保存

create-component

建立子注釋元件

這些方向將​Group​設為.hidden,因為頁面中應僅包含父元件。

刪除自動建立的JSP檔案是因為將改用預設的HBS檔案。

  1. 導航至/apps/custom/components/comments節點

  2. 按一下右鍵節點

    • 選擇​建立 > 元件……

      • 標籤: 評論
      • 標題: 替代注釋
      • 說明: 替代注釋樣式
      • 超類型: social/commons/components/hbs/comments/comments
      • 群組: *.hidden*
    • 選擇​Next

    • 選擇​Next

    • 選擇​Next

    • 選擇​確定

  3. 展開剛建立的節點:/apps/custom/components/comments/comment

  4. 選擇​全部保存

  5. 按一下右鍵comment.jsp

  6. 選擇​Delete

  7. 選擇​全部保存

create-child-component

create-component-crxde

複製和修改預設HBS指令碼

使用CRXDE Lite:

建立客戶端庫資料夾

為避免明確包含此客戶端庫,可使用預設注釋系統的clientlib的類別值(cq.social.author.hbs.comments),但是,預設元件的所有實例也將包含此clientlib。

使用CRXDE Lite:

  • 選擇/apps/custom/components/comments節點

  • 選擇​建立節點

    • 名稱: clientlibs

    • 類型: cq:ClientLibraryFolder

    • 添加到​屬性​頁籤:

      • NameTypeValue categories String cq.social.author.hbs.comments Multi
      • NameTypeValue dependencies String cq.social.scf Multi
  • 選擇​全部保存

  • 選擇/apps/custom/components/comments/clientlibs節點後,建立3個檔案:

    • 名稱: css.txt
    • 名稱: js.txt
    • 名稱:customcommentsystem.js
  • 輸入'customcommentsystem.js'作為js.txt的內容

  • 選擇​全部保存

comments-clientlibs

註冊SCF型號並查看

在擴展(覆蓋)SCF元件時,resourceType不同(覆蓋使用在/libs之前通過/apps搜索的相對搜索機制,以使resourceType保持不變)。 這就是為什麼必須編寫JavaScript(在用戶端程式庫中)來註冊SCF JS模型並檢視自訂resourceType。

輸入以下文本作為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);
  • 選擇​全部保存

發佈應用程式

為了在發佈環境中體驗擴展元件,需要複製自定義元件。

一種方法是:

  • 從全域導覽,

    • 選擇​工具 > 部署 > 複製
    • 選擇​激活樹
    • Start Path設為/apps/custom
    • 取消選中​僅已修改
    • 選擇​激活​按鈕

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free