開發核心元件

何時使用核心元件?

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

因此,Adobe提供下列建議:

  • 新專
    案新專案應一律嘗試使用核心元件。如果核心元件無法直接使用或extended以符合專案需求,則請依照核心元件中所述的元件架構建立自訂元件。 除非其他情況不可能,否則請避免使用foundation元件
  • 現有
    的ProjectsRecommendation會繼續使用 基礎元件,除非計畫進行網站或元件重構。
    由於它們在大多數現有項目中都非常廣泛地使用,因此將繼續支援基礎元件
  • 新自訂元
    件評估是否可 自訂現有核心元件
    如果沒有,建議是按照元件指南建立新的自定義元件。
  • 現有自訂
    元件如果您的元件如預期般運作,則可維持原狀。

    否則,請參閱上述「新自訂元件」。

如何成功使用核心元件

核心元件功能強大、靈活,而且易於使用和自訂。 遵循幾項主要指 南,可確保您使用核心元件的專案成功。

遷移至核心元件

任何新專案都應與核心元件一起實施。 但是,現有項目通常會廣泛實施Foundation Components。

對現有專案(例如重新品牌化或整體重構)的投入更大,通常會提供移轉至核心元件的機會。 為協助此項移轉,Adobe提供了許多移轉工具,以鼓勵採用核心元件和最新的AEM技術。

AEM現代化工 具套件,讓您輕鬆轉換:

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

有關這些工具使用的詳細資訊,請參見其文檔

注意

AEM最新工具是社群的努力,Adobe不支援或授權。

核心元件支援

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

和其他AEM產品功能一樣,一般規則是:元件會先宣佈不建議使用,並且是下列AEM版本最早移除的元件。 這可讓客戶在放棄支援之前,至少有一個版本週期移至新版本的元件。

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

有關支援元件定製的詳細資訊,請參閱自定義核心元件頁。

技術能力

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

有關其編寫功能和預先配置選項的詳細資訊,請參閱有關它們的編寫頁面

功能 核心元件 Foundation Component
邏輯實作 具有Sling Models註解的Java POJO JSP程式碼
標籤定義 HTML範本語言 (HTL)語法 JSP程式碼
XSS淨化 由HTL自動化 主要是手動
CSS類別命名 基於塊元素修飾詞(BEM)符號的標準命名約定(自2.0.0版起) 自訂配置
對話框定義 珊瑚3 Coral 2 + Classic UI
JSON輸出 Sling Models Exporter與Jackson序列化 預設Sling servlet
版本設定 針對模型和HTL
測試 單元測試+整合測試 整合測試
傳送 透過公開GitHub 透過快速入門
授權 Apache授權 Adobe專屬
貢獻 透過提取請求 不可能
協助工具 完全符合WCAG 2.0 AA標準 僅部分符合WCAG 2.0 AA標準

元件清單

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

核心元件 說明 已更換基礎元件
頁面 使用範本編輯器的互動式頁面 /libs/foundation/components/page /libs/wcm/foundation/components/page
階層連結 頁面階層導覽 /libs/foundation/components/breadcrumb
標題 H1-H6標題 /libs/foundation/components/title /libs/wcm/foundation/components/title
文字 豐富式文字 /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共用介面工具集 -
來自容器 自適應表單段落系統 /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 可讓內容作者使用影像、標題或豐富式文字輕鬆建立摘要,並連結至其他內容或其他動作 -
索引標籤 允許內容作者在多個標籤中組織頁面內容 -
傳送 可讓內容作者在旋轉的投影片轉盤中組織內容 /libs/foundation/components/carousel
內容片段 允許顯示內容片段 -
內容片段清單 允許顯示內容片段的清單 -
分隔符號 分隔頁面上的內容 -
折疊式面板 將內容面板組織成可折疊的收合式收合面板 -
容器 在容器中組織元件 -
按鈕 在頁面上建立按鈕 -
下載 新增可下載的資產至頁面 -
體驗片段 新增體驗片段至頁面 /libs/cq/experience-fragments/editor/components/experiencefragment
內嵌 將外部資源內嵌在頁面中 -
進度列 以視覺化方式呈現目標的進展 -
PDF 檢視器 在頁面上呈現PDF檔案 -

近期元件

如需即將推出的核心元件路線圖的概述,請參閱專案GitHub的Wiki

升級核心元件

版本化元件的一個優點是,它可將移轉至新AEM版本與移轉至新元件版本分開。 此外,如果有新的元件版本,則允許將每個元件個別移轉至新版本。

移轉至新AEM版本不會影響核心元件的運作方式,但是其版本也支援要移轉至的新AEM版本。 對核心元件的自訂也不應受到影響,只要它們不使用已過時或已移除的API

遷移到新版本的核心元件也不會影響元件的工作方式,但頁面作者可能會引入新功能,這可能需要模板編輯器進行一些配置,以防不需要預設行為。 不過,可能需要調整自定義,有關詳細資訊,請參閱自定義核心元件頁。

本頁內容