建立內容片段模型 create-content-fragment-models

本章將逐步說明建立五個內容片段模型的步驟:

  • 連絡人資訊
  • 位址
  • 人員
  • 位置
  • 團隊

內容片段模型允許定義內容型別之間的關係並持續如結構描述這樣的關係。 使用巢狀片段參考、各種內容資料型別和視覺內容組織的索引標籤型別。 更進階的資料型別,例如Tab預留位置、片段參考、JSON物件和日期與時間資料型別。

本章也涵蓋如何增強內容參照(例如影像)的驗證規則。

先決條件 prerequisites

這是進階教學課程。 繼續本章之前,請確定您已完成快速設定。 請確定您已閱讀先前的總覽章節,以瞭解進階教學課程設定的詳細資訊。

目標 objectives

  • 建立內容片段模型。
  • 將索引標籤預留位置、日期和時間、JSON物件、片段參照和內容參照新增至模型。
  • 將驗證新增至內容參考。

內容片段模型概觀 content-fragment-model-overview

以下影片簡要介紹內容片段模型,以及在本教學課程中如何使用它們。

建立內容片段模型 create-models

讓我們為WKND應用程式建立一些內容片段模型。 如果您需要建立內容片段模型的基本簡介,請參閱基本教學課程中的適當章節。

  1. 導覽至「工具」>「一般」>「內容片段模型」。

    內容片段模型路徑

  2. 選取「WKND共用」以檢視網站的現有內容片段模型清單。

連絡人資訊模型 contact-info-model

接著,建立包含人員或地點之聯絡資訊的模型。

  1. 選取右上角的​ 建立

  2. 將模型標題命名為「聯絡資訊」,然後選取​ 建立。 在出現的成功強制回應視窗中,選取​ 開啟 ​以編輯新建立的模型。

  3. 從將​ 單行文字 ​欄位拖曳到模型上開始。 在​ 屬性 ​索引標籤中將​ 欄位標籤 ​指定為[電話]。 屬性名稱會自動填入phone。 選取核取方塊,使欄位​ 為必填

  4. 導覽至​ 資料型別 ​索引標籤,然後在[電話]欄位下方新增其他​ 單行文字 ​欄位。 請為它提供「電子郵件」的​ 欄位標籤,並將它設定為​ 必要

Adobe Experience Manager隨附一些內建的驗證方法。 這些驗證方法可讓您將治理規則新增到內容片段模式中的特定欄位。 在這種情況下,讓我們新增驗證規則,以確保使用者在填寫此欄位時只能輸入有效的電子郵件地址。 在​ 驗證型別 ​下拉式清單中,選取​ 電子郵件

您完成的內容片段模型應如下所示:

連絡人資訊模型路徑

完成之後,請選取​ 儲存 ​以確認您的變更並關閉內容片段模型編輯器。

地址模型 address-model

接下來,建立地址的模型。

  1. 從​ WKND共用,從右上角選取​ 建立

  2. 輸入[地址]的標題,然後選取[建立]。 在出現的成功強制回應視窗中,選取​ 開啟 ​以編輯新建立的模型。

  3. 將​ 單行文字 ​欄位拖放到模型上,並賦予模型「街道地址」的​ 欄位標籤。 然後以streetAddress填入屬性名稱。 選取​ 必要 ​核取方塊。

  4. 重複上述步驟,再新增四個「單行文字」欄位至模型。 使用下列標籤:

    • 城市
    • 狀態
    • 郵遞區號
    • 國家/地區
  5. 選取​ 儲存 ​以儲存對位址模型的變更。

    完成的「位址」片段模型應如下所示:
    位址模型

個人模型 person-model

接下來,建立包含個人相關資訊的模型。

  1. 在右上角,選取​ 建立

  2. 將模型標題命名為「人員」,然後選取​ 建立。 在出現的成功強制回應視窗中,選取​ 開啟 ​以編輯新建立的模型。

  3. 從將​ 單行文字 ​欄位拖曳到模型上開始。 為其提供「全名」的​ 欄位標籤。 屬性名稱會自動填入fullName。 選取核取方塊,使欄位​ 為必填

    全名選項

  4. 內容片段模式可在其他模式中參照。 導覽至​ 資料型別 ​索引標籤,然後拖放​ 片段參考 ​欄位,並加上標籤「聯絡人資訊」。

  5. 在​ 屬性 ​標籤的​ 允許的內容片段模式 ​欄位下,選取資料夾圖示,然後選擇先前建立的​ 連絡人資訊 ​片段模式。

  6. 新增​ 內容參考 ​欄位,並提供「個人資料圖片」的​ 欄位標籤。 選取​ 根路徑 ​下的資料夾圖示以開啟路徑選擇強制回應視窗。 選取​ 內容 > Assets,然後選取​ WKND共用 ​的核取方塊,以選取根路徑。 使用右上方的​ 選取 ​按鈕來儲存路徑。 最終文字路徑應為/content/dam/wknd-shared

    內容參考根路徑

  7. 在​ 僅接受指定的內容型別 ​下,選取[影像]。

    個人資料圖片選項

  8. 若要限制影像檔案的大小和尺寸,讓我們來看看內容參考欄位的一些驗證選項。

    在​ 僅接受指定的檔案大小 ​下,選取[小於或等於],其他欄位會顯示於下方。
    僅接受指定的檔案大小

  9. 對於​ 最大值,請輸入「5」,對於​ 選取單位,請選取「百萬位元組(MB)」。 此驗證僅允許選擇指定大小的影像。

  10. 在​ 僅接受指定的影像寬度 ​下,選取[最大寬度]。 在出現的​ 最大(畫素) ​欄位中,輸入「10000」。 為​ 選取相同的選項,只接受指定的影像高度

    這些驗證可確保新增的影像不超過指定的值。 驗證規則現在看起來應該像這樣:

    內容參考驗證規則

  11. 新增​ 多行文字 ​欄位,並為它提供「傳記」的​ 欄位標籤。 將​ 預設型別 ​下拉式清單保留為預設「RTF格式」選項。

    履歷選項

  12. 導覽至​ 資料型別 ​標籤,然後拖曳「傳記」底下的​ 分項清單 ​欄位。 代替預設的​ 轉譯為 ​選項,選取​ 下拉式清單 ​並賦予其​ 欄位標籤「講師體驗層級」。 輸入一系列講師經驗層級選項,例如​ 專家、進階、中級

  13. 接下來,拖曳另一個​ 列舉 ​欄位至「講師體驗等級」下,並選擇「核取方塊」至「轉譯為​ 」選項。 ​給它一個​ 欄位標籤 "Skills"。 輸入攀巖、衝浪、騎腳踏車、滑雪和揹包等各種技能。 選項標籤和選項值應符合以下內容:

    技能列舉

  14. 最後,使用​ 多行文字 ​欄位來建立「管理員詳細資訊」欄位標籤。

選取「儲存」以確認您的變更並關閉內容片段模式編輯器。

位置模型 location-model

下一個內容片段模型說明實體位置。 此模型使用定位字元預留位置。 索引標籤預留位置可透過分類內容,協助您分別在模型編輯器和片段編輯器中組織資料型別。 每個預留位置都會在內容片段編輯器中建立一個標籤,類似於網際網路瀏覽器中的標籤。 「位置」模型應該有兩個標籤:「位置詳細資料」和「位置地址」。

  1. 如同先前一樣,選取「建立」以建立另一個內容片段模式。 在「模型標題」中,輸入「位置」。 在出現的成功模式中,選取​ 建立,然後選取​ 開啟

  2. 將​ 索引標籤預留位置 ​欄位新增至模型,並標示為「位置詳細資料」。

  3. 拖放​ 單行文字 ​並加上標籤「名稱」。 在此欄位標籤下方,新增​ 多行文字 ​欄位,並將其標示為「描述」。

  4. 接著,新增​ 片段參考 ​欄位,並將其標示為「聯絡人資訊」。 在[屬性]索引標籤的​ 允許的內容片段模式 ​下,選取​ 資料夾圖示,然後選擇先前建立的[連絡人資訊]片段模式。

  5. 在「連絡人資訊」下新增​ 內容參考 ​欄位。 將其標示為「位置影像」。 根路徑 ​在​ 只接受指定的內容型別 ​下應為/content/dam/wknd-shared.,請選取[影像]。

  6. 讓我們也在「位置影像」下新增​ JSON物件 ​欄位。 由於此資料型別有彈性,因此可用來顯示您要納入內容的任何資料。 在此情況下,會使用JSON物件來顯示天氣相關資訊。 將JSON物件標示為「依季節顯示天氣」。 在​ 屬性 ​索引標籤中,新增​ 說明,讓使用者清楚在此輸入哪些資料:「關於各季事件位置天氣的JSON資料(春季、夏季、秋季、冬季)」。

    JSON物件選項

  7. 若要建立[位置地址]索引標籤,請新增​ 索引標籤預留位置 ​欄位至模型,並加上標籤[位置地址]。

  8. 拖放​ 片段參考 ​欄位,並從屬性標籤將其標示為「Address」,然後在​ 允許的內容片段模型 ​下選取​ Address ​模型。

  9. 選取「儲存」以確認您的變更並關閉內容片段模式編輯器。 已完成的「位置」模型應如下所示:

    內容參考選項

團隊模型 team-model

最後,建立可描述團隊人員的模型。

  1. 從​ WKND共用 ​頁面,選取​ 建立 ​以製作另一個內容片段模式。 在「模型標題」中,輸入「團隊」。 和先前一樣,在出現的成功強制回應視窗中,選取​ 建立,然後選取​ 開啟

  2. 新增​ 多行文字 ​欄位至表單。 在​ 欄位標籤 ​下,輸入「描述」。

  3. 將​ 日期與時間 ​欄位新增至模型,並標示為「團隊建立日期」。 在此情況下,請將預設​ Type ​設為"Date",但請注意,也可以使用"Date & Time"或"Time"。

    日期和時間選項

  4. 導覽至​ 資料型別 ​標籤。 在「團隊建立日期」下方新增​ 片段參考。 在​ 呈現為 ​下拉式清單中,選取「多欄位」。 對於​ 欄位標籤,請輸入「團隊成員」。 此欄位連結至先前建立的​ 人員 ​模型。 由於資料型別是多欄位,因此可以新增多個人員片段,以建立人員團隊。

    片段參考選項

  5. 在「允許的內容片段模式」下,使用資料夾圖示開啟「選取路徑」強制回應視窗,然後選取「人員」模式。 使用​ 選取 ​按鈕儲存路徑。

    選取人員模型

  6. 選取「儲存」以確認您的變更並關閉內容片段模式編輯器。

新增片段參考至冒險模型 fragment-references

如同「團隊」模式具有參照「人員」模式的片段參照,也必須參照「冒險」模式中的「團隊」和「位置」模式,才能在WKND應用程式中顯示這些新模式。

  1. 從​ WKND Shared ​頁面,選取​ Adventure ​模型,然後從頂端導覽中選取​ 編輯

    冒險編輯路徑

  2. 在表單底部的「要帶入的專案」下方,新增​ 片段參考 ​欄位。 輸入「位置」的​ 欄位標籤。 在​ 允許的內容片段模型 ​下,選取​ 位置 ​模型。

    位置片段參考選項

  3. 新增一個以上​ 片段參考 ​欄位,並標示為「講師團隊」。 在​ 允許的內容片段模型 ​下,選取​ 團隊 ​模型。

    團隊片段參考選項

  4. 新增另一個​ 片段參考 ​欄位,並將其標示為「管理員」。

    管理員片段參考選項

  5. 選取「儲存」以確認您的變更並關閉內容片段模式編輯器。

最佳做法 best-practices

關於建立內容片段模型,有幾個最佳實務准則:

  • 建立對應至UX元件的模型。 例如,WKND應用程式具有適用於冒險、文章和位置的內容片段模型。 您也可以新增標題、促銷活動或免責宣告。 這些範例每個都組成特定的UX元件。

  • 建立儘可能少的模型。 限制模型數量可讓您最大化重複使用並簡化內容管理。

  • 視需要深度巢狀內嵌內容片段模型,但僅視需要而定。 回想一下,巢狀內嵌是使用片段參考或內容參考完成的。 最多考慮五個巢狀層級。

恭喜! congratulations

恭喜!您現在已新增標籤、使用日期和時間以及JSON物件資料型別,並瞭解更多有關片段和內容參照的資訊。 您也新增了內容參考驗證規則。

後續步驟 next-steps

此系列的下一章將涵蓋您在本章中建立的模型中的編寫內容片段。 瞭解如何使用本章介紹的資料型別並建立檔案夾原則以限制可在資產檔案夾中建立的內容片段模型。

雖然本教學課程可選擇使用,但請務必在真實世界生產環境中發佈所有內容。 若要檢視AEM中的作者和Publish環境,請參閱
AEM Headless與GraphQL影片系列

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4