建立元件

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

  • 注釋——包含的注釋系統,該系統是放置在頁面上的元件。
  • 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 Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now