使用片段參考的進階資料模型

可以從其他內容片段內參考內容片段。 這可讓使用者建立具有片段之間關係的複雜資料模型。

在本章中,您將更新Adventure模型,加入對貢獻者模型的參考,使用 片段參考 欄位。 您也將學習如何修改GraphQL查詢以包含參考模型的欄位。

必備條件

本教學課程分為多部分,假設已完成前幾部分所述的步驟。

目標

在本章中,我們將學習如何:

  • 更新內容片段模型以使用片段參考欄位
  • 建立GraphQL查詢,該查詢會從引用的模型返回欄位

新增片段參考

更新冒險內容片段模型以新增參考至貢獻者模型。

  1. 開啟新瀏覽器並導覽至AEM。

  2. AEM開始 功能表導覽至 工具 > 資產 > 內容片段模型 > WKND站點.

  3. 開啟 冒險 內容片段模型

    開啟冒險內容片段模型

  4. 資料類型,拖放 片段參考 欄位至主面板。

    新增片段參考欄位

  5. 更新 屬性 針對此欄位,且包含下列項目:

    • 呈現為 - fragmentreference
    • 欄位標籤 — Adventure Contributor
    • 屬性名稱 - adventureContributor
    • 模型類型 — 選取 貢獻者 模型
    • 根路徑 - /content/dam/wknd

    片段參考屬性

    屬性名稱 adventureContributor 現在可以用來參考貢獻者內容片段。

  6. 保存對模型的更改。

為冒險指派貢獻者

現在「冒險內容片段」模型已更新,我們可以編輯現有片段並參考貢獻者。 請注意,編輯內容片段模型 影響 從中建立的任何現有內容片段。

  1. 導覽至 資產 > 檔案 > WKND站點 > 英文 > 冒險 > 巴釐島衝浪營.

    巴釐島衝浪營資料夾

  2. 按一下 巴釐島衝浪營 內容片段,以開啟內容片段編輯器。

  3. 更新 Adventure Contributor 欄位,然後按一下資料夾圖示以選取貢獻者。

    選擇Stacey Roswells作為貢獻者

    選取貢獻者片段的路徑

    貢獻者的填入路徑

    請注意,僅使用 貢獻者 可以選取模型。

  4. 儲存對片段的變更。

  5. 重複上述步驟,將貢獻者指派給 約塞米蒂背包科羅拉多攀岩

使用GraphiQL查詢巢狀內容片段

接下來,對探險項執行查詢,並新增所參考貢獻者模型的巢狀屬性。 我們將使用GraphiQL工具快速驗證查詢的語法。

  1. 導覽至AEM中的GraphiQL工具: http://localhost:4502/content/graphiql.html

  2. 輸入以下查詢:

    {
      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 屬性會參考貢獻者模型,然後我們就可以從巢狀內容片段中請求屬性。

  3. 執行查詢,您應得到如下結果:

    {
      "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"
                    }
                }
            }
         }
      }
    }
    
  4. 嘗試其他查詢,例如 adventureList 和新增下方所參考內容片段的屬性 adventureContributor.

更新React應用程式以顯示貢獻者內容

接下來,更新React應用程式使用的查詢,加入新的貢獻者,並在冒險詳細資訊檢視中顯示貢獻者的相關資訊。

  1. 在IDE中開啟WKND GraphQL React應用程式。

  2. 開啟檔案 src/components/AdventureDetail.js.

    冒險詳細資訊元件IDE

  3. 查找函式 adventureDetailQuery(_path). 此 adventureDetailQuery(..) 函式僅包含篩選GraphQL查詢,該查詢使用AEM <modelName>ByPath 查詢以其JCR路徑識別之單一內容片段的語法。

  4. 更新查詢以包含所參考貢獻者的相關資訊:

    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 將包含在查詢中。

  5. 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} />
            ...
        )
    }
    
  6. 儲存檔案的變更。

  7. 啟動React應用程式(如果尚未執行):

    $ cd aem-guides-wknd-graphql/react-app
    $ npm start
    
  8. 導覽至 http://localhost:3000 然後按一下參考貢獻者的「冒險」。 您現在應該會看到下方所列的貢獻者資訊 行程:

    應用程式中新增的貢獻者

恭喜!

恭喜! 您已更新現有內容片段模型,以參考巢狀內容片段,使用 片段參考 欄位。 您還學習了如何修改GraphQL查詢以包括引用模型中的欄位。

後續步驟

在下一章中, 使用AEM發佈環境進行生產部署,了解AEM製作和發佈服務,以及無頭應用程式的建議部署模式。 您將更新現有應用程式,以使用環境變數根據目標環境動態更改GraphQL終結點。 您也將學習如何正確設定AEM以進行跨原始資源共用(CORS)。

本頁內容