使用片段參照建立進階資料模型

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

在本章中，您將使用​片段參考​欄位更新「冒險」模型，以包含對「投稿者」模型的參考。 您還將學習如何修改GraphQL查詢以包括引用模型中的欄位。

必備條件

這是多部分教學課程，並假設先前各部分中概述的步驟已完成。

目標

在本章中，我們將學習如何：

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

添加片段引用

更新Adventure Content Fragment Model，以新增對Contributor模型的參考。

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

  2. 從​AEM Start​功能表導覽至​Tools > Assets > Content Fragment Models > WKND Site。

  3. 開啟​Adventure​內容片段模型

    開啟冒險內容片段模型

  4. 在「資料類型」下，將​片段引用​欄位拖放到主面板中。

    新增片段參考欄位

  5. 使用以下命令更新此欄位的​屬性:

    • 呈現為 - fragmentreference
    • 欄位標籤- 冒險貢獻者
    • 屬性名稱 - adventureContributor
    • 型號類型——選擇​Contributor​型號
    • 根路徑 - /content/dam/wknd

    片段參考屬性

    屬性名稱adventureContributor現在可用來參考「投稿者內容片段」。

  6. 將更改保存到模型。

指派參與者參與冒險

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

  1. 導覽至​Assets > Files > WKND Site > English Adventures > Bali Surf Camp。

    Bali Surf Camp資料夾

  2. 按一下​Bali Surf Camp​內容片段，以開啟內容片段編輯器。

  3. 更新​Adventure Contributor​欄位，並按一下資料夾圖示以選取「Contributor」。

    選擇Stacey Roswells做貢獻者

    選擇參與者片段的路徑

    投稿者的填入路徑

    請注意，只能選擇使用​Contributor​模型建立的片段。

  4. 儲存對片段所做的變更。

  5. 重複上述步驟，為Yosemite Backpacking和Colorado Rock Climping等探險指派貢獻者

使用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屬性會參考Contributor模型，然後我們可以從巢狀內容片段請求屬性。

  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應用程式以顯示Contributor內容

接著，更新React Application使用的查詢，加入新的Contributor，並在Adventure詳細資訊檢視中顯示Contributor的相關資訊。

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

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

    Adventure Detail元件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. 在function Contributor(...)的AdventureDetail.js檔案中檢查嵌入的Contributor元件。 如果屬性存在，此元件將呈現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 App（如果尚未執行）:

    $ cd aem-guides-wknd-graphql/react-app
$ npm start

  8. 導覽至http://localhost:3000，然後按一下具有參考貢獻者的冒險。 您現在應該會看到​Intrique​下方列出的「參與者」資訊：

    應用程式中新增的投稿者

恭喜！

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

後續步驟

在下一章中，「使用AEM Publish環境進行生產部署」( Production deployment using an AEM Publish environment)，瞭解AEM Author and Publish services，以及建議的無頭應用程式部署模式。 您將更新現有應用程式，以使用環境變數根據目標環境動態更改GraphQL端點。 您也將學習如何正確設定AEM以進行跨來源資源共用(CORS)。

本頁內容