頁面和範本 pages-and-template

查看來自 GitHub 的 tutorial/pages-templates-start 分支

$ cd ~/code/aem-guides-wknd
$ git checkout tutorial/pages-templates-start

使用您的 Maven 技能將程式碼基底部署到本機 AEM 實例：

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

使用​ 「頁面」範本類型 ​建立一個範本，為取名為「文章頁面」

切換到「結構」模式。

新增​ 體驗片段 ​元件，放在範本頂部作為​ 頁首。

• 設定元件以便指向 /content/experience-fragments/wknd/us/en/site/header/master。
• 將原則設定為「頁面頁首」並確保「預設元素」設為「header」。在下一章，CSS 會針對 header 元素進行設定。

新增​ 體驗片段 ​元件，放在範本底部作為​ 頁尾。

• 設定元件以便指向 /content/experience-fragments/wknd/us/en/site/footer/master。
• 將原則設定為「頁面頁尾」並確保「預設元素」設為「footer」。在下一章，CSS 會針對 footer 元素進行設定。

鎖定在初次建立範本時所包含的​ 主要 ​容器。

• 將原則設定為「頁面主要內容」並確保「預設元素」設為「main」。在下一章，CSS 會針對 main 元素進行設定。

新增​ 影像 ​元件到​ 主要 ​容器。

• 將​ 影像 ​元件解除鎖定。

在主要容器中的​ 影像 ​元件之下，新增​ 階層連結 ​元件。

• 為​ 階層連結 ​元件建立一個原則，名為「文章頁面 - 階層連結」。將「導覽開始層級」設為「4」。

在​ 階層連結 ​元件之下以及在​ 主要 ​容器內，新增​ 容器 ​元件。此元件可以用作範本的​ 元件容器。

• 解除鎖定​ 內容 ​容器。
• 將原則設定為「頁面內容」。

在​ 內容容器 ​之下新增另一個​ 容器 ​元件。此元件可用作範本的​ 側邊欄 ​容器。

• 解除鎖定​ 側邊欄 ​容器。
• 建立一個原則，名為「文章頁面 - 側邊欄」。
• 設定「WKND 網站專案 - 內容」之下的「允許元件」，以便包含：按鈕、下載、影像、清單、分隔符號、社交媒體分享、文字 ​和​ 標題。

更新頁面根容器的原則。這是範本最外層的容器。將原則設定為「頁面根目錄」。

• 在「容器設定」下，將「版面」設為「回應式格線」。

啟動​ 內容容器 ​的版面模式。將控制點從右拖到左，並將容器縮小至八欄寬度。

啟動​ 側邊欄容器 ​的版面模式。將控制點從右拖到左，並將容器縮小至四欄寬度。接著把左側控制點從左往右拖曳一欄，讓容器變成三欄寬度並與​ 內容容器 ​保留一欄空隙。

開啟行動模擬器並切換到行動中斷點。再次啟動版面模式，讓​ 內容容器 ​和​ 側邊欄容器 ​變成全頁的寬度。這樣做會讓容器在行動中斷點垂直堆疊。

更新​ 內容容器 ​中​ 文字 ​元件的原則。

• 將原則設定為「內容文字」。
• 在「外掛程式 > 段落樣式」下，選取「啟用段落樣式」並確保已啟用「引述區塊」。

切換到​ 初始內容 ​模式。

將​ 標題 ​元件新增到​ 內容容器。此元件可用作文章標題。若此元件留空，會自動顯示目前頁面的標題。

在第一個標題元件下方新增第二個​ 標題 ​元件。

• 使用文字「作者」來設定元件。這是文字預留位置。
• 將類型設定為「H4」。

在​ 作者 ​標題元件下方新增​ 文字 ​元件。

將​ 標題 ​元件新增到​ 側邊欄容器。

• 使用文字「分享這個故事」來設定元件。
• 將類型設定為「H5」。

在​ 分享這個故事 ​標題元件下方，新增​ 社交媒體分享 ​元件。

在​ 社交媒體分享 ​元件下方新增​ 分隔符號 ​元件。

在​ 分隔符號 ​元件下方新增​ 下載 ​元件。

在​ 下載 ​元件下方新增​ 清單 ​元件。

更新範本的​ 初始頁面屬性。

• 在「社交媒體 > 社交媒體分享」之下，勾選「Facebook」和「Pinterest」

導覽至 http://localhost:4502/libs/wcm/core/content/sites/templates.html/conf/wknd，可在範本控制台中檢視範本

啟用 ​文章頁面範本。

編輯文章頁面範本的屬性並上傳以下縮圖，以便迅速確認使用文章頁面範本建立的頁面：

下載範例內容套件 WKND-PagesTemplates-Content-Assets.zip。

使用封裝管理員在 http://localhost:4502/crx/packmgr/index.jsp 上傳並安裝內容套件

更新網頁變化版本範本，這是在 http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html 的體驗片段使用的範本

• 更新範本上​ 容器 ​元件的原則。
• 將原則設定為「XF Root」。
• 在「允許的元件」下，選取元件群組「WKND 網站專案 - 結構」，以便包含​ 語言導覽、導覽 ​和​ 快速搜尋 ​元件。

開啟在以下位置轉譯頁首的體驗片段：http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html

設定片段的根​ 容器。這是最外層的​ 容器。

• 將「版面」設為「回應式格線」

在​ 容器 ​上方新增 WKND 深色標誌 ​的影像。該標誌包含在上一步安裝的封裝中。

• 將 WKND 深色標誌 ​的版面修改為​ 兩 ​欄寬。將控制點從右往左拖曳。
• 設定標誌的「替代文字」為「WKND 標誌」。
• 設定標誌的「連結」至 /content/wknd/us/en，即首頁。

設定已經放置在頁面上的​ 導覽 ​元件。

• 將「排除根層級」設定為「1」。
• 將「導覽結構深度」設定為「1」。
• 將​ 導覽 ​元件的版面修改為​ 八 ​欄寬。將控制點從右往左拖曳。

移除​ 語言導覽 ​元件。

將​ 搜尋 ​元件的版面修改為​ 兩 ​欄寬。將控制點從右往左拖曳。現在所有元件應該在同一列上水平對齊。

開啟在以下位置轉譯頁首的體驗片段：http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html

設定片段的根​ 容器。這是最外層的​ 容器。

• 將「版面」設為「回應式格線」

在​ 容器 ​上方新增 WKND 淺色標誌 ​的影像。該標誌包含在上一步安裝的封裝中。

• 將 WKND 淺色標誌 ​的版面修改為​ 兩 ​欄寬。將控制點從右往左拖曳。
• 設定標誌的「替代文字」為「WKND 標誌淺色」。
• 設定標誌的「連結」至 /content/wknd/us/en，即首頁。

在標誌下方新增​ 導覽 ​元件。設定​ 導覽 ​元件：

• 將「排除根層級」設定為「1」。
• 取消勾選「收集所有子頁面」。
• 將「導覽結構深度」設定為「1」。
• 將​ 導覽 ​元件的版面修改為​ 八 ​欄寬。將控制點從右往左拖曳。

導覽至 Sites 控制台，位於 http://localhost:4502/sites.html/content/wknd/us/en/magazine。

在「WKND > US > EN > 雜誌」之下建立一個頁面。

• 選擇​ 文章頁面 ​範本。
• 在「屬性」之下，將「標題」設為「洛杉磯滑板場終極指南」
• 將「名稱」設定為「guide-la-skateparks」

將「作者」標題用文字「Stacey Roswells 著」取代。

更新​ 文字 ​元件以便包含可填入文章中的段落。您可以使用以下文字檔案當作文案： la-skate-parks-copy.txt。

新增另一個​ 文字 ​元件。

• 更新元件以便包含引言：「洛杉磯是最適合滑行炫技的地方。」
• 在全螢幕模式下編輯 RTF 編輯器並修改上述引言，以便使用​ 引述區塊 ​元素。

繼續填入文章的正文以和模型相符。

設定​ 下載 ​元件以便使用文章的 PDF 版本。

• 在「下載 > 屬性」之下，按一下「從 DAM 資產取得標題」核取方塊。
• 將「說明」設定為「閱讀全文報導」。
• 將「動作文字」設定為「下載 PDF」。

設定​ 清單 ​元件。

• 在「清單設定 > 清單建置基礎」之下，選取「子頁面」。
• 將「主版頁面」設為「/content/wknd/us/en/magazine」。
• 在「項目設定」之下，勾選「連結項目」再勾選「顯示日期」。

開啟 CRXDE-Lite 並使用導覽樹狀結構導覽至 /content/wknd/us/en/magazine/guide-la-skateparks。

按一下 la-skateparks 頁面下方的 jcr:content 節點並檢視屬性：

注意 cq:template 的值，其指向先前建立的文章頁面範本 /conf/wknd/settings/wcm/templates/article-page。

亦請注意 sling:resourceType的值，指向 wknd/components/page。這是由 AEM 專案原型建立的頁面元件，負責根據範本轉譯頁面。

展開 jcr:content 下方的 /content/wknd/us/en/magazine/guide-la-skateparks/jcr:content 節點並檢視節點階層：

您應該可以大致將每個節點對應到所製作的元件。您可以檢查前置詞為 container 的節點，找出所使用的不同的版面容器。

接下來檢查 /apps/wknd/components/page 之下的頁面元件。檢視 CRXDE Lite 中的元件屬性：

頁面元件下方只有兩個 HTL 指令碼，customfooterlibs.html 和 customheaderlibs.html。這個元件是如何轉譯頁面？

sling:resourceSuperType 屬性指向 core/wcm/components/page/v2/page。此屬性允許 WKND 的頁面元件繼承​ 所有 ​核心元件頁面元件的功能。這是所謂的 Proxy 元件模式的第一個範例。如需更多資訊，請參閱這裡。

檢查 WKND 元件中的另一個元件，即來自 /apps/wknd/components/breadcrumb 的 Breadcrumb 元件。請注意，您可以找到相同的 sling:resourceSuperType 屬性，但這次其指向 core/wcm/components/breadcrumb/v2/breadcrumb。這是使用 Proxy 元件模式來包含核心元件的另一個範例。事實上，WKND 程式碼基底中所有元件都是 AEM 核心元件的 Proxy (自訂示範 HellowWorld 元件除外)。在編寫自訂程式碼​ 之前，儘可能重複使用核心元件的功能，是最佳做法。

接下來使用 CRXDE Lite 檢查位在 /libs/core/wcm/components/page/v2/page 的核心元件頁面：

請注意，此頁面下方包含許多指令碼檔案。核心元件頁面包含許多功能。此功能會拆分成多個指令碼，使維護更輕鬆，可讀性也更高。開啟 page.html 並搜尋 data-sly-include，即可追蹤 HTL 指令碼的內容：

<!--/* /libs/core/wcm/components/page/v2/page/page.html */-->
<!DOCTYPE HTML>
<html data-sly-use.page="com.adobe.cq.wcm.core.components.models.Page" lang="${page.language}"
    data-sly-use.head="head.html"
    data-sly-use.footer="footer.html"
    data-sly-use.redirect="redirect.html">
    <head data-sly-call="${head.head @ page = page}"></head>
    <body class="${page.cssClassNames}"
        id="${page.id}"
        data-cmp-data-layer-enabled="${page.data ? true : false}">
        <script data-sly-test.dataLayerEnabled="${page.data}">
        window.adobeDataLayer = window.adobeDataLayer || [];
        adobeDataLayer.push({
            page: JSON.parse("${page.data.json @ context='scriptString'}"),
            event:'cmp:show',
            eventInfo: {
                path: 'page.${page.id @ context="scriptString"}'
            }
        });
        </script>
        <sly data-sly-test.isRedirectPage="${page.redirectTarget && (wcmmode.edit || wcmmode.preview)}"
            data-sly-call="${redirect.redirect @ redirectTarget = page.redirectTarget}"></sly>
        <sly data-sly-test="${!isRedirectPage}">
            <sly data-sly-include="body.skiptomaincontent.html"></sly>
            <sly data-sly-include="body.socialmedia_begin.html"></sly>
            <sly data-sly-include="body.html"></sly>
            <sly data-sly-call="${footer.footer @ page = page}"></sly>
            <sly data-sly-include="body.socialmedia_end.html"></sly>
        </sly>
    </body>
</html>

將 HTL 拆分為多個指令碼的另一個原因，是為了讓 Proxy 元件覆寫個別指令碼以實施自訂商業邏輯。建立 HTL 指令碼 customfooterlibs.html和 customheaderlibs.html 具有明確的目的，就是要由實施中的專案覆寫。

閱讀這篇文章，您便可以更加了解可編輯的範本如何影響內容頁面的轉譯。

檢查另一個核心元件，例如位於 /libs/core/wcm/components/breadcrumb/v2/breadcrumb 的階層連結。檢視 breadcrumb.html 指令碼以了解最終如何產生階層連結元件的標記。

在 VSCode 中開啟 aem-guides-wknd 專案。

在專案總管中展開 ui.content 模組。展開 src 資料夾並導覽至 /conf/wknd/settings/wcm/templates。

用右鍵按一下 templates 資料夾並選取「從 AEM 伺服器匯入」：

應該匯入 article-page，也應該更新 page-content、xf-web-variation 範本。

重複上述步驟匯入內容，但從 /conf/wknd/settings/wcm/policies 中選取「原則」資料夾。

檢查來自 filter.xml 的 ui.content/src/main/content/META-INF/vault/filter.xml 檔案。

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/conf/wknd" mode="merge"/>
    <filter root="/content/wknd" mode="merge"/>
    <filter root="/content/dam/wknd" mode="merge"/>
    <filter root="/content/experience-fragments/wknd" mode="merge"/>
</workspaceFilter>

filter.xml 檔案負責識別與封裝一起安裝的節點之路徑。請注意每個篩選器上的 mode="merge"，表示現有內容不會被修改，只會增加新內容。由於內容作者可能會更新這些路徑，因此務必確保程式碼部署​ 不會 ​覆寫內容。關於使用篩選器元素的詳細資訊，請參閱 FileVault 文件。

比較 ui.content/src/main/content/META-INF/vault/filter.xml 和 ui.apps/src/main/content/META-INF/vault/filter.xml 來了解每個模組管理的不同節點。