使用核心元件 using-core-components

若要在自己的專案中啟動並執行核心元件,共有四個步驟,以下各節將分別詳細說明:

TIP
如需如何從頭開始使用專案設定、核心元件、可編輯的範本、使用者端程式庫和元件開發的更廣泛說明,以下多部分教學課程可能會對您有所幫助:
開始使用AEM Sites - WKND教學課程
TIP
如果您使用AEM專案原型,核心元件會根據Adobe的最佳實務建議自動包含在您的專案中。

下載並安裝 download-and-install

核心元件背後的驅動理念之一是彈性。 更頻繁地發行新版本的核心元件,可讓Adobe更靈活地提供新功能。 反過來,開發人員也可以靈活地選擇將哪些元件整合到其專案中,以及他們希望多久更新一次。 這會導致AEM和核心元件出現個別發行程式。

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

AEM as a Cloud Service aemaacs

沒有第一步! AEM as a Cloud Service會自動隨最新版本的核心元件提供。 正如AEMaaCS為您提供AEM的最新功能一樣,AEMaaCS會自動讓您使用最新版本的核心元件。

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

AEM 6.5和舊版 aem-65

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

有數種方法可以自動執行這項操作,但使用封裝管理員可以最簡單的方式在執行個體上快速安裝內容封裝;請參閱安裝封裝。 此外,一旦您也執行了發佈執行個體,您就需要將該套件復寫到發佈者;請參閱復寫套件

建立Proxy元件 create-proxy-components

由於Proxy元件模式區段中說明的原因,核心元件不可從內容中直接參照。 為避免出現此情況,這些元件都屬於隱藏的元件群組( .core-wcm.core-wcm-form),這將阻止它們直接顯示在編輯器中。

相反地,必須建立網站專用元件,這些元件會定義要向頁面作者顯示的所需元件名稱和群組,並將每個元件作為核心元件的超型別。 這些網站專用元件有時稱為「Proxy元件」,因為它們不需要包含任何內容,並且主要用於定義要用於網站的元件版本。 不過,在自訂核心元件時,這些Proxy元件在標籤與邏輯自訂方面扮演重要角色。

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

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

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

  2. 指向具有超級型別的對應核心元件版本。

    範例
    新增下列屬性:
    sling:resourceSuperType="core/wcm/components/title/v1/title"

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

    範例
    新增下列屬性:

    code language-shell
    componentGroup="My Site"
    jcr:title="Title"
    jcr:description="Section Heading"
    

例如,檢視WKND網站🔗的title元件,這是以這種方式建置的Proxy元件的好範例。

載入核心樣式 load-the-core-styles

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

  2. 在網站的使用者端資料庫上,將相依性新增至所需的核心元件。 這是透過新增embed屬性來完成的。

    例如,若要包含所有v1核心元件的使用者端資料庫,則要新增的屬性為:

    code language-shell
    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環境。

允許元件 allow-the-components

範本編輯器中執行以下步驟。

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

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

閱讀後續章節:

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c