使用核心元件製作

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

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

若要體驗核心元件並查看其設定選項的範例以及HTML和JSON輸出,請造訪元件程式庫

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

注意

開發團隊必須先依照作者的環境整合核心元件,才能將其提供給您。整合後,可透過範本編輯器使用並預先設定。

注意

核心元件需要AEM 6.4或更高版本,並需要使用可編輯的範本。 無法搭配傳統UI或靜態範本使用。

使用核心元件編寫

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

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

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

注意

核心元件預設為隱藏群組的一部分,且在元件瀏覽器中不可見。

將所需元件新增至可見群組,或自訂供作者使用。

預先配置核心元件

配置基礎元件是開發人員的工作。 不過,使用核心元件時,範本作者現在可以透過範本編輯器設定許多功能。

例如,如果影像元件不允許從檔案系統上傳影像,或者文本元件僅允許某些段落格式,則只需按一下即可啟用或禁用這些功能。

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

編輯和設計對話框

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

說明 控制項 範例
編輯對話方塊 在對放置的元件進行一般頁面編輯期間,頁面作者​可修改的選項 元件顯示的內容,以及它最終如何出現在頁面上。 設定內容文字的格式,在頁面上旋轉影像
設計對話方塊 設定頁面範本時,範本作者​可修改的選項。 編輯元件時頁面作者有哪些可用選項 哪些文本格式選項可用,哪些影像就地選項可用

元件樣式

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

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

有關詳細資訊,請參閱樣式系統文檔。

開發人員資源

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

本頁內容