使用 Liquid 和網站範本頁面範本建立自訂頁面範本

在此範例中,我們將使用 Liquid 和網站範本頁面範本建立自訂頁面範本。 其他資訊: 使用網站範本儲存來源內容
我們的目標是建置簡單的兩欄範本,使用網頁連結組做為左側導覽,頁面內容則位於右邊。 看起來像這樣:

自訂頁面範本

步驟 1:建立網站範本並撰寫 Liquid 範本程式碼

首先,我們會建立網站範本並撰寫 Liquid 範本程式碼。 我們可能會在未來的範本中重複使用此範本中一些常用的元素。 因此,我們建立常用基底範本,然後使用特定範本將它延伸。 我們的基底範本將提供導覽路徑標示連結和頁面標題/標頭,以及定義一欄配置:

網站範本一欄配置

提示

閱讀有關使用 block 和 extends 標籤的範本繼承:範本標籤

步驟 2:建立新的網站範本來擴充基底配置範本

使用與導覽連結的目前頁面相關的導覽網頁連結組,建立新的網站範本來擴充基底配置範本。

網站範本網頁連結左導覽配置

提示

讓自己熟悉如何使用 weblinks 物件載入網頁連結組。

步驟 3:建立新的網站範本頁面範本,它會使用網站範本

頁面範本網頁連結左導覽配置

現在只剩下建立網頁,它會使用我們的頁面範本,並且擁有關聯的網頁連結組,這樣就完成了。

含左導覽的網頁

請參閱

建立進階入口網站範本
建立自訂頁面範本用來轉譯 RSS 摘要
轉譯與目前頁面相關的實體清單
轉譯網站頁首和主要導覽列
最多轉譯三個頁面階層,使用混合導覽