內容模式
- 適用對象：
- Experience Manager as a Cloud Service
- 主題：
- 內容片段
建立對象：
- 中繼
- 開發人員
歡迎使用有關Adobe Experience Manager (AEM)中的內容片段和GraphQL端點的教學課程章節。 我們將介紹如何運用內容片段、建立片段模型，以及在AEM中使用GraphQL端點。
內容片段提供結構化方法來管理跨管道的內容，提供彈性和可重複使用性。 在AEM中啟用內容片段可建立模組化內容，加強一致性和適應性。
首先，我們將引導您啟用AEM中的內容片段，涵蓋無縫整合的必要設定和設定。
接下來，我們將介紹如何建立片段模型，這些模型會定義結構和屬性。 瞭解如何根據您的內容需求設計模型，並有效管理模型。
接著，我們會示範如何從模型建立內容片段，提供製作和發佈的逐步指引。
此外，我們也會探索如何定義AEM GraphQL端點。 GraphQL會有效率地從AEM擷取資料，我們將設定並設定端點以公開所需的資料。 持久查詢將最佳化效能和快取。
在本教學課程中，我們將提供說明、程式碼範例和實用秘訣。 到最後，您將具備啟用內容片段、建立片段模型、產生片段，以及定義AEM GraphQL端點和持續查詢的技能。 讓我們開始吧！
內容感知設定
-
導覽至 工具>設定瀏覽器 以建立Headless體驗的設定。
提供 title 和 name，並檢查 GraphQL持續查詢 和 內容片段模型。
內容片段模型
-
導覽至 工具>內容片段模型，然後選取具有步驟1中所建立組態名稱的資料夾。
-
在資料夾中，選取 建立 並命名模型 Teaser。 將下列資料型別新增至 Teaser 模型。
資料型別名稱必填選項內容參考資產是您可視需要新增預設影像。 例如： /content/dam/wknd-headless/assets/AdobeStock_307513975.mp4單行文字標題是單行文字前置標題否多行文字描述否確定預設型別為RTF文字列舉樣式是呈現為下拉式清單。 選項包括Hero ->Hero和Featured ->精選
-
在資料夾內，建立名為 選件 的第二個模型。 按一下「建立」並為模型命名「選件」，然後新增下列資料型別：
資料型別名稱必填選項內容參考資產是新增預設影像。 例如：/content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg多行文字描述否多行文字文章否
-
在資料夾內，建立名為 影像清單 的第三個模型。 按一下「建立」並將模型命名為「影像清單」，然後新增以下資料型別：
資料型別名稱必填選項片段參考清單項目是呈現為多個欄位。 允許的內容片段模型為選件。
內容片段
-
現在導覽至Assets並建立新網站的資料夾。 按一下「建立」並為資料夾命名。
-
建立資料夾後，請選取資料夾並開啟其 屬性。
-
在資料夾的 雲端設定 索引標籤中，選取先前建立的設定🔗。
按一下新資料夾並建立Teaser。 按一下 建立 和 內容片段，然後選取 Teaser 模型。 將模型命名為 Hero，然後按一下 建立。
名稱備註資產保留為預設值，或選擇其他資產（視訊或影像）標題Explore. Discover. Live.前置標題Join use for your next adventure.描述留空樣式Hero
GraphQL 端點
-
導覽至 工具> GraphQL
-
按一下[建立]____，並為新端點指定名稱並選擇新建立的組態。
GraphQL 持續性查詢
-
讓我們測試新端點。 導覽至 工具> GraphQL查詢編輯器，然後在視窗右上方的下拉式清單中選擇我們的端點。
-
在查詢編輯器中，建立一些不同的查詢。
{ teaserList { items { title } } }您應該取得包含在以上建立的單一片段的清單。
針對此練習，建立AEM Headless應用程式使用的完整查詢。 建立依路徑傳回單一Teaser的查詢。 在查詢編輯器中，輸入以下查詢：
query TeaserByPath($path: String!) { component: teaserByPath(_path: $path) { item { __typename _path _metadata { stringMetadata { name value } } title preTitle style asset { ... on MultimediaRef { __typename _authorUrl _publishUrl format } ... on ImageRef { __typename _authorUrl _publishUrl mimeType width height } } description { html plaintext } } } }在底部的 查詢變數 輸入中，輸入：
{ "path": "/content/dam/pure-headless/hero" }
NOTE您可能需要根據資料夾和片段名稱調整查詢變數path。執行查詢以接收先前建立的內容片段的結果。
-
按一下[儲存]以保留（儲存）查詢，並命名查詢 Teaser。 ____這可讓我們在應用程式中依名稱參照查詢。
後續步驟
恭喜！您已成功設定AEM as a Cloud Service以允許建立內容片段和GraphQL端點。 您也可以建立內容片段模型和內容片段，並定義GraphQL端點與持續查詢。 您現在已準備好進入下一個教學課程章節，您將瞭解如何建立AEM Headless React應用程式，該應用程式會使用您在本章中建立的內容片段和GraphQL端點。