製作和發佈簡介 author-content-publish
瞭解使用者將如何更新網站內容很重要。 在本章中,我們將採用 內容作者 的角色,並對上一章產生的網站進行一些編輯更新。 本章結束時,我們將發佈變更,以瞭解如何更新即時網站。
先決條件 prerequisites
此教學課程包含多個部分,並假設已完成建立網站章節中概述的步驟。
目標 objective
- 瞭解AEM Sites中 頁面 和 元件 的概念。
- 瞭解如何更新網站內容。
- 瞭解如何將變更發佈至已上線的網站。
建立新頁面 create-page
網站通常會分成多個頁面,以形成多頁體驗。 AEM會以相同的方式建構內容。 接著,建立網站的新頁面。
-
登入上一章使用的AEM 作者 服務。
-
從AEM開始畫面按一下 網站 > WKND網站 > 英文 > 文章
-
按一下右上角的 建立 > 頁面。
這會顯示 建立頁面 精靈。
-
選擇 文章頁面 範本並按一下 下一步。
AEM中的頁面是根據頁面範本建立的。 在頁面範本章節中詳細探索頁面範本。
-
在「屬性」下輸入「Hello World」的 標題。
-
將 名稱 設為
hello-world
並按一下 建立。 -
在對話方塊快顯視窗中,按一下 開啟 以開啟新建立的頁面。
編寫元件 author-component
AEM元件可視為網頁的小型模組建置區塊。 將UI分成邏輯區塊或元件,可讓管理更容易。 若要重複使用元件,必須可設定元件。 這是透過作者對話方塊完成。
AEM提供一組核心元件,這些元件已生產就緒,可供使用。 核心元件 的範圍包括基本元素(例如Text和Image)到更複雜的UI元素(例如輪播)。
接下來,使用AEM頁面編輯器編寫一些元件。
-
導覽至上一個練習建立的 Hello World 頁面。
-
確定您處於 編輯 模式,並在左側邊欄按一下 元件 圖示。
這樣會開啟元件程式庫,並列出可用於頁面上的可用元件。
-
向下捲動並將 拖放 文字(v2) 元件至頁面的主要可編輯區域。
-
按一下 文字 元件以反白顯示,然後按一下 扳手 圖示
Text 元件現在應該在頁面上顯示RTF文字。
-
重複上述步驟,但將 Image(v2) 元件的執行個體拖曳到頁面上除外。 開啟 影像 元件的對話方塊。
-
在左側邊欄中,按一下 Assets 圖示
-
拖放 影像到元件的對話方塊中,然後按一下 完成 以儲存變更。
-
請注意,頁面上有已修正的元件,例如 Title、Navigation、Search。 這些區域已設定為頁面範本的一部分,無法在個別頁面上修改。 這會在下一章中進一步探討。
您可以隨意嘗試其他元件。 如需各個核心元件的相關檔案,請參閱此處。 有關頁面編寫的詳細影片系列可在此找到。
Publish更新 publish-updates
AEM環境在 作者服務 和 Publish服務 之間分割。 在本章中,我們已對 作者服務 上的網站進行數次修改。 為了讓網站訪客檢視變更,我們需要將它們發佈到 Publish服務。
從作者到Publish的高層級內容流量
1。 內容作者更新網站內容。 您可以預覽、稽核及核准更新,以即時推送。
2。 內容已發佈。 可隨選執行或排程在未來日期發佈。
3。 個網站訪客將看到變更反映在Publish服務上。
Publish變更
接下來,讓我們發佈變更。
-
從AEM開始畫面導覽至 網站 並選取 WKND網站。
-
按一下功能表列中的 管理出版物。
由於這是全新的網站,因此我們想發佈所有頁面,而且可以使用「管理出版物」精靈來定義需要發佈的確切內容。
-
在 選項 底下,將預設設定保留為 Publish,並排程為 立即。 按一下「下一步」。
-
在 領域 下,選取 WKND網站,然後按一下 包含子系設定。 在對話方塊中,核取 包含子項。 取消勾選其餘方塊,以確保發佈整個網站。
-
按一下 已發佈的參考 按鈕。 在對話方塊中,確認已核取所有專案。 這將包括 標準網站範本 和網站範本產生的數個設定。 按一下 完成 以進行更新。
-
最後,核取 WKND網站 旁的方塊,然後按一下右上角的 下一步。
-
在 工作流程 步驟中,輸入 工作流程標題。 這可以是任何文字,並可用於後續的稽核軌跡中。 輸入[初始發佈]並按一下 Publish。
檢視發佈的內容 publish
接下來,導覽至Publish服務以檢視變更。
-
取得Publish服務URL的簡單方法是復製作者URL並將
author
字取代為publish
。 例如:- 作者URL -
https://author-pYYYY-eXXXX.adobeaemcloud.com/
- Publish URL -
https://publish-pYYYY-eXXXX.adobeaemcloud.com/
- 作者URL -
-
將
/content/wknd.html
新增至Publish URL,讓最終URL看起來像是:https://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd.html
。note note NOTE 變更 wknd.html
以符合您的網站名稱(如果您在網站建立期間提供唯一名稱)。 -
導覽至Publish URL時,您應該會看到網站,沒有任何AEM編寫功能。
-
使用 導覽 功能表按一下 文章 > Hello World,以導覽至先前建立的Hello World頁面。
-
返回 AEM作者服務,並在頁面編輯器中進行一些額外的內容變更。
-
按一下 頁面屬性 圖示> Publish頁面,直接從頁面編輯器中Publish這些變更
-
返回 AEM Publish服務 以檢視變更。 您很可能不會 立即 看到更新。 這是因為 AEM Publish服務 包含透過Apache網頁伺服器和CDN🔗的快取。 根據預設,快取HTML內容約5分鐘。
-
若要略過快取以進行測試/偵錯,只需新增查詢引數,例如
?nocache=true
。 URL看起來會像https://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd/en/article/hello-world.html?nocache=true
。 有關可用快取策略與設定的詳細資訊可在此找到。 -
您也可以在Cloud Manager中找到Publish服務的URL。 瀏覽至 Cloud Manager方案 > 環境 > 環境。
在 環境區段 下方,您可以找到 作者 和 Publish 服務的連結。
恭喜! congratulations
恭喜,您剛才已撰寫並發佈變更至您的AEM網站!
後續步驟 next-steps
在真實世界的實作中,使用模型和UI設計規劃網站通常會在建立網站之前進行。 瞭解Adobe XD UI Kit如何透過Adobe XD🔗在UI規劃中設計和加速Adobe Experience Manager Sites實施。
想要繼續探索AEM Sites功能嗎? 您可以直接跳到頁面範本上的章節,瞭解頁面範本與頁面之間的關係。