內容模式

導覽至​ 工具>設定瀏覽器 ​以建立Headless體驗的設定。

提供​ title ​和​ name，並檢查​ GraphQL持續查詢 ​和​ 內容片段模型。

導覽至​ 工具>內容片段模型，然後選取具有步驟1中所建立組態名稱的資料夾。

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

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

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

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

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

在資料夾的​ 雲端設定 ​索引標籤中，選取先前建立的設定🔗。

按一下新資料夾並建立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。 ____​這可讓我們在應用程式中依名稱參照查詢。