開發核心元件

何時該使用核心元件？

核心元件不僅是全新功能，並且有多項優點，因此建議用於新的 AEM 專案。對於既有專案來說，移轉應該是品牌重塑或整體重構等較大專案工作的一部分。

因此，Adobe提供下列建議：

  • 新專案
    新專案應一律嘗試使用核心元件。 如果核心元件無法直接使用，或 延伸 為滿足專案需求，請依照核心元件中所列的元件架構，建立自訂元件。 除非其他情況，否則請避免使用 基礎元件.
  • 現有專案
    建議持續使用 基礎元件，除非計畫進行網站或元件重構。
    由於它們被大多數現有項目廣泛使用，因此基礎元件 將繼續受支援。
  • 全新自訂元件
    評估現有 可自訂核心元件.
    否則，建議是依照 元件指南.
  • 現有自訂元件
    如果您的元件如預期般運作，請保持原樣。

    如果沒有，請參閱上述「新自訂元件」。

如何使用核心元件成功

核心元件功能強大、靈活，易於使用和定制。 遵循幾項重要准則 將能確保您的核心元件專案成功。

移轉至核心元件

任何新專案都應使用核心元件來實作。 但現有專案通常會大量實施基礎元件。

從Foundation元件遷移

對現有專案付出更大努力（例如品牌重塑或整體重構）通常可讓您移轉至核心元件。 為方便移轉，Adobe提供了許多移轉工具，以鼓勵採用核心元件和最新的AEM技術。

AEM現代化工具 可輕鬆轉換：

  • 從靜態範本轉換為可編輯的範本
  • 根據原則設計設定
  • 從基礎元件轉換為核心元件
  • 從傳統 UI 轉換為觸控式 UI

如需這些工具之使用的詳細資訊， 查看其檔案.

注意

AEM現代化工具是社群的努力成果，Adobe不支援或保固。

透過移轉至AEMas a Cloud Service

由於AEMas a Cloud Service會自動隨附最新版核心元件，當您從內部部署AEM安裝移轉時，必須移除專案中對核心元件的任何相依性 pom.xml 檔案。

您的代理元件仍將如往常般運作，因為proxy指向必要的supertype，且supertype路徑中包含版本。 如此一來，只要移除相依性，核心元件就能像在內部部署一樣，在AEMaCS中運作。

如同任何其他AEMaaCS專案，您也需要將相依性新增至AEM SDK jar中。 這並非核心元件專屬，而是必要項目。

<dependency>
   <groupId>com.adobe.aem</groupId>
   <artifactId>aem-sdk-api</artifactId>
</dependency>

請參閱檔案 AEM專案結構 以取得AEMaaCS專案的詳細資訊。

核心元件支援

核心元件是 AEM 不可或缺的一部分，並依照與 Quickstart 所提供相同的條款與條件給予支援。

如同其他AEM產品功能，一般規則為：元件會先宣佈淘汰，並在下列AEM版本中盡早移除。 這可讓客戶在停止支援前，至少有一個發行週期可移至新版本的元件。

每個元件的版本都清楚說明其支援的 AEM 版本。當停止支援 AEM 的單一版本時，核心元件對該 AEM 版本的支援也會停止。

如需支援自訂元件的詳細資訊，請參閱 自訂核心元件 頁面。

技術功能

下表概述核心元件與基礎元件之間的差異。

如需其製作功能和預先設定選項的詳細資訊， 請參閱相關的製作頁面.

功能 核心元件 基礎元件
邏輯實作 Java POJO搭配 Sling模型 註解 JSP代碼
標籤定義 HTML範本語言 (HTL)語法 JSP代碼
XSS淨化 由HTL自動化 多為手動
CSS類命名 基於的標準化命名慣例 區塊元素修飾詞 (BEM)標籤法（自2.0.0版起） 自訂配置
對話框定義 珊瑚3 Coral 2 +傳統UI
JSON 輸出 Jackson序列化的Sling模型匯出工具 預設Sling Servlet
版本設定 針對模型和HTL 無
測試 單元測試+整合測試 整合測試
傳送 透過公開GitHub 通過快速入門
授權 Apache授權 Adobe專有
貢獻 透過提取請求 不可能
協助工具 完全符合 WCAG 2.0 AA標準 僅部分符合 WCAG 2.0 AA標準

元件清單

下表列出可用的核心元件（連結至其API），並指出其所取代的基礎元件。

核心元件 說明 已更換基礎元件
Page 使用範本編輯器的回應式頁面 /libs/foundation/components/page /libs/wcm/foundation/components/page
階層連結 頁面階層導覽 /libs/foundation/components/breadcrumb
標題 H1-H6標題 /libs/foundation/components/title /libs/wcm/foundation/components/title
文字 RTF文字 /libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text
影像 智慧和延遲載入最佳轉譯大小 /libs/foundation/components/image /libs/foundation/components/adaptiveimage /libs/foundation/components/logo /libs/foundation/components/mobileimage /libs/foundation/components/mobilelogo /libs/wcm/foundation/components/image
清單 頁面清單 /libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list
社交媒體分享 Facebook與Pinterest共用widget -
來自容器 回應式表單段落系統 /libs/foundation/components/form/start /libs/foundation/components/form/end
表單文字 文字輸入欄位 /libs/foundation/components/form/text /libs/foundation/components/form/password
表單選項 多選項輸入欄位 /libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown
已隱藏的表單 隱藏輸入欄位 /libs/foundation/components/form/hidden
表單按鈕 提交或自訂按鈕 /libs/foundation/components/form/submit
導覽 列出巢狀頁面階層的網站導覽元件 /libs/foundation/components/topnav /libs/foundation/components/mobiletopnav
語言導覽 列出全球語言結構的語言和國家切換器 -
快速搜尋 在下拉式功能表中將結果顯示為就地建議的搜尋元件 /libs/foundation/components/search
Teaser 可讓內容作者輕鬆建立預告，以使用影像、標題或RTF來進一步內容，並連結至更多內容或其他動作 -
索引標籤 可讓內容作者在多個索引標籤內組織頁面內容 -
傳送 允許內容作者在旋轉的投影片輪播中組織內容 /libs/foundation/components/carousel
內容片段 允許顯示內容片段 -
內容片段清單 允許顯示內容片段清單 -
分隔符號 分隔頁面上的內容 -
折疊式面板 在可折疊的折疊式折疊式功能表中組織內容面板 -
容器 在容器內組織元件 -
按鈕 在頁面上建立按鈕 -
下載 新增可下載的資產至頁面 -
體驗片段 新增體驗片段至頁面 /libs/cq/experience-fragments/editor/components/experiencefragment
內嵌 將外部資源內嵌在頁面中 -
進度列 提供目標進展的直觀表示 -
PDF 檢視器 在頁面上呈現PDF文檔 -

升級核心元件

版本控制元件的其中一項優點，是可將移轉至新AEM版本與移轉至新元件版本分開。 此外，如果有新元件版本可用，則可將每個元件個別移轉至新版本。

移轉至新AEM版本不會影響核心元件的運作方式，但條件是其版本也支援要移轉至的新AEM版本。 只要核心元件未使用已 已過時或已移除.

移轉至新版本的核心元件也不會影響元件的運作方式，但頁面作者可能會受到新功能的影響，這可能需要透過範本編輯器進行一些設定，以防不需要預設行為。 不過可能需要調整自訂項目，如需詳細資訊，請參閱 自訂核心元件 頁面。

本頁內容