可以從其他內容片段內參考內容片段。 這可讓使用者建立具有片段之間關係的複雜資料模型。
在本章中,您將更新Adventure模型,加入對貢獻者模型的參考,使用 片段參考 欄位。 您也將學習如何修改GraphQL查詢以包含參考模型的欄位。
本教學課程分為多部分,假設已完成前幾部分所述的步驟。
在本章中,我們將學習如何:
更新冒險內容片段模型以新增參考至貢獻者模型。
開啟新瀏覽器並導覽至AEM。
從 AEM開始 功能表導覽至 工具 > 資產 > 內容片段模型 > WKND站點.
開啟 冒險 內容片段模型
在 資料類型,拖放 片段參考 欄位至主面板。
更新 屬性 針對此欄位,且包含下列項目:
fragmentreference
adventureContributor
/content/dam/wknd
屬性名稱 adventureContributor
現在可以用來參考貢獻者內容片段。
保存對模型的更改。
現在「冒險內容片段」模型已更新,我們可以編輯現有片段並參考貢獻者。 請注意,編輯內容片段模型 影響 從中建立的任何現有內容片段。
導覽至 資產 > 檔案 > WKND站點 > 英文 > 冒險 > 巴釐島衝浪營.
按一下 巴釐島衝浪營 內容片段,以開啟內容片段編輯器。
更新 Adventure Contributor 欄位,然後按一下資料夾圖示以選取貢獻者。
選取貢獻者片段的路徑
請注意,僅使用 貢獻者 可以選取模型。
儲存對片段的變更。
接下來,對探險項執行查詢,並新增所參考貢獻者模型的巢狀屬性。 我們將使用GraphiQL工具快速驗證查詢的語法。
導覽至AEM中的GraphiQL工具: http://localhost:4502/content/graphiql.html
輸入以下查詢:
{
adventureByPath(_path:"/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp") {
item {
_path
adventureTitle
adventureContributor {
fullName
occupation
pictureReference {
...on ImageRef {
_path
}
}
}
}
}
}
上述查詢是針對路徑上的單一Adventure。 此 adventureContributor
屬性會參考貢獻者模型,然後我們就可以從巢狀內容片段中請求屬性。
執行查詢,您應得到如下結果:
{
"data": {
"adventureByPath": {
"item": {
"_path": "/content/dam/wknd/en/adventures/bali-surf-camp/bali-surf-camp",
"adventureTitle": "Bali Surf Camp",
"adventureContributor": {
"fullName": "Stacey Roswells",
"occupation": "Photographer",
"pictureReference": {
"_path": "/content/dam/wknd/en/contributors/stacey-roswells.jpg"
}
}
}
}
}
}
嘗試其他查詢,例如 adventureList
和新增下方所參考內容片段的屬性 adventureContributor
.
接下來,更新React應用程式使用的查詢,加入新的貢獻者,並在冒險詳細資訊檢視中顯示貢獻者的相關資訊。
在IDE中開啟WKND GraphQL React應用程式。
開啟檔案 src/components/AdventureDetail.js
.
查找函式 adventureDetailQuery(_path)
. 此 adventureDetailQuery(..)
函式僅包含篩選GraphQL查詢,該查詢使用AEM <modelName>ByPath
查詢以其JCR路徑識別之單一內容片段的語法。
更新查詢以包含所參考貢獻者的相關資訊:
function adventureDetailQuery(_path) {
return `{
adventureByPath (_path: "${_path}") {
item {
_path
adventureTitle
adventureActivity
adventureType
adventurePrice
adventureTripLength
adventureGroupSize
adventureDifficulty
adventurePrice
adventurePrimaryImage {
... on ImageRef {
_path
mimeType
width
height
}
}
adventureDescription {
html
}
adventureItinerary {
html
}
adventureContributor {
fullName
occupation
pictureReference {
...on ImageRef {
_path
}
}
}
}
}
}
`;
}
透過此更新,其他關於 adventureContributor
, fullName
, occupation
,和 pictureReference
將包含在查詢中。
Inspect Contributor
元件內嵌於 AdventureDetail.js
檔案位置 function Contributor(...)
. 如果屬性存在,此元件將呈現貢獻者的名稱、職業和圖片。
此 Contributor
元件在 AdventureDetail(...)
return
方法:
function AdventureDetail(props) {
...
return (
...
<h2>Itinerary</h2>
<hr />
<div className="adventure-detail-itinerary"
dangerouslySetInnerHTML={{__html: adventureData.adventureItinerary.html}}></div>
{/* Contributor component is instaniated and
is passed the adventureContributor object from the GraphQL Query results */}
<Contributer {...adventureData.adventureContributor} />
...
)
}
儲存檔案的變更。
啟動React應用程式(如果尚未執行):
$ cd aem-guides-wknd-graphql/react-app
$ npm start
導覽至 http://localhost:3000 然後按一下參考貢獻者的「冒險」。 您現在應該會看到下方所列的貢獻者資訊 行程:
恭喜! 您已更新現有內容片段模型,以參考巢狀內容片段,使用 片段參考 欄位。 您還學習了如何修改GraphQL查詢以包括引用模型中的欄位。
在下一章中, 使用AEM發佈環境進行生產部署,了解AEM製作和發佈服務,以及無頭應用程式的建議部署模式。 您將更新現有應用程式,以使用環境變數根據目標環境動態更改GraphQL終結點。 您也將學習如何正確設定AEM以進行跨原始資源共用(CORS)。