內容模式

瀏覽至 「工具>設定瀏覽器」 建立Headless體驗的設定。

提供 標題 和 名稱，並勾選 GraphQL持續查詢 和 內容片段模型.

瀏覽至 「工具>內容片段模型」 並選取具有在步驟1中建立的設定名稱的資料夾。

在資料夾內，選取 建立 並為模型命名 Teaser. 將下列資料型別新增至 Teaser 模型。

在資料夾內，建立名為的第二個模型 選件. 按一下「建立」並為模型命名「選件」，然後新增下列資料型別：

在資料夾內，建立名為的第三個模型 影像清單. 按一下「建立」並將模型命名為「影像清單」，然後新增以下資料型別：

現在導覽至「資產」 ，並為新網站建立資料夾。 按一下「建立」並為資料夾命名。

建立資料夾後，請選取資料夾並開啟其 屬性.

在資料夾的 雲端設定 索引標籤中，選取設定 建立時間較早.

按一下新資料夾並建立Teaser。 按一下 建立 和 內容片段 並選取 Teaser 模型。 為模型命名 Hero 並按一下 建立.

瀏覽至 「工具> 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"
}

執行查詢以接收先前建立的內容片段的結果。

按一下 儲存 以保留（儲存）查詢並命名查詢 Teaser. 這可讓我們在應用程式中依名稱參照查詢。