頁面和範本 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

使用​ 頁面範本型別，名為​ 文章頁面 ​來建立範本。

切換至​ 結構 ​模式。

新增​ 體驗片段 ​元件，以做為範本頂端的​ Header。

• 設定元件以指向/content/experience-fragments/wknd/us/en/site/header/master。
• 將原則設定為​ Page Header，並確定​ 預設元素 ​已設定為header。 header元素在下一個章節中會以CSS作為目標。

新增​ 體驗片段 ​元件，以做為範本底部的​ 頁尾。

• 設定元件以指向/content/experience-fragments/wknd/us/en/site/footer/master。
• 將原則設定為​ 頁尾，並確定​ 預設元素 ​已設定為footer。 footer元素在下一個章節中會以CSS作為目標。

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

• 將原則設定為​ Page Main，並確定​ 預設元素 ​已設定為main。 main元素在下一個章節中會以CSS作為目標。

將​ Image ​元件新增至​ 主要 ​容器。

• 解除鎖定​ Image ​元件。

在主容器的​ Image ​元件下新增​ 階層連結 ​元件。

• 為名為​ 文章頁面 — 階層連結 ​的​ 階層連結 ​元件建立原則。 將​ 導覽開始層級 ​設定為​ 4。

在​ 階層連結 ​元件下方和​ 主要 ​容器內新增​ 容器 ​元件。 這會作為範本的​ 內容容器。

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

在​ 內容容器 ​下方新增另一個​ 容器 ​元件。 這會作為範本的​ 側邊欄 ​容器。

• 解除鎖定​ 側邊欄 ​容器。
• 建立名為​ Article Page - Side Rail ​的原則。
• 設定​ WKND Sites專案下的 ​允許的元件​ — 內容 ​以包含： 按鈕、下載、影像、清單、分隔符號、社群媒體共用、文字 ​和​ 標題。

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

• 在​ 容器設定 ​下，將​ 配置 ​設定為​ 回應式格線。

參與​ 內容容器 ​的佈局模式。 從右到左拖曳控點，並將容器縮小為八欄寬。

參與​ 側邊欄容器 ​的佈局模式。 從右到左拖曳控點，並將容器縮小為四欄寬。 然後，從左到右拖曳左側控制代碼一欄，讓容器3欄變寬，並在​ 內容容器 ​之間留下1欄間隙。

開啟行動模擬器並切換至行動中斷點。 再次使用版面配置模式，並將​ 內容容器 ​和​ 側邊欄容器 ​設為頁面的完整寬度。 這會將容器垂直棧疊在行動中斷點中。

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

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

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

將​ Title ​元件新增至​ Content容器。 這會當作文章標題。 當它留空時，它會自動顯示目前頁面的標題。

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

• 使用文字設定元件：「By Author」。 這是文字預留位置。
• 將型別設定為H4。

在​ By Author ​標題元件下方新增​ 文字 ​元件。

將​ Title ​元件新增至​ 側邊欄容器。

• 使用文字設定元件：「共用本文」。
• 將型別設定為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使用封裝管理員上傳及安裝內容封裝

更新Web Variation範本，這是在http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html用於體驗片段的範本

• 更新範本上​ Container ​元件的原則。
• 將原則設定為​ XF Root。
• 在底下，允許的元件 ​選取元件群組​ WKND Sites專案 — 結構 ​以包含​ 語言導覽、導覽 ​和​ 快速搜尋 ​元件。

開啟在http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/header/master.html轉譯標題的體驗片段

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

• 將​ 配置 ​設定為​ 回應式格線

將​ WKND深色標誌 ​新增為影像至​ 容器 ​的頂端。 標誌包含在先前步驟中安裝的套件中。

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

設定已放置在頁面上的​ Navigation ​元件。

• 將​ 排除根層級 ​設定為​ 1。
• 將​ 導覽結構深度 ​設定為​ 1。
• 將​ Navigation ​元件的配置修改為​ 8 ​欄寬。 從右到左拖曳控點。

移除​ 語言導覽 ​元件。

將​ 搜尋 ​元件的配置修改為​ 兩個 ​欄寬。 從右到左拖曳控點。 現在，所有元件應該水準對齊一列。

開啟在http://localhost:4502/editor.html/content/experience-fragments/wknd/us/en/site/footer/master.html呈現頁尾的體驗片段

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

• 將​ 配置 ​設定為​ 回應式格線

將​ WKND淺色標誌 ​新增為影像至​ 容器 ​的頂端。 標誌包含在先前步驟中安裝的套件中。

• 將​ WKND Light Logo ​的版面配置修改為​ 兩個 ​欄寬。 從右到左拖曳控點。
• 使用​ 替代文字 （WKND標誌燈）設定標誌。
• 將標誌設定為​ 連結 ​至/content/wknd/us/en首頁。

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

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

瀏覽至http://localhost:4502/sites.html/content/wknd/us/en/magazine的Sites主控台。

在​ WKND > US > EN > 雜誌 ​下方建立頁面。

• 選擇​ 文章頁面 ​範本。
• 在「屬性」下，將「標題」設定為「LA滑板公園最終指南」
• 將​ Name ​設定為"guide-la-skateparks"

將​ 由Author ​標題取代為"By Stacey Roswells"文字。

更新​ Text ​元件以包含段落以填入文章。 您可以使用下列文字檔做為復本： la-skate-parks-copy.txt。

新增其他​ 文字 ​元件。

• 更新元件以包含引述：「沒有比洛杉磯更適合清除的地方了。」
• 以全熒幕模式編輯RTF編輯器，並修改上述引號以使用​ 引號區塊 ​元素。

繼續填入文章內文以符合模型。

設定​ Download ​元件以使用文章的PDF版本。

• 在​ 下載 > 屬性 ​下方，按一下核取方塊以​ 從DAM資產取得標題。
• 將​ Description ​設為：「取得完整劇本」。
• 將​ 動作文字 ​設為：「下載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。

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

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

您應該能夠鬆散地將每個節點對應至已編寫的元件。 檢視您是否能透過檢查帶有container首碼的節點來識別所使用的不同配置容器。

接著在/apps/wknd/components/page檢查頁面元件。 以CRXDE Lite檢視元件屬性：

頁面元件下方只有兩個HTL指令碼： customfooterlibs.html和customheaderlibs.html。 這個元件如何呈現頁面？

sling:resourceSuperType屬性指向core/wcm/components/page/v2/page。 此屬性允許WKND的頁面元件繼承​ 所有 ​核心元件頁面元件的功能。 這是第一個稱為Proxy元件模式的範例。 在這裡可找到更多資訊。

Inspect是WKND元件中的另一個元件，來自/apps/wknd/components/breadcrumb的Breadcrumb元件。 請注意，可以找到相同的sling:resourceSuperType屬性，但這次它指向core/wcm/components/breadcrumb/v2/breadcrumb。 這是使用Proxy元件模式來包含核心元件的另一個範例。 事實上，WKND程式碼基底中的所有元件都是AEM核心元件的代理程式（自訂示範HelloWorld元件除外）。 最佳實務是在​ 之前 ​寫入自訂程式碼之前，儘可能重複使用核心元件的功能。

接下來，使用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是為明確用途而建立的，以便透過實作專案來覆寫。

您可以閱讀本文章🔗，深入瞭解可編輯範本如何影響內容頁面的轉譯。

Inspect是另一個核心元件，例如/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選取​ 原則 ​資料夾。

從ui.content/src/main/content/META-INF/vault/filter.xmlInspect 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，瞭解每個模組所管理的不同節點。