文件AEM核心元件指南

使用核心元件編寫

最後更新: 2025年5月5日
  • 主題:
  • 核心組件

建立對象:

  • 開發人員
  • 管理員
  • 使用者

在Adobe Experience Manager中,元件是構成所編寫頁面內容的結構元素。

核心元件提供有彈性且功能豐富的撰寫功能。 WKND參考網站及其說明如何使用核心元件來實作豐富的網站體驗。

若要體驗核心元件並檢視其設定選項範例以及HTML和JSON輸出,請造訪元件資料庫。

如需使用AEM專案原型在AEM專案上實作核心元件的更深入、開發人員導向的簡介,請檢視WKND教學課程。

注意
開發團隊必須先依照作者的環境整合核心元件,才能將其提供給您。整合後,可透過範本編輯器使用及預先設定。
注意
核心元件需要AEM 6.4或更新版本,而且需要使用可編輯的範本。 它們無法搭配傳統UI使用,也無法搭配靜態範本使用。

使用核心元件編寫

身為作者,您會注意到核心元件的幾項優點,包括:

  • 簡單易用,並與頁面編輯器妥善整合

  • 功能豐富的功能,可適應WKND參考網站以及元件庫中說明的許多使用案例

  • 可預先設定,以透過範本編輯器定義頁面作者可用的功能

  • 建置於協助工具准則

  • 建置以支援回應式配置

  • 建置以支援輕鬆本地化

在編輯頁面時,元件可在頁面編輯器側面板的​ 元件 ​索引標籤上使用。

元件會根據稱為元件群組的類別分組,以輕鬆組織和篩選元件。 元件群組名稱會與元件一起顯示在元件瀏覽器中,也可以依群組篩選以輕鬆找到正確的元件。

NOTE
核心元件預設為隱藏群組的一部分,且不會顯示在元件瀏覽器中。
將所需元件新增至可見群組或自訂這些元件,以供作者使用。

預先設定核心元件

開發人員必須負責設定基礎元件。 不過,使用核心元件時,範本作者現在可以透過範本編輯器設定許多功能。

例如,如果影像元件不允許從檔案系統上傳影像,或如果文字元件僅允許特定段落格式,只要按一下即可啟用或停用這些功能。

如需詳細資訊,請參閱建立頁面範本。

編輯和設計對話方塊

由於範本作者可以預先設定核心元件,以定義範本中允許哪些選項,然後由頁面作者進一步設定以定義實際頁面內容,因此每個元件可以在兩個不同的對話方塊中有選項。

說明
控制內容
範例
編輯對話方塊
頁面作者 ​在對置入的元件進行正常頁面編輯時可以修改的選項
元件顯示的內容以及最終顯示在頁面上的方式。
格式化內容文字,旋轉頁面上的影像
設計對話方塊
設定頁面範本時,範本作者 ​可以修改的選項。
頁面作者在編輯元件時可以使用的選項
哪些文字格式選項可用,哪些影像就地選項可用

元件樣式

大部分核心元件的樣式可使用AEM樣式系統定義。

  • 範本作者可以在特定元件的「設計」對話方塊中,定義哪些樣式可供該元件使用。
  • 然後,內容作者可以在新增元件和建立內容時,選擇要套用的樣式。

如需詳細資訊,請參閱樣式系統檔案。

開發人員資源

如需有關核心元件的技術資訊,請參閱開發核心元件開發人員檔案。

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