使用核心元件

若要在您自己的專案中開始使用核心元件,有四個步驟,請在以下各節中個別詳細說明:

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

如需從頭開始使用專案設定、核心元件、可編輯範本、用戶端程式庫和元件開發的更多指示,下列多部分教學課程可能會受到關注:
AEM Sites - WKND 教學課程快速入門

下載和安裝

核心元件背後的驅動思想之一是靈活性。 更常推出新版核心元件,讓Adobe在提供新功能時更具彈性。 開發人員則可選擇將哪些元件整合至其專案中,以及想更新的頻率,因而可有彈性。 如此一來,AEM和核心元件就能分開發行程式。

因此,無論您是執行AEM as a Cloud Service還是內部部署,都會決定安裝步驟。

AEM as a Cloud Service

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

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

  • 核心元件包含在/libs中。
  • 如果專案建置管道再次包含核心元件作為/apps的一部分,則會在記錄中產生警告,且會忽略內嵌於專案中的版本。
    • 在即將發行的版本中,再次包含核心元件將會失敗管道建置。
  • 如果您的專案先前在/apps中包含核心元件,則您可能需要調整專案。
  • 即使核心元件現在位於/libs中,也不建議在/apps中建立相同路徑的任何覆蓋。 如果需要 自訂元件的任何方面,則應使用代理元件模式。

AEM 6.5和之前版本

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

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

建立代理元件

基於代理元件模式區段中說明的原因,不得直接從內容參考核心元件。 為避免此情況,這些變數都屬於隱藏的元件群組(.core-wcm.core-wcm-form),因此無法直接在編輯器中顯示。

而是必須建立網站特定元件,以定義要顯示給頁面作者的元件名稱和群組,並將每個元件參照核心元件作為其超類型。 這些網站特定元件有時稱為「代理元件」,因為它們不需要包含任何內容,且主要用於定義網站要使用的元件版本。 不過,自訂核心元件時,這些代理元件在標籤和邏輯自訂方面扮演著重要角色。

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

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


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

  2. 指向超類型對應的核心元件版本。


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

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


    範例新增下列屬性:

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

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

載入核心樣式

  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. (可選)對於具有設計對話框的元件,可以預先配置它們。

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

閱讀下一節內容:

本頁內容