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

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

在本章中,您將使用​片段參考​欄位更新「冒險」模型,以包含對「投稿者」模型的參考。 您還將學習如何修改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 BackpackingColorado 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
                        }
                    }
                }
              }
           }
         }
        `;
    }
    

    透過此更新,查詢中將包含有關adventureContributorfullNameoccupationpictureReference的其他屬性。

  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)。

本頁內容