建立元件 create-the-components

延伸元件的範例使用由兩個元件組成的註解系統。

  • 註解 — 放在頁面上的元件所構成的註解系統。
  • 評論 — 擷取已張貼評論之例項的元件。

兩個元件都必須放置到位,尤其是如果自訂張貼的註解的外觀。

NOTE
每個網站頁面只允許一個註解系統。
許多Communities功能已經包含註解系統,其resourceType可以修改為參考擴充的註解系統。

建立註解元件 create-the-comments-component

這些指示會指定.hidden以外的​ 群組 ​值,以便元件可以從元件瀏覽器(sidekick)使用。

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

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

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

    • 選取/apps節點

      • 建立名為 ​​自訂​​ 的資料夾
    • 選取/apps/custom節點

      • 建立名為 ​​元件​​ 的資料夾
  3. 選取/apps/custom/components節點

    • 建立>元件……

      • 標籤註解
      • 標題替代註解
      • 描述替代註解樣式
      • 超級型別social/commons/components/hbs/comments
      • 群組自訂
    • 選取​ 下一步

    • 選取​ 下一步

    • 選取​ 下一步

    • 選取​ 確定

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

  5. 選取​ 全部儲存

  6. 用滑鼠右鍵按一下comments.jsp

  7. 選取​ 刪除

  8. 選取​ 全部儲存

create-component

建立子註解元件 create-the-child-comment-component

這些方向將​ 群組 ​設定為.hidden,因為只有父元件應包含在頁面中。

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

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

  2. 以滑鼠右鍵按一下節點

    • 選取​ 建立 > 元件……

      • 標籤註解
      • 標題替代註解
      • 描述替代註解樣式
      • 超級型別social/commons/components/hbs/comments/comment
      • 群組*.hidden*
    • 選取​ 下一步

    • 選取​ 下一步

    • 選取​ 下一步

    • 選取​ 確定

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

  4. 選取​ 全部儲存

  5. 用滑鼠右鍵按一下comment.jsp

  6. 選取​ 刪除

  7. 選取​ 全部儲存

create-child-component

create-component-crxde

複製及修改預設HBS指令碼 copy-and-modify-the-default-hbs-scripts

使用CRXDE Lite

建立使用者端資源庫資料夾 create-a-client-library-folder

若要避免包含此使用者端程式庫,可以使用預設註解系統clientlib的類別值( 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節點後,建立三個檔案:

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

  • 選取​ 全部儲存

comments-clientlibs

註冊SCF模型與檢視 register-the-scf-model-view

延伸(覆寫) SCF元件時,resourceType不同(覆寫使用相對搜尋機制,在/libs前搜尋/apps,使resourceType保持相同)。 這就是為什麼需要編寫JavaScript (在使用者端程式庫中)來註冊SCF JS模型和檢視自訂resourceType的原因。

輸入下列文字作為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

若要在發佈環境中體驗擴充元件,必須複製自訂元件。

其中一個方法是:

  • 從全域導覽,

    • 選取​ 工具 > 部署 > 復寫
    • 選取​ 啟動樹狀結構
    • Start Path設為/apps/custom
    • 取消核取​ Only Modified
    • 選取​ 啟動 ​按鈕
recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791