使用AEM頁面編輯器編輯頁面內容 edit-content

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：
製作

建立對象：

使用者

AEM頁面編輯器是製作頁面內容的強大工具。瞭解如何使用它來就地拖放內容及編輯內容。

概觀 overview

您可以在頁面編輯器中執行三個基本動作來編輯內容：

將元件拖放到頁面上以新增元件。
將新資產拖放到頁面上以新增資產。
就地編輯頁面中已存在的元件。

AEM頁面編輯器除了可存取更進階的功能外，還提供直覺式UI來執行這些工作。

此外，編輯器可讓您組織頁面上的現有內容，方法是允許您

移動元件
編輯元件配置
編輯元件繼承

新增元件 adding-components

您可以從側面板🔗的元件瀏覽器中選取新元件，並將它們拖放到元件預留位置中，藉此將元件拖放到頁面上。

元件預留位置 component-placeholder

元件預留位置是一個指示器，可顯示放置元件時元件的放置位置。它有兩個外觀。

將新元件新增至頁面時（從元件瀏覽器拖曳），將顯示為灰色方塊，內含您放置之元件的詳細資訊。

將新元件新增至頁面時的
當移動現有元件時，它將顯示為藍色正方形。

在頁面上移動現有元件時的預留位置

在這兩種情況下，所選的目標都會以藍色外框顯示在您正在拖曳的元件下方。釋放元件時元件將放置到的目標。

從元件瀏覽器新增元件 adding-a-component-from-the-components-browser

您可以使用元件瀏覽器來新增元件。元件預留位置會顯示您放置元件的位置。

確定頁面編輯器處於編輯模式。
開啟元件瀏覽器。
將必要的元件拖曳到必要的位置並釋放。
編輯新放置的元件。

NOTE

在行動裝置上，元件瀏覽器會填滿整個畫面。開始拖曳元件後，瀏覽器將關閉並再次顯示頁面，以便您放置元件。

從段落系統新增元件 adding-a-component-from-the-paragraph-system

您可以使用段落系統的 將元件拖曳到這裡 預留位置來新增元件：

確定頁面編輯器處於編輯模式。
有兩種方式可以從段落系統選取和新增元件：
- 從現有元件的工具列或 拖曳元件到此處 方塊中選取 插入元件 選項(+)。
- 如果您使用案頭裝置，可以按兩下 將元件拖曳到這裡 方塊。
插入新元件 對話方塊開啟，讓您選取所需的元件。點選或按一下您要新增的元件。
- 使用搜尋篩選器來尋找您的元件。
- 使用元件名稱旁的資訊圖示來瞭解有關元件的更多資訊。
選取的元件會新增至您選取的目標。視需要編輯元件。

新增資產 adding-asset

您也可以從資產瀏覽器拖曳資產，將新元件新增至頁面。這會自動建立適當型別的元件（並包含資產）。

您可針對您的安裝設定此行為。如需詳細資訊，請參閱檔案元件參考指南。

若要拖曳上述任一資產型別來建立元件：

確定您的頁面處於編輯模式。
開啟資產瀏覽器。
將所需的資產拖曳至所需的位置。元件預留位置會顯示元件的放置位置，而目標會顯示插入後的位置。
將資產發佈至目標。適合資產型別的元件會在包含所選資產的所需位置建立。
如有必要，請編輯元件。

NOTE

在行動裝置上，資產瀏覽器會填滿整個畫面。開始拖曳資產後，瀏覽器將關閉並再次顯示頁面，以便您放置資產。

如果您在瀏覽資產時發現需要對資產進行快速變更，可以按一下資產名稱旁的編輯圖示，直接從瀏覽器啟動資產編輯器。

就地編輯元件 edit-in-place

選取元件會開啟元件工具列。這可讓您存取可在元件上執行的各種動作。

元件工具列

元件工具列中的可用動作適用於所選的元件。根據您選取的元件，您可能會看到更多或更少的資訊，此處也可能沒有說明這些資訊。

編輯可讓您修改元件的內容，通常是就地修改。其行為取決於元件。
設定可讓您變更元件與其內容不直接相關的部分引數，通常是在對話方塊中。其行為取決於元件。
複製會將元件複製到剪貼簿，以貼到其他位置。原始元件保持不變。
剪下會將元件複製到剪貼簿。原始元件即被移除。
刪除會從含有您確認的頁面中刪除元件。
插入元件 開啟對話方塊以新增元件。
貼上將元件從剪貼簿貼到頁面。是否保留原稿，取決於您是使用 Copy 還是 Cut。
- 您可以貼至相同頁面或不同頁面。
- 如果您在剪下/復製作業前將頁面貼到已開啟的其他頁面，則必須重新整理頁面以檢視貼上的內容。
- 貼上的專案會貼在您選取貼上動作的專案上方。
- 唯有剪貼簿上有內容時，才會顯示「貼上」動作。
群組可讓您一次選取多個元件。透過 Control+Click 或 Command+Click，桌上型電腦裝置也能達到相同效果。
Parent 選取所選元件的父元件。
配置可讓您修改所選元件的配置。
- 這僅適用於選取的元件，而且不會啟動整個頁面的配置模式。
轉換成體驗片段變數 可讓您從選取的元件建立體驗片段，或將其新增至現有的體驗片段。

元件編輯對話方塊 component-edit-dialog

某些元件提供就地可用以外的其他編輯選項。您可以開啟元件的編輯對話方塊，開啟元件工具列🔗的編輯（鉛筆）圖示以存取其他組態選項。

確切的編輯選項取決於元件。對於某些元件某些動作將只能在全熒幕模式下使用。例如：

文字元件
影像元件

以全熒幕模式編輯元件 edit-content-full-screen-mode

許多元件都提供全熒幕模式供您編輯，您可以使用此按鈕存取這些元件。

全熒幕編輯可顯示比就地編輯器（例如影像元件）更多的編輯選項。

全熒幕中的影像元件

使用 最小化 按鈕以存在全熒幕模式。

移動元件 moving-components

若要移動元件：

選取要以點選並按住或點選並按住來移動的元件。
將元件拖曳至新位置。
- 頁面編輯器會指出具有預留位置的元件位置，以及段落可以與目標一起放置的位置。
將其拖曳至所需位置。

TIP

您也可以使用剪下並貼上來移動元件。

編輯元件版面 editing-component-layout

您可以選取元件的 Layout (配置) 動作，以變更元件的配置，並節省時間，而不需離開編輯模式，而不需重複從編輯切換到配置模式來調整元件。

當處於網站主控台的編輯模式時，請選取元件以顯示元件的工具列。
選取配置動作以調整元件的配置。
選取「配置」動作後，您就可以修改元件的配置，就像在配置模式中一樣。
- 元件顯示的調整大小控點。
- 模擬器工具列會顯示在畫面頂端。
- 元件工具列上會顯示「配置」動作，而非標準編輯動作。
進行必要的版面配置變更後，點選或按一下元件動作功能表中的關閉按鈕以停止修改元件的版面，而元件的工具列會回到其正常的編輯狀態。