頁面範本 — 靜態 page-templates-static
範本可用來建立頁面,並定義哪些元件可以在選取的範圍中使用。 範本是節點的階層,其結構與要建立的頁面相同,但沒有任何實際內容。
每個範本都會提供您一系列可供使用的元件。
- 範本是由元件所建置;
- 元件使用並允許存取Widget,這些用於呈現內容。
範本的屬性和子節點 properties-and-child-nodes-of-a-template
範本是cq:Template型別的節點,具有下列屬性和子節點:
範本是頁面的基礎。
若要建立頁面,必須將範本(節點樹狀結構/apps/<myapp>/template/<mytemplate>
)複製到網站樹狀結構中的對應位置:如果使用 網站 索引標籤建立頁面,就會發生這種情況。
此複製動作也會提供頁面的初始內容(通常是僅限最上層內容)和屬性sling:resourceType,也就是用來呈現頁面的頁面元件路徑(子節點jcr:content中的所有專案)。
範本的結構方式 how-templates-are-structured
我們需要考慮兩個方面:
- 範本本身的結構
- 使用範本時產生的內容結構
範本的結構 the-structure-of-a-template
範本是在型別 cq:Template 的節點下建立。
您可以設定各種屬性,特別是:
- jcr:title — 範本的標題;建立頁面時顯示在對話方塊中。
- jcr:description — 範本的說明;建立頁面時顯示在對話方塊中。
此節點包含jcr:content (cq:PageContent)節點,會用作結果頁面內容節點的基礎;這會使用sling:resourceType參考要用於呈現新頁面實際內容的元件。
此元件用於在建立新頁面時定義內容的結構和設計。
範本產生的內容 the-content-produced-by-a-template
範本是用來建立型別cq:Page
的頁面(如前所述,頁面是一種特殊型別的元件)。 每個AEM頁面都有結構化節點jcr:content
。 此特性:
- 屬於cq:PageContent型別
- 是儲存已定義內容定義的結構化節點型別
- 具有屬性
sling:resourceType
,以參考包含用於轉譯內容之sling指令碼的元件
預設範本 default-templates
AEM隨附各種現成可用的預設範本。 有時候,您可能會想要依原樣使用這些範本。 在此情況下,您必須確保範本可供您的網站使用。
例如,AEM提供數個範本,包括內容頁面和首頁。
顯示預設範本 displaying-default-templates
若要檢視存放庫中所有範本的清單,請依照下列步驟進行:
-
在CRXDE Lite中,開啟 工具 功能表並按一下 查詢。
-
在「查詢」索引標籤中
-
以 型別 形式選取 XPath。
-
在 查詢 輸入欄位中,輸入下列字串:
//element(*, cq:Template) -
按一下 執行。 清單會顯示在結果方塊中。
通常,您會取用現有範本並開發新的範本以供您自己使用。 如需詳細資訊,請參閱開發頁面範本。
若要為您的網站啟用現有的範本,並且您想要在從 網站 主控台直接在 網站 下建立頁面時,將它顯示在 建立頁面 對話方塊中,請將範本節點的allowedPaths屬性設定為: /content(https://experienceleague.adobe.com/%E3%80%82&?lang=zh-Hant#42;)?
範本設計的套用方式 how-template-designs-are-applied
當使用設計模式在UI中定義樣式時,設計會持續保留在要定義樣式的內容節點的確切路徑。
如果設計僅使用設計模式套用,則下列區段、設計路徑解析度、決策樹和範例不適用。
設計路徑解析 design-path-resolution
根據靜態範本呈現內容時,AEM會嘗試根據內容階層的周遊情況,將最相關的設計和樣式套用至內容。
AEM會依照下列順序決定內容節點最相關的樣式:
- 如果內容節點的完整確切路徑有設計(如同在設計模式中定義設計一樣),則使用該設計。
- 如果存在父項內容節點的設計,則使用該設計。
- 如果內容節點的路徑上有任何節點的設計,則使用該設計。
在後兩種情況下,如果有多個適用的設計,請使用最接近內容節點的設計。
決策樹 decision-tree
這是設計路徑解析邏輯的圖形表示。
範例 example
請考量簡單的內容結構,如下所示,其中設計可套用至任何節點:
/root/branch/leaf
下表說明AEM如何選擇設計。
開發頁面範本 developing-page-templates
AEM頁面範本只是用來建立頁面的模型。 它們可以視需要包含儘可能少或儘可能多的初始內容,其角色是建立正確的初始節點結構,並將所需的屬性(主要是sling:resourceType)設定為允許編輯和呈現。
建立範本(根據現有範本) creating-a-new-template-based-on-an-existing-template
新範本可以完全從頭建立,但通常會複製現有範本並更新,以節省您的時間和精力。 例如,Geometrixx中的範本可以用來協助您開始使用。
若要根據現有範本建立範本:
-
將現有範本(最好使用儘可能接近您要達成之定義的範本)複製到新節點。
範本儲存在 /apps/<website-name>/templates/<template-name> 中。
note note NOTE 可用範本的清單取決於新頁面的位置以及每個範本中指定的位置限制。 檢視範本可用性。 -
變更新範本節點的 jcr:title 以反映其新角色。 您也可以更新 jcr:description (如果適用)。 請務必視需要變更頁面的範本可用性。
note note NOTE 如果您想要在從 網站 主控台直接在 網站 下建立頁面時,在 建立頁面 對話方塊中顯示範本,請將範本節點的 allowedPaths
屬性設定為:/content(/.*)?
-
複製範本所依據的元件(由範本內 jcr:content 節點的 sling:resourceType 屬性表示)以建立執行個體。
元件儲存在 /apps/<website-name>/components/<component-name>。
-
更新新元件的 jcr:title 和 jcr:description。
-
如果您想要在範本選取範圍清單中顯示新的縮圖圖片(大小為128 x 98畫素),請取代thumbnail.png。
-
更新範本 jcr:content 節點的 sling:resourceType 以參考新元件。
-
對範本或其基礎元件(或兩者)的功能或設計進行其他變更。
note note NOTE 對**/apps/<website>/templates/<template-name>**節點所做的變更會影響範本執行個體(如選取專案清單中所示)。 對**/apps/<website>/components/<component-name>**節點所做的變更會影響使用範本時建立的內容頁面。 您現在可以使用新範本在您的網站中建立頁面。
cq.shared
名稱空間,如果沒有,則會產生JavaScript錯誤Uncaught TypeError: Cannot read property 'shared' of undefined
。cq.shared
,因此任何以這些頁面為基礎的內容都會自動包含cq.shared
。 但是,如果您決定從頭開始建立自己的內容頁面,而不根據範例內容,則必須確定包括cq.shared
名稱空間。讓現有範本可供使用 making-an-existing-template-available
此範例說明如何允許範本用於特定內容路徑。 建立頁面時可供頁面作者使用的範本是由範本可用性中定義的邏輯所決定。
-
在CRXDE Lite中,導覽至您要用於頁面的範本,例如Newsletter範本。
-
變更範本可用性的
allowedPaths
屬性及其他屬性。 例如,allowedPaths
:/content/geometrixx-outdoors/[^/]+(/.*)?
表示此範本允許在/content/geometrixx-outdoors
下的任何路徑中。