如何在 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 是什麼的文章。
關於作者

播客劇集

如何選擇數位體驗平台
阿伯里數碼現在有技術 AEM 播客!Raf & Tad 深入了解如何決定您擁有合適的數字體驗平台

自主管 Aem 還是一件事嗎?
是否仍然可能(或建議)在 Adobe 之外託管 Adobe 體驗管理員?塔德·里夫斯和喬伊·史密斯參加了它!

Adobe 高峰會 2023 — 新版本 & 會議回顧
塔德·里維斯和漢克·托布在 2023 年 Adobe 峰會上講述他們的經驗。我們會審閱高峰會的公告等!