使用核心元件

若要在您自己的專案中啟動並執行核心元件,有四個步驟,各自詳述於以下各節:

  1. 下載和安裝
  2. 建立代理元件
  3. 載入核心樣式
  4. 啟用元件
秘訣

有關如何從頭開始使用專案設定(核心元件、可編輯範本、用戶端程式庫和元件開發)的更多指示,請參閱下列多部份教學課程:
AEM Sites - WKND 教學課程快速入門

秘訣

如果您使用AEM Project Archetype,則核心元件會根據Adobe的最佳實踐建議自動包含在您的專案中。

下載並安裝

核心元件背後的驅動力之一是靈活性。 更頻繁地推出新版核心元件,讓Adobe在提供新功能時更有彈性。 開發人員也可以靈活選擇將哪些元件整合至其專案,以及想要更新的頻率。 這會導致核心元件和核心元AEM件的個別發行程式。

因此,無論您是以雲AEM端服務或內部部署的方式運行,都會決定安裝步驟。

AEM as a Cloud Service

沒有步驟! 因AEM為Cloud Service會自動隨附最新版核心元件。 就像AEMaCS提供您最新的AEM功能一樣,AEMaCS會自動提供最新版的核心元件。

在AEMaCS上使用核心元件時,請謹記以下幾點:

  • 核心元件包含在/libs中。
  • 如果項目構建管線再次作為/apps的一部分包含核心元件,則該管線將在日誌中生成警告,並忽略作為項目一部分嵌入的版本。
    • 在即將推出的版本中,包括核心元件將再次失敗管道建置。
  • 如果您的專案之前在/apps中包含核心元件,則您可能需要調整專案。
  • 即使核心元件現在位於/libs中,也不建議在/apps中建立相同路徑的覆蓋。 如果需要自 訂元件的任何方面,則應改用proxy元件模式。

AEM 6.5和之前版本

在生產模式下(不含範例內容)啟動時,核心元件不是快速啟動的一部分。 因此,您的第一步是從GitHub🔗下載最新發行的內容套件,並將它安裝在您的環AEM境中。

有幾種方法可以自動化此程式,但要在實例上快速安裝內容包,最簡單的方法是使用「包管理器」;請參閱安裝軟體包。 此外,一旦您也將執行發佈例項,您就需要將該套件複製至發佈者;請參閱複製軟體包

建立代理元件

由於Proxy元件模式一節中說明的原因,核心元件不得直接從內容引用。 為避免此問題,它們都屬於隱藏的元件群組(.core-wcm.core-wcm-form),因此無法直接顯示在編輯器中。

而必須建立網站特定的元件,以定義要顯示給頁面作者的元件名稱和群組,並將每個元件引用至核心元件作為其超類型。 這些網站特定元件有時稱為「proxy元件」,因為它們不需要包含任何元件,而且主要用來定義網站所用元件的版本。 但是,在自定義核心元件時,這些代理元件在標籤和邏輯定制中扮演了關鍵角色。

因此,對於每個想要用於網站的核心元件,您必須:

  1. 在網站的元件資料夾中建立對應的代理元件。


    例在 /apps/my-site/components 建立類型的標題節點下 cq:Component

  2. 使用super-type指向對應的核心元件版本。

    ExampleAdd following
    屬性:
    sling:resourceSuperType="core/wcm/components/title/v1/title"

  3. 定義元件的群組、標題和(可選)說明。 這些值是專案特定值,並指定元件對作者的公開方式。


    例添加以下屬性:

    componentGroup="My Site"
    jcr:title="Title"  
    jcr:description="Section Heading"
    

例如,查看WKND站點🔗的title元件,這是以這種方式構建的代理元件的一個很好的示例。

載入核心樣式

  1. 如果尚未完成,請建立用戶端資料庫,其中包含您網站所需的所有CSS和JS檔案。

  2. 在您網站的「用戶端程式庫」中,將相依性新增至可能需要的核心元件。 這是透過新增embed屬性來完成的。

    例如,要包含所有v1核心元件的客戶端庫,要添加的屬性為:

    embed="[  
    core.wcm.components.image.v1,  
    core.wcm.components.list.v1,  
    core.wcm.components.breadcrumb.v1,  
    core.wcm.components.form.container.v1,  
    core.wcm.components.form.text.v1  
    ]"
    

在移至下一節之前,請確定您的Proxy元件和用戶端程式AEM庫已部署至您的環境。

允許元件

模板編輯器中執行以下步驟。

  1. 在範本編輯器中,選取「版面容器」,並開啟其原則。
  2. 在「允許的元件」清單中,選取先前建立的代理元件,這些元件應顯示在指派給這些元件的元件群組下。 完成後,請套用變更。
  3. 或者,對於具有設計對話框的元件,可以預先配置它們。

就這樣! 在從已編輯的範本建立的頁面中,您現在應該可以使用新建立的元件。

閱讀下一節內容:

本頁內容

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