裝飾雙螺旋

如何在 AEM 邊緣交付服務中添加頁面

如果您剛剛完成了遵循 Edge Delivery Services（以下稱為 EDS）官方入門教程，您可能想知道如何擴展您剛剛製作的網站。本文將向您展示如何建立新頁面並發佈到您的 AEM 網站。本文假設您已完成原始教程，並且在瀏覽器上安裝了 AEM Sidekick 擴展程序的運行中的網站。

首先，在 Google 雲端硬盤中創建一個新文件

當您創建新文件時，系統將提示您「創建和共享」，因為您已經在官方教程中與 [email protected] 共享文件夾。共享資料夾以及其中的文件，讓 EDS 能夠從 Google 雲端硬碟中查看內容並將其從您的網站提取到您的網站。點擊「創建和共享」並開始編輯您的新文檔。

在 EDS 專案中編輯文件時要注意的第一件事是文件的名稱。此名稱將用於創建頁面所在的 URL。

例如，您在本部落格的屏幕截圖中看到的項目的主要 URL 是 https://main--drews-franklin-demo--drew-cummings.hlx.live/。

如果我創建一個名為「新頁面」的新文檔，則該頁面發佈時將存在的 URL 是 https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page。值得注意的是，即使文檔名稱是大寫的，所有生成的 URL 都將為小寫。為了可讀性和導航的目的，請確保文檔名稱短且相關。

繼續將文檔標題更新為「新頁面」

現在，讓我們將標題添加到文檔的頂部。將文字設置為「標題 1」，然後寫下標題。

讓我們看看在網站上看起來是什麼樣的。繼續轉到生成的 URL，在我的情況下是 https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page，看看它是如何-

哦，不！如果你看到這個，不要驚慌。這就是默認 EDS 演示中「找不到頁面」錯誤的樣子。我們的網站目前無法找到我們的頁面，因為我們尚未預覽和發布它。導航返回文檔，然後單擊 AEM Sidekick 擴展名，這是下面屏幕截圖中最左側圖標

一會兒之後，您的幫手工具欄應該出現。您應該注意到左側有一個帶有紅點的「預覽」按鈕。這個紅點表示有新內容要安裝並推送到網站。繼續點擊該按鈕，然後查看它為您加載的頁面。

這是新頁面的預覽。一旦您發布它，您的頁面在「實時」網站上將像這樣。請注意的是，雖然內容尚未發佈，但它將不會顯示在實時頁面上，並且尚未發佈的頁面將不會出現在實時網站上。這使您可以嘗試內容並根據自己的喜好調整內容，而無需在網站的用戶看到內容，直到您準備好發佈內容。現在，讓我們將此頁面保持未發佈，然後返回 Google 文檔以添加更多內容。

由於目前存在，我們的頁面非常簡單。讓我們用圖像為它添加一些顏色。為了簡單起見，我們將使用樣品頁面中的藍色 DNA 圖片。

點擊預覽並查看它的樣子。

看起來很好！如果您不希望文本覆蓋在圖片的頂部，只需將圖片放在文檔中標題文本下方，而不是在其上方，您將獲得一個看起來像這樣的頁面。

文字疊加僅適用於文章中的第一個影像，僅當格式化如最初所示的格式化時，文字在影像下方是標題或標題 1 樣式的文字。

現在讓我們在本文中添加一些文本內容。我將使用 Lorem Ipsum，這是一種傳統在出版行業中使用的拉丁文本，用於嘗試文本佈局。Lorum Ipsum 允許我們查看阿拉伯字母內容在頁面上如何看起來，而不會因意外閱讀而分心。隨時改為添加任何您想要的文本內容。以下是它在我的 Google 文檔中的外觀：

這是我的預覽頁面上的外觀：

最後，讓我們看看一張圖像在與頁面內容一起放置時將如何看起來。我將在第一段落後添加示範頁面中的其中一張圖片，以演示它在下面的網站上如何看起來：

值得注意的是，EDS 從 Google 文檔中提取內容，並使用它來生成創建網站的 HTML 文件。因此，Google 文檔中的圖像大小與預覽/實時頁面上圖像的大小不相關。如果要調整網站上的圖像大小，則需要調整圖像的原生分辨率。

現在我們已經有一個我們很滿意向世界展示的頁面，我們還需要完成一個最後一步才能在發佈前完成。我想在元數據中繼資料中將此頁面的標題從「我的新頁面」更改為「演示頁面」，而不更改文章的標題。我還想向元數據添加描述，以使搜索引擎更容易找到該頁面。為此，我們需要添加一個中繼資料區塊。

添加元數據塊的最簡單方法是從演示主頁複製並粘貼中繼資料區塊，但如果您有興趣從頭開始製作一個，我將引導您完成該過程。

首先，在文檔末尾插入 2X3 表格。突出顯示第一行中的單元格，右鍵單擊，然後選擇「合併單元格」。

在頂行鍵入「中繼資料」，然後在接下來兩行的左側單元格中鍵入「標題」和「描述」。在「標題」單元格的右側鍵入您想要標題的內容，以及要在「描述」單元格的右側的描述。最終結果應該看起來像這樣：

立即預覽頁面。您會注意到頁面的內容根本沒有更改，但如果您查看 Chrome 中的選項卡，我們的新標題將會列出，而不是我們之前所提供的默認標題。

如果我們檢查網頁的 HTML 文件，我們可以看到我們的標題和描述都顯示為網頁的屬性

您已經準備好發布了！單擊顯示在預覽頁面上的 AEM Sidekick 擴展名左側的「發佈」按鈕，然後在您的網站上查看您的新實時網頁。

恭喜您將頁面添加到您的網站！如果您先前在發佈前訪問了此頁面的 URL，並且出現 404 頁面找不到錯誤，則發佈後仍會看到該錯誤。這可能是由於多種原因而發生，但除非您收到來自 AEM Sidekick 擴展程序的錯誤消息，否則您的內容實際上不太可能發生。只需等待一兩分鐘即可刷新頁面，您就會看到已發佈的頁面。

如果您喜歡本教程並想了解有關 AEM 產品的更多信息，請在這裡查看我們有關 AEM 是什麼的文章。