頁面範本

建立頁面時,您需要選取範本。 頁面範本是新頁面的基礎。 範本會定義產生的頁面、任何初始內容及可使用的元件(設計屬性)。 這有幾項優點:

  • 頁面範本可讓專業作者建立和編輯範本
    • 這類專業作者稱為​範本作者
    • 範本作者必須是template-authors群組的成員。
  • 「頁面範本」會保留動態連線至從這些範本建立的任何頁面。 這可確保對範本所做的任何變更都反映在頁面本身中。
  • 頁面範本可讓頁面元件更為通用,讓核心頁面元件可供使用,而不需自訂。

使用「頁面範本」時,製作頁面的片段會獨立於元件中。 您可以在UI中設定必要的元件組合,因此不需要針對每個頁面變異開發新的頁面元件。

本文檔:

  • 提供建立頁面範本的概觀
  • 說明建立可編輯的範本所需的管理員/開發人員工作
  • 說明可編輯範本的技術基礎
  • 說明AEM如何評估範本的可用性
注意

本檔案假設您已熟悉建立和編輯範本。 請參閱製作檔案建立頁面範本 ,其中詳細說明了模板作者所公開的可編輯模板的功能。

秘訣

WKND教學 課程透過實作範例深入探討如何使用頁面範本,對於了解如何在新專案中設定範本非常有用

建立新模板

建立頁面範本主要是由範本作者使用範本主控台和範本編輯器完成。 本節提供此程式的概觀,並隨後說明在技術層級發生的情況。

建立新的可編輯範本時,您可以:

  1. 為模板🔗建立資料夾。 這不是強制性的,而是建議的最佳實務。

  2. 選擇模板類型。 這是複製以建立範本定義

    注意

    提供一系列範本類型的現成可用功能。 您也可以視需要建立您自己的網站特定範本類型

  3. 配置新模板的結構、內容策略、初始內容和佈局。

    結構

    • 結構可讓您定義範本的元件和內容。
    • 在範本結構中定義的元件無法在產生的頁面上移動,也無法從任何產生的頁面中刪除。
    • 如果您希望頁面作者能夠新增和移除元件,請在範本中新增段落系統。
    • 元件可以再次解除鎖定和鎖定,以便定義初始內容。

    如需範本作者如何定義結構的詳細資訊,請參閱建立頁面範本

    有關結構的技術詳細資訊,請參閱本文檔中的Structure

    原則

    • 內容策略定義元件的設計屬性。

      • 例如,可用元件或最小/最大尺寸。
    • 這些規則適用於範本(以及使用範本建立的頁面)。

    如需範本作者如何定義原則的詳細資訊,請參閱建立頁面範本

    有關策略的技術詳細資訊,請參閱本文檔中的內容策略

    初始內容

    • 「初始內容」會定義根據範本首次建立頁面時所將顯示的內容。
    • 然後頁面作者就可以編輯初始內容。

    如需範本作者如何定義結構的詳細資訊,請參閱建立頁面範本

    有關初始內容的技術詳細資訊,請參閱本文檔中的初始內容

    配置

    • 您可以定義裝置範圍的範本配置。
    • 範本的回應式版面運作方式與頁面編寫相同。

    如需範本作者如何定義範本配置的詳細資訊,請參閱建立頁面範本

    有關模板佈局的技術詳細資訊,請參閱本文檔中的佈局

  4. 啟用範本,然後允許它建立特定內容樹。

    • 範本可以啟用或停用,讓頁面作者可使用或無法使用。
    • 範本可供某些頁面分支使用或無法使用。

    如需範本作者如何啟用範本的詳細資訊,請參閱建立頁面範本

    有關啟用模板的技術詳細資訊,請參閱本文檔中的啟用和允許用於Use的模板

  5. 使用它建立內容頁面。

    • 使用範本建立新頁面時,靜態和可編輯的範本之間沒有顯示差異,也沒有顯示任何指示。
    • 對於頁面作者而言,程式是透明的。

    如需頁面作者如何使用範本來建立頁面的詳細資訊,請參閱建立及組織頁面

    有關使用可編輯模板建立頁面的技術詳細資訊,請參閱本文檔中的結果內容頁面

秘訣

切勿輸入需要國際化到模板中的任何資訊。 針對內部化目的,建議使用核心元件🔗的本地化功能。

注意

範本是功能強大的工具,可簡化頁面建立工作流程。 不過,太多範本可能會讓作者不堪重負,使頁面建立變得困惑。 經驗法則是將範本數量控制在100以下。

Adobe不建議有超過1000個範本,因為可能會影響效能。

注意

編輯器用戶端程式庫會假設內容頁面中存在cq.shared命名空間,如果命名空間不存在,則會導致JavaScript錯誤Uncaught TypeError: Cannot read property 'shared' of undefined

所有範例內容頁面皆包含cq.shared,因此任何以這些頁面為基礎的內容都會自動包含cq.shared。 不過,如果您決定從草稿開始建立自己的內容頁面,而不以範例內容為基礎,則必須確定包含cq.shared命名空間。

如需詳細資訊,請參閱使用用戶端程式庫

模板資料夾

若要組織範本,您可以使用下列資料夾:

  • global
  • 網站特定
注意

即使您可以巢狀內嵌資料夾,當使用者在​範本​控制台中檢視資料夾時,資料夾會以平面結構呈現。

在標準AEM例項中,範本主控台中已存在global資料夾。 如果在當前資料夾中找不到策略和/或模板類型,則此選項將保留預設模板,並充當後援。 您可以將預設範本新增到此資料夾或建立新資料夾(建議)。

注意

最佳作法是建立新資料夾以存放自訂範本,而不使用global資料夾。

注意

資料夾必須由具有admin權限的用戶建立。

模板類型和策略根據以下優先順序繼承到所有資料夾:

  1. 當前資料夾
  2. 當前資料夾的父資料夾
  3. /conf/global
  4. /apps
  5. /libs

將建立所有允許的條目的清單。 如果任何設定重疊(path/ label),則只會向使用者顯示最接近目前資料夾的例項。

若要建立新資料夾,您可以執行下列任一操作:

使用CRXDE Lite

  1. 可以以程式設計方式或使用CRXDE Lite為執行個體建立新資料夾(在/conf下)。

    必須使用下列結構:

    /conf
        <your-folder-name> [sling:Folder]
            settings [sling:Folder]
                wcm [cq:Page]
                    templates [cq:Page]
                    policies [cq:Page]
    
  2. 然後,您可以在資料夾根節點上定義下列屬性:

    <your-folder-name> [sling:Folder]

    • 名稱: jcr:title
    • 類型: String
    • 值:要顯示在​Templates​控制台中的標題(資料夾)。
  3. 除了標準製作權限(例如content-authors)您現在需要指派群組並定義必要的存取權限(ACL),供作者在新資料夾中建立範本。

    template-authors群組是需要指派的預設群組。 有關詳細資訊,請參閱ACL和組部分。

使用配置瀏覽器

  1. 轉至​全局導航 -> 工具 > 配置瀏覽器

    左側列出了現有資料夾,包括global資料夾。

  2. 按一下​建立

  3. 在​建立配置​對話框中,需要配置以下欄位:

    • 標題:提供設定資料夾的標題
    • 可編輯的範本:勾選以允許此資料夾內有可編輯的範本
  4. 按一下​建立

ACL和組

建立範本資料夾後(透過CRXDE或使用設定瀏覽器),必須為範本資料夾的適當群組定義ACL,以確保適當的安全性。

WKND教程的模板資料夾可以用作示例。

範本作者群組

template-authors群組是用於管理範本存取權的群組,且是AEM的標準,但是空白。 必須將使用者新增至專案/網站的群組。

注意

template-authors群組僅適用於必須能夠建立新範本的使用者。

編輯範本功能強大,若未正確編輯,現有範本可能會損毀。 因此,此角色應該重點突出,並僅包括合格的使用者。

下表詳細說明了進行範本編輯所需的權限。

路徑 角色/群組 權限
說明
/conf/<your-folder>/settings/wcm/templates 範本作者
讀、寫、復寫 在站點特定/conf空間中建立、讀取、更新、刪除和複製模板的模板作者
匿名Web用戶 讀取 匿名Web用戶在呈現頁面時必須讀取模板
內容作者 複製 replicateContent作者在啟動頁面時需要啟動頁面的範本
/conf/<your-folder>/settings/wcm/policies Template Author 讀、寫、復寫 在站點特定/conf空間中建立、讀取、更新、刪除和複製模板的模板作者
匿名Web用戶 讀取 匿名Web用戶在呈現頁面時必須讀取策略
內容作者 複製 啟用頁面時,內容作者需要啟用頁面範本的原則
/conf/<site>/settings/template-types 範本作者 讀取 範本作者會根據其中一種預先定義的範本類型,建立新範本。
匿名Web用戶 匿名Web用戶不能訪問模板類型

此預設template-authors組僅涵蓋項目設定,所有template-authors成員均可訪問和編寫所有模板。 若要進行更複雜的設定(需要多個範本作者群組來區隔範本的存取權),必須建立更多自訂範本作者群組。 不過,範本作者群組的權限仍會相同。

模板類型

建立新範本時,您需要指定範本類型:

  • 模板類型有效地為模板提供模板。 建立新模板時,將使用所選模板類型的結構和初始內容建立新模板。

    • 模板類型被複製以建立模板。
    • 複製發生後,範本和範本類型之間的唯一連線就是靜態參考,以供參考。
  • 範本類型可讓您定義:

    • 頁面元件的資源類型。
    • 根節點的策略,定義模板編輯器中允許的元件。
    • 建議為回應式格線定義斷點,並在範本類型上設定行動模擬器。
  • AEM提供一些現成的範本類型選項,例如HTML5頁面和最適化表單頁面。

  • 範本類型通常由開發人員定義。

現成可用的範本類型儲存在:

  • /libs/settings/wcm/template-types
注意

您不得變更/libs路徑中的任何項目。 這是因為/libs的內容可以隨時由AEM的更新覆寫。

您的網站特定範本類型應儲存在以下可比位置:

  • /apps/settings/wcm/template-types

自定義模板類型的定義應儲存在用戶定義的資料夾中(建議),或儲存在global中。 例如:

  • /conf/<my-folder-01>/<my-folder-02>/settings/wcm/template-types
  • /conf/<my-folder>/settings/wcm/template-types
  • /conf/global/settings/wcm/template-types
注意

範本類型必須遵循正確的資料夾結構(即/settings/wcm/...),否則找不到範本類型。

建立模板類型

如果已建立可作為其他模板基礎的模板,則可以將此模板作為模板類型複製。

  1. 如此處🔗所述,建立範本,作為範本類型的基礎。
  2. 使用CRXDE Lite,將新建立的模板從templates節點複製到模板資料夾下的template-types節點。
  3. 範本資料夾下的templates節點刪除範本。
  4. template-types節點下的範本副本中,刪除所有cq:templatecq:templateType jcr:content屬性。

您也可以使用可編輯範本範例來開發自己的範本類型,此範本可在GitHub上取得。

GITHUB上的程式碼

您可以在GitHub上找到此頁面的程式碼

範本定義

可編輯模板的定義儲存在用戶定義的資料夾(建議)中,或儲存在global中。 例如:

  • /conf/<my-folder>/settings/wcm/templates
  • /conf/<my-folder-01>/<my-folder-02>/settings/wcm/templates
  • /conf/global/settings/wcm/templates

模板的根節點類型為cq:Template,骨架結構為:

<template-name>
  initial
    jcr:content
      root
        <component>
        ...
        <component>
  jcr:content
    @property status
  policies
    jcr:content
      root
        @property cq:policy
        <component>
          @property cq:policy
        ...
        <component>
          @property cq:policy
  structure
    jcr:content
      root
        <component>
        ...
        <component>
      cq:responsive
        breakpoints
  thumbnail.png

主要元素為:

  • <template-name>

    • [initial](#initial-content)
    • jcr:content
    • [structure](#structure)
    • [policies](#policies)
    • thumbnail.png

jcr:content

此節點包含模板的屬性:

  • 名稱: jcr:title
  • 名稱: status
    • "類型:String
    • : draftenableddisabled

結構

定義結果頁面的結構:

  • 建立新頁面時與初始內容(/initial)合併。

  • 對結構所做的變更將反映在使用範本建立的任何頁面中。

  • root(structure/jcr:content/root)節點定義將在產生的頁面中提供的元件清單。

    • 在模板結構中定義的元件不能在任何結果頁面上移動或從中刪除。
    • 元件解除鎖定後,editable屬性設定為true
    • 一旦解除鎖定已包含內容的元件,此內容將移至initial分支。
  • cq:responsive節點保存回應式配置的定義。

初始內容

定義新頁面建立時將擁有的初始內容:

  • 包含複製到任何新頁面的jcr:content節點。
  • 建立新頁面時與結構(/structure)合併。
  • 如果初始內容在建立後變更,則任何現有頁面都不會更新。
  • root節點包含元件清單,以定義在產生的頁面中可用的元件。
  • 如果在結構模式中將內容添加到元件,並且該元件隨後被解鎖(反之亦然),則此內容用作初始內容。

配置

編輯範本時,您可以定義版面,這會使用標準回應式版面

內容原則

內容策略定義元件的設計屬性。 例如,可用元件或最小/最大尺寸。 這些規則適用於範本(以及使用範本建立的頁面)。 可在範本編輯器中建立並選取內容原則。

  • root節點上的屬性cq:policy
    /conf/<your-folder>/settings/wcm/templates/<your-template>/policies/jcr:content/root
    提供頁面段落系統的內容原則的相對參考。

  • 屬性cq:policy位於root下的component-explicit節點上,提供各個元件的策略連結。

  • 實際策略定義儲存在:
    /conf/<your-folder>/settings/wcm/policies/wcm/foundation/components

注意

策略定義的路徑取決於元件的路徑。 cq:policy 保留對配置本身的相對引用。

頁面原則

頁面原則可讓您在範本或產生的頁面中定義頁面(主要parsys)的內容原則

啟用和允許使用模板

  1. 啟用範本

    必須先啟用範本,才能使用範本:

    • 從範本 控制台啟用 ​範本。

    • jcr:content節點上設定狀態屬性。

      • 例如,在:

        /conf/<your-folder>/settings/wcm/templates/<your-template>/jcr:content

      • 定義屬性:

        • 名稱:狀態
        • 類型:字串
        • 值: enabled
  2. 允許的範本

    • 在子分支的適當頁面或根 面的「頁面屬性」上定義「允許的範本路徑」。

    • 設定屬性:

      cq:allowedTemplates

      jcr:content 所需分支的節點。
      例如,值為:

    /conf/<your-folder>/settings/wcm/templates/.*

產生的內容頁面

從可編輯的範本建立的頁面:

  • 在範本中使用從structureinitial合併的子樹狀結構建立

  • 在模板和模板類型中保留對資訊的引用。 這是以具有以下屬性的jcr:content節點來實現的:

    • cq:template — 提供實際模板的動態參考;可讓範本的變更反映在實際頁面上。

    • cq:templateType — 提供範本類型的參考。

範本、內容和元件之間的相互關係

上圖顯示範本、內容和元件之間的關聯:

  • Controller - /content/<my-site>/<my-page> — 引用模板的結果頁。 內容可控制整個程式。 根據定義,它訪問相應的模板和元件。
  • 設定 — /conf/<my-folder>/settings/wcm/templates/<my-template> - 範本和相關內容原則定義頁面設定。
  • Model - OSGi套件組合 — OSGI套件組合實作功能。
  • 檢視 — /apps/<my-site>/components — 在製作和發佈環境中,元件會呈現內容。

呈現頁面時:

  • 範本:

    • 將會參考其jcr:content節點的cq:template屬性來存取與該頁面對應的範本。
  • 元件:

    • 頁面元件將合併範本的structure/jcr:content樹狀目錄和頁面的jcr:content樹狀目錄。
      • 頁面元件將僅允許作者編輯已標示為可編輯的範本結構節點(以及任何子項)。
      • 在頁面上呈現元件時,該元件的相對路徑將取自jcr:content節點;然後,將在範本的policies/jcr:content節點下搜尋相同路徑。
        • 此節點的cq:policy屬性指向實際內容策略(即保留該元件的設計配置)。
          • 這允許您有多個模板重複使用相同的內容策略配置。

範本可用性

在網站管理員介面中建立新頁面時,可用範本清單會根據新頁面的位置,以及每個範本中指定的位置限制而定。

以下屬性確定是否允許將模板T用於將新頁面作為頁面P的子頁面。 這些屬性中的每個都是多值字串,包含零個或多個用於與路徑比對的規則運算式:

  • Pjcr:content子節點或P的祖先的cq:allowedTemplates屬性。

  • TallowedPaths屬性。

  • TallowedParents屬性。

  • P範本的allowedChildren屬性。

評價工作如下:

  • P開始的頁面階層遞增時找到的第一個非空白cq:allowedTemplates屬性與T的路徑相符。 如果沒有任何值相符,則拒絕T

  • 如果T具有非空allowedPaths屬性,但沒有任何值與P路徑匹配,則拒絕T

  • 如果上述兩個屬性為空或不存在,則拒絕T,除非它屬於與P相同的應用程式。 T 屬於同一應用程 P 式,只有當路徑的第二級名稱與路 T 徑的第二級名稱相同時才 P會。例如,範本/apps/wknd/templates/foo與頁面/content/wknd屬於相同的應用程式。

  • 如果T具有非空allowedParents屬性,但沒有任何值與P路徑匹配,則拒絕T

  • 如果P的模板具有非空allowedChildren屬性,但沒有任何值與T的路徑匹配,則T將被拒絕。

  • 在所有其他情況下,允許T

下圖描述了模板評估流程:

模板評估過程

注意

AEM提供多個屬性,以控制​Sites​下允許的範本。 但是,結合這些規則可能會產生非常複雜的規則,且難以追蹤和管理。

因此,Adobe建議您透過定義:

  • cq:allowedTemplates屬性

  • 僅位於站點根

如需範例,請參閱WKND教學課程內容:/content/wknd/jcr:content

屬性allowedPathsallowedParentsallowedChildren也可放置在範本上,以定義更複雜的規則。 不過,如果需要進一步限制允許的範本,在網站的子區段上進一步定義cq:allowedTemplates屬性會更簡單。**

另一個好處是,cq:allowedTemplates屬性可由作者在​Page Properties​的​Advanced​標籤中更新。 無法使用(標準)UI更新其他範本屬性,因此需要開發人員來維護每次變更的規則和程式碼部署。

限制子頁中使用的模板

要限制哪些模板可用於在指定頁面下建立子頁面,請使用頁面jcr:content節點的cq:allowedTemplates屬性指定允許作為子頁面的模板清單。 清單中的每個值必須是允許的子頁面(例如/apps/wknd/templates/page-content)的模板的絕對路徑。

您可以使用範本jcr:content節點上的cq:allowedTemplates屬性,將此設定套用至使用此範本的所有新建立頁面。

如果要添加更多約束(例如關於模板層次結構),可以在模板上使用allowedParents/allowedChildren屬性。 然後,您可以明確指定從範本T建立的頁面必須是從範本T建立的頁面的父/子頁面。

本頁內容