若要在您自己的專案中啟動並執行核心元件,有四個步驟,各自詳述於以下各節:
或者,如需如何從頭開始使用專案設定、核心元件、可編輯範本、用戶端程式庫和元件開發的更多指示,請參閱下列多部份教學課程:
AEM Sites - WKND 教學課程快速入門
核心元件背後的驅動力之一是靈活性。 更頻繁地推出新版核心元件,讓Adobe在提供新功能時更有彈性。 開發人員也可以靈活選擇將哪些元件整合至其專案,以及想要更新的頻率。
因此,在生產模式下(不含示例內容)啟動時,核心元件不是快速啟動的一部分。 因此,您的第一步是從GitHub下載最新發行的內容套件,並將它安裝在AEM環境中。
有幾種方法可以自動化此程式,但要在實例上快速安裝內容包,最簡單的方法是使用「包管理器」;請參閱安裝軟體包。 此外,一旦您也將執行發佈例項,您就需要將該套件複製至發佈者;請參閱複製軟體包。
由於Proxy元件模式一節中說明的原因,核心元件不得直接從內容引用。 為避免此問題,它們都屬於隱藏的元件群組(.core-wcm
或.core-wcm-form
),因此無法直接顯示在編輯器中。
而必須建立網站特定的元件,以定義要顯示給頁面作者的元件名稱和群組,並將每個元件引用至核心元件作為其超類型。 這些網站特定元件有時稱為「proxy元件」,因為它們不需要包含任何元件,而且主要用來定義網站所用元件的版本。 但是,在自定義核心元件時,這些代理元件在標籤和邏輯定制中扮演了關鍵角色。
因此,對於每個想要用於網站的核心元件,您必須:
在網站的元件資料夾中建立對應的代理元件。
示
例在 /apps/my-site/components
建立類型的標題節點下 cq:Component
使用super-type指向對應的核心元件版本。
ExampleAdd following
屬性:
sling:resourceSuperType="core/wcm/components/title/v1/title"
定義元件的群組、標題和(可選)說明。 這些值是專案特定值,並指定元件對作者的公開方式。
示
例添加以下屬性:
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元件,這是以這種方式構建的代理元件的一個很好的示例。
如果尚未完成,請建立用戶端資料庫,其中包含您網站所需的所有CSS和JS檔案。
在您網站的「用戶端程式庫」中,將相依性新增至可能需要的核心元件。 這是透過新增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環境,然後再移至下一節。
在模板編輯器中執行以下步驟。
就這樣! 在從已編輯的範本建立的頁面中,您現在應該可以使用新建立的元件。
閱讀下一節內容: