使用核心元件製作

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

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

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

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

注意

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

注意

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

使用核心元件編寫

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

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

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

注意

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

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

預先配置核心元件

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

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

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

編輯和設計對話框

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

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

元件樣式

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

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

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

開發人員資源

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

本頁內容