頁面範本- Static

「範本」可用來建立「頁面」,並定義哪些元件可在選取範圍內使用。 範本是節點的階層,其結構與要建立的頁面相同,但沒有任何實際內容。

每個範本都會提供可供使用的元件選擇。

  • 範本由Components建立;
  • 元件使用並允許存取Widget,而這些元件則用來轉換內容。
注意

您也 可使用可編輯的範本,而且是建議的範本類型,以提供最大的彈性和最新功能。

範本的屬性和子節點

範本是類型cq:Template的節點,具有下列屬性和子節點:

名稱
類型
說明
.
cq:Template 目前範本。 範本為節點類型cq:Template。
allowedChildren String[] 允許作為此模板子項的模板的路徑。
allowedParents 字串[] 允許作為此模板父項的模板的路徑。
allowedPaths 字串[] 允許基於此模板的頁的路徑。
jcr:created 日期 模板建立日期。
jcr:description 字串 範本說明。
jcr:title 字串 範本的標題。
排名 長整數 範本的排名。 用於在用戶介面中顯示模板。
jcr:content cq:PageContent 包含模板內容的節點。
thumbnail.png nt:檔案 範本的縮圖。
icon.png nt:檔案 模板的表徵圖。

範本是頁面的基礎。

要建立頁面,必須將模板(node-tree /apps/<myapp>/template/<mytemplate>)複製到site-tree中的相應位置:如果使用​Websites​標籤建立頁面,就會發生這種情況。

此複製動作也會提供頁面的初始內容(通常為僅限Top-Level Content)和屬性sling:resourceType,用於呈現頁面的頁面元件路徑(子節點jcr:content中的所有項目)。

範本的結構方式

需要考慮兩個方面:

  • 範本本身的結構
  • 使用範本時產生的內容結構

範本的結構

在類型​cq:Template​的節點下建立模板。

screen_shot_2012-02-13at63646pm

可以設定各種屬性,特別是:

  • jcr:title - title for the template;顯示在對話框中。
  • jcr:description - the template的description;顯示在對話框中。

此節點包含一個jcr:content(cq:PageContent)節點,作為生成頁面的內容節點的基礎;此參考,使用sling:resourceType,即用於呈現新頁面實際內容的元件。

screen_shot_2012-02-13at64010pm

此元件用於定義建立新頁面時的內容結構與設計。

screen_shot_2012-02-13at64137pm

範本產生的內容

範本可用來建立類型cq:Page的頁面(如前所述,頁面是特殊類型的元件)。 每個AEM頁面都有結構化節點jcr:content。 此特性:

  • 是cq:PageContent類型
  • 是包含已定義內容定義的結構化節點類型
  • 具有sling:resourceType屬性,可參照包含sling指令碼的元件,用於轉譯內容

預設範本

AEM隨附許多預設範本,現已推出。 在某些情況下,您可能會想要依原樣使用範本。 在這種情況下,您需要確保該範本適用於您的網站。

例如,AEM隨附數個範本,包括內容頁面和首頁。

標題 元件 位置 目的
首頁 首頁 geometrixx Geometrixx首頁範本。
內容頁面 contentpage geometrixx Geometrixx內容頁面範本。

顯示預設模板

要查看儲存庫中所有模板的清單,請按如下步驟進行:

  1. 在CRXDE Lite中,開啟​工具​菜單,然後按一下​查詢

  2. 在「查詢」頁籤中

  3. 作為​Type,選擇​XPath

  4. 在​Query​輸入欄位中,輸入下列字串:

    //element(&ast;, cq:Template)

  5. 按一下​執行。 清單將顯示在結果框中。

在大多數情況下,您會取用現有的範本,並開發新範本供您自用。 如需詳細資訊,請參閱開發頁面範本

若要為您的網站啟用現有範本,並希望在從​Websites​主控台建立位於​Websites​下方的頁面時,將其顯示在​Create Page​對話方塊中,請將範本節點的allowedPaths屬性設為:/content(/)。&ast;)?

如何套用範本設計

當使用設計模式在UI中定義樣式時,該設計會保留在要為其定義樣式的內容節點的確切路徑上。

注意

Adobe建議僅透過設計模式套用設計。

例如,在CRX DE中修改設計並非最佳做法,而且這種設計的應用可能與預期行為不同。

如果設計僅使用設計模式應用,則下列章節設計路徑解析度決策樹範例不適用。

注意

本節說明自AEM 6.4.2.0起的設計路徑解析度行為。

設計路徑解析度

當根據靜態範本轉譯內容時,AEM會嘗試根據內容階層的遍歷,將最相關的設計和樣式套用至內容。

AEM會依下列順序決定內容節點最相關的樣式:

  • 如果內容節點有完整且精確的路徑設計(如設計模式中定義設計時),則使用該設計。
  • 如果父代的內容節點有設計,則使用該設計。
  • 如果內容節點路徑上有任何節點有設計,則使用該設計。

在最後兩種情況中,如果有多個適用的設計,請使用最接近內容節點的設計。

決策樹

這是設計路徑解析度邏輯的圖形表示。

design_path_resolution

範例

請考慮如下簡單的內容結構,其中設計可以應用到任何節點:

/root/branch/leaf

下表說明AEM將如何選擇設計。

尋找適合
適用於
選擇的設計
評論
leaf

root

branch

leaf

leaf 最精確的符合一律採用。
leaf

root

branch

branch 倒回樹下最接近的匹配位置。
leaf root root 如果所有其他故障,則取剩餘的。
branch branch branch
branch

branch

leaf

branch
branch

root

branch

branch
branch

root

leaf

root

如果沒有完全匹配,請將樹中的下一個取下。

假設這永遠適用,但樹狀結構可能過於具體。

開發頁面範本

AEM頁面範本只是用來建立新頁面的模型。 它們可視需要包含最少或最多的初始內容,其角色是建立正確的初始節點結構,而必要的屬性(主要是sling:resourceType)已設定為允許編輯和演算。

建立新範本(根據現有範本)

不用說可以完全從頭開始建立新範本,但通常會複製並更新現有的範本,以節省您的時間和精力。 例如,Geometrixx中的範本可用來協助您開始使用。

要基於現有模板建立新模板,請執行以下操作:

  1. 將現有範本(最好以您想要達到的定義盡可能接近)複製到新節點。

    範本通常儲存在​/apps/<website-name>/templates/<template-name>​中。

    注意

    可用的範本清單取決於新頁面的位置以及每個範本中指定的位置限制。 請參閱範本可用性

  2. 變更新範本節點的​jcr:title,以反映其新角色。 您也可以視需要更新​jcr:description。 請務必視需要變更頁面的範本可用性。

    注意

    如果希望在從​Websites​控制台建立位於​Websites​下的頁面時在​Create Page​對話框中顯示模板,請將模板節點的allowedPaths屬性設定為:/content(/.*?lang=zh-Hant)?

    chlimage_1-251

  3. 複製範本所依據的元件(這由範本內​jcr:content​節點的​sling:resourceType​屬性指示)以建立新例項。

    元件通常儲存在​/apps/<website-name>/components/<component-name>​中。

  4. 更新新元件的​jcr:title​和​jcr:description

  5. 如果您想要在範本選擇清單中顯示新的縮圖圖片,請取代thumbnail.png(大小為128 x 98 px)。

  6. 更新範本的​jcr:content​節點的​sling:resourceType,以參考新元件。

  7. 對範本及/或其基礎元件的功能或設計進行進一步的變更。

    注意

    對​**/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命名空間。
如需詳細資訊,請參閱使用用戶端程式庫

使現有模板可用

此範例說明如何允許範本用於特定內容路徑。 建立新頁面時頁面作者可用的範本由範本可用性中定義的邏輯決定。

  1. 在CRXDE Lite中,導覽至您要用於頁面的範本,例如電子報範本。

  2. 變更allowedPaths屬性和用於範本可用性的其他屬性。 例如,allowedPaths:/content/geometrixx-outdoors/[^/]+(/.*?lang=zh-Hant)?表示此範本可在/content/geometrixx-outdoors下的任何路徑中使用。

    chlimage_1-252

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now