製作和發佈簡介 author-content-publish

瞭解使用者將如何更新網站內容很重要。 在本章中,我們將採用​ 內容作者 ​的角色,並對上一章產生的網站進行一些編輯更新。 本章結束時,我們將發佈變更,以瞭解如何更新即時網站。

先決條件 prerequisites

此教學課程包含多個部分,並假設已完成建立網站章節中概述的步驟。

目標 objective

  1. 瞭解AEM Sites中​ 頁面 ​和​ 元件 ​的概念。
  2. 瞭解如何更新網站內容。
  3. 瞭解如何將變更發佈至已上線的網站。

建立新頁面 create-page

網站通常會分成多個頁面,以形成多頁體驗。 AEM會以相同的方式建構內容。 接著,建立網站的新頁面。

  1. 登入上一章使用的AEM 作者 ​服務。

  2. 從AEM開始畫面按一下​ 網站 > WKND網站 > 英文 > 文章

  3. 按一下右上角的​ 建立 > 頁面

    建立頁面

    這會顯示​ 建立頁面 ​精靈。

  4. 選擇​ 文章頁面 ​範本並按一下​ 下一步

    AEM中的頁面是根據頁面範本建立的。 在頁面範本章節中詳細探索頁面範本。

  5. 在「屬性」下輸入「Hello World」的​ 標題

  6. 將​ 名稱 ​設為hello-world並按一下​ 建立

    初始頁面屬性

  7. 在對話方塊快顯視窗中,按一下​ 開啟 ​以開啟新建立的頁面。

編寫元件 author-component

AEM元件可視為網頁的小型模組建置區塊。 將UI分成邏輯區塊或元件,可讓管理更容易。 若要重複使用元件,必須可設定元件。 這是透過作者對話方塊完成。

AEM提供一組核心元件,這些元件已生產就緒,可供使用。 核心元件 ​的範圍包括基本元素(例如TextImage)到更複雜的UI元素(例如輪播)。

接下來,使用AEM頁面編輯器編寫一些元件。

  1. 導覽至上一個練習建立的​ Hello World ​頁面。

  2. 確定您處於​ 編輯 ​模式,並在左側邊欄按一下​ 元件 ​圖示。

    頁面編輯器側欄

    這樣會開啟元件程式庫,並列出可用於頁面上的可用元件。

  3. 向下捲動並將​ 拖放 文字(v2) ​元件至頁面的主要可編輯區域。

    拖放文字元件

  4. 按一下​ 文字 ​元件以反白顯示,然後按一下​ 扳手 ​圖示 扳手圖示 以開啟元件的對話方塊。 輸入一些文字並將變更儲存到對話方塊。

    RTF元件

    Text ​元件現在應該在頁面上顯示RTF文字。

  5. 重複上述步驟,但將​ Image(v2) ​元件的執行個體拖曳到頁面上除外。 開啟​ 影像 ​元件的對話方塊。

  6. 在左側邊欄中,按一下​ Assets ​圖示 資產圖示 以切換至​ 資產尋找器

  7. 拖放 ​影像到元件的對話方塊中,然後按一下​ 完成 ​以儲存變更。

    將資產新增至對話方塊

  8. 請注意,頁面上有已修正的元件,例如​ TitleNavigationSearch。 這些區域已設定為頁面範本的一部分,無法在個別頁面上修改。 這會在下一章中進一步探討。

您可以隨意嘗試其他元件。 如需各個核心元件的相關檔案,請參閱此處。 有關頁面編寫的詳細影片系列可在此找到

Publish更新 publish-updates

AEM環境在​ 作者服務 ​和​ Publish服務 ​之間分割。 在本章中,我們已對​ 作者服務 ​上的網站進行數次修改。 為了讓網站訪客檢視變更,我們需要將它們發佈到​ Publish服務

高階圖表

從作者到Publish的高層級內容流量

1。 ​內容作者更新網站內容。 您可以預覽、稽核及核准更新,以即時推送。

2。 ​內容已發佈。 可隨選執行或排程在未來日期發佈。

3。 ​個網站訪客將看到變更反映在Publish服務上。

Publish變更

接下來,讓我們發佈變更。

  1. 從AEM開始畫面導覽至​ 網站 ​並選取​ WKND網站

  2. 按一下功能表列中的​ 管理出版物

    管理出版物

    由於這是全新的網站,因此我們想發佈所有頁面,而且可以使用「管理出版物」精靈來定義需要發佈的確切內容。

  3. 在​ 選項 ​底下,將預設設定保留為​ Publish,並排程為​ 立即。 按一下「下一步」。

  4. 在​ 領域 ​下,選取​ WKND網站,然後按一下​ 包含子系設定。 在對話方塊中,核取​ 包含子項。 取消勾選其餘方塊,以確保發佈整個網站。

    更新發佈範圍

  5. 按一下​ 已發佈的參考 ​按鈕。 在對話方塊中,確認已核取所有專案。 這將包括​ 標準網站範本 ​和網站範本產生的數個設定。 按一下​ 完成 ​以進行更新。

    Publish參考

  6. 最後,核取​ WKND網站 ​旁的方塊,然後按一下右上角的​ 下一步

  7. 在​ 工作流程 ​步驟中,輸入​ 工作流程標題。 這可以是任何文字,並可用於後續的稽核軌跡中。 輸入[初始發佈]並按一下​ Publish

工作流程步驟初始發佈

檢視發佈的內容 publish

接下來,導覽至Publish服務以檢視變更。

  1. 取得Publish服務URL的簡單方法是復製作者URL並將author字取代為publish。 例如:

    • 作者URL - https://author-pYYYY-eXXXX.adobeaemcloud.com/
    • Publish URL - https://publish-pYYYY-eXXXX.adobeaemcloud.com/
  2. /content/wknd.html新增至Publish URL,讓最終URL看起來像是: https://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd.html

    note note
    NOTE
    變更wknd.html以符合您的網站名稱(如果您在網站建立期間提供唯一名稱)。
  3. 導覽至Publish URL時,您應該會看到網站,沒有任何AEM編寫功能。

    已發佈的網站

  4. 使用​ 導覽 ​功能表按一下​ 文章 > Hello World,以導覽至先前建立的Hello World頁面。

  5. 返回​ AEM作者服務,並在頁面編輯器中進行一些額外的內容變更。

  6. 按一下​ 頁面屬性 ​圖示> Publish頁面,直接從頁面編輯器中Publish這些變更

    直接發佈

  7. 返回​ AEM Publish服務 ​以檢視變更。 您很可能不會​ 立即 ​看到更新。 這是因為​ AEM Publish服務 ​包含透過Apache網頁伺服器和CDN🔗的快取。 根據預設,快取HTML內容約5分鐘。

  8. 若要略過快取以進行測試/偵錯,只需新增查詢引數,例如?nocache=true。 URL看起來會像https://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd/en/article/hello-world.html?nocache=true。 有關可用快取策略與設定的詳細資訊可在此找到

  9. 您也可以在Cloud Manager中找到Publish服務的URL。 瀏覽至​ Cloud Manager方案 > 環境 > 環境

    檢視Publish服務

    在​ 環境區段 ​下方,您可以找到​ 作者 ​和​ Publish ​服務的連結。

恭喜! congratulations

恭喜,您剛才已撰寫並發佈變更至您的AEM網站!

後續步驟 next-steps

在真實世界的實作中,使用模型和UI設計規劃網站通常會在建立網站之前進行。 瞭解Adobe XD UI Kit如何透過Adobe XD🔗在UI規劃中設計和加速Adobe Experience Manager Sites實施。

想要繼續探索AEM Sites功能嗎? 您可以直接跳到頁面範本上的章節,瞭解頁面範本與頁面之間的關係。

recommendation-more-help
b2a561c1-47c0-4182-b8c1-757a197484f9