使用核心元件

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

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

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

下載並安裝

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

因此,在生產模式下(不含示例內容)啟動時,核心元件不是快速啟動的一部分。 因此,您的第一步是從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站點](https://github.com/adobe/aem-guides-wknd/blob/master/ui.apps/src/main/content/jcr_root/apps/wknd/components/title/.content.xml)的[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 Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free