頁面和範本 pages-and-template

檢視 tutorial/pages-templates-start 分支來源 GitHub

$ 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. 此 header元素在下一個章節中會以CSS做為目標。

新增 體驗片段 要做為的元件 頁尾 在範本底部。

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

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

• 將原則設為 頁面主要 並確保 預設元素 設為 main. 此 main 元素在下一個章節中會以CSS做為目標。

新增 影像 元件至 主要 容器。

• 解鎖 影像 元件。

新增 階層連結 元件於 影像 元件時。

• 建立以下專案的原則： 階層連結 元件已命名 文章頁面 — 階層連結. 設定 導覽開始層級 至 4.

新增 容器 元件於 階層連結 元件和內部 主要 容器。 其作用如下 內容容器 範本的。

• 解鎖 內容 容器。
• 將原則設為 頁面內容.

新增另一個 容器 元件於 內容容器. 其作用如下 側邊欄 範本的容器。

• 解鎖 側邊欄 容器。
• 建立名為的原則 文章頁面 — 側欄.
• 設定 允許的元件 在 WKND Sites專案 — 內容 若要包含： 按鈕， 下載， 影像， 清單， 分隔符號， 社群媒體分享， 文字、和 標題.

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

• 在 容器設定，設定 版面 至 回應式格線.

參與以下專案的版面模式： 內容容器. 從右到左拖曳控點，並將容器縮小為八欄寬。

參與以下專案的版面模式： 側邊欄容器. 從右到左拖曳控點，並將容器縮小為四欄寬。 然後，從左到右拖曳左側控點一欄，讓容器3欄變寬，並在 內容容器.

開啟行動模擬器並切換至行動中斷點。 再次參與佈局模式並做出 內容容器 和 側邊欄容器 頁面的完整寬度。 這會將容器垂直棧疊在行動中斷點中。

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

• 將原則設為 內容文字.
• 在 外掛程式 > 段落樣式，檢查 啟用段落樣式 並確保 報價區塊 已啟用。

切換至 初始內容 模式。

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

新增秒 標題 第一個標題元件下的元件。

• 使用文字設定元件：「By Author」。 這是文字預留位置。
• 將型別設定為 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

更新Web變數範本，此範本為用於體驗片段的範本，位於 http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/xf-web-variation/structure.html

• 更新原則 容器 元件時。
• 將原則設為 XF根.
• 在底下， 允許的元件 選取元件群組 WKND Sites專案 — 結構 要包含 語言導覽， 導覽、和 快速搜尋 元件。

開啟在呈現標題的體驗片段 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 > 雜誌.

• 選擇 文章頁面 範本。
• 在 屬性 設定 標題 前往「洛杉磯滑板公園終極指南」
• 設定 名稱 前往「滑板公園指南」

取代 依作者 標題中包含「By Stacey Roswells」文字。

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

新增另一個 文字 元件。

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

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

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

• 在 下載 > 屬性，按一下核取方塊以 從DAM資產取得標題.
• 設定 說明 收件者：「取得完整劇本」。
• 設定 動作文字 收件者：「下載PDF」。

設定 清單 元件。

• 在 清單設定 > 使用以下專案產生清單，選取 子頁面.
• 設定 父頁面 至 /content/wknd/us/en/magazine.
• 在底下， 專案設定 check 連結專案 並勾選 顯示日期.

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

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

注意的值 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元件模式. 可以找到更多資訊 此處.

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

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

請注意，許多指令碼檔案包含在此頁面下方。 核心元件頁面包含多項功能。 此功能被分成多個指令碼，以方便維護和閱讀。 您可以透過開啟 page.html 並尋找 data-sly-include：

<!--/* /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.

Inspect 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 以瞭解每個模組所管理的不同節點。