教學課程：將自訂頁面配置至網站

2025-03-05

使用頁面工作區建立新網頁時，您可以選擇提供的頁面配置。在某些情況下，您可能需要建立自訂頁面版面配置來以特定格式顯示資訊或提供專門的使用者介面。

在本教程中，您將學習如何使用 Liquid 建立自訂頁面版面配置。

我們的範例情境是建立一個兩列範本，其中主網站功能表作為左側導覽，頁面內容作為右側導覽。

以下是提供自訂頁面版面配置所建立的步驟和資產：

我們將使用自訂程式碼建立一個通用的基礎網頁範本來建立基本的頁面版面配置。
我們會建立包含其他程式碼的第二個網站範本，以示範網站範本的模組化功能。
我們還將建立一個參考網頁範本的頁面範本記錄，該範本設定了頁面版面配置在網站上的呈現方式。
最後，我們將使用自訂頁面版面配置來建立網頁。

必要條件

Power Pages 訂閱或試用。點這裡試用 Power Pages
Power Pages 網站已建立。建立 Power Pages 網站
HTML 和 Liquid 基礎知識

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

首先，建立您的網頁範本並編寫Liquid範本程式碼。您可能會在未來的範本中重複使用此範本的一些常見元素。因此，建立一個可以使用特定範本進行擴充的通用基礎範本。您的基本範本提供麵包屑連結、頁面標題/頁眉，並定義您的兩列版面配置。

移至 Power Pages。
在設計工作室中，選擇 ...，然後選取入口網站管理。使用入口網站管理應用程式建立 Web 範本記錄並輸入您的自訂程式碼。
在入口網站管理應用程式中，捲動至內容區段並選取網站範本。
從使用中網站範本畫面中，選取新增。
將網頁範本命名為雙列版面配置。

將以下程式碼貼到來源欄位中：

<div class=container>
  <div class=page-heading>
    <ul class=breadcrumb>
      {% for crumb in page.breadcrumbs -%}
        <li>
          <a href={{ crumb.url }}>{{ crumb.title }}</a>
        </li>
      {% endfor -%}
      <li class=active>{{ page.title }}</li>
    </ul>
    <div class=page-header>
      <h1>{{ page.title }}</h1>
    </div>
  </div>
  <div class=row>
    <div class=col-sm-4 col-lg-3>
      {% block sidebar %}{% endblock %}
    </div>
    <div class=col-sm-8 col-lg-9>
      {% block content %}{% endblock %}
    </div>
  </div>
</div>

選取儲存。

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

我們正在建立一個從關聯網頁讀取導覽記錄的網頁範本 (見下文)。我們還擴展了上一步中建立的基本範本。建立進階網站時，可以使用網站範本做為可重複使用的元件。

在入口網站管理應用程式中，捲動至內容區段並選取網站範本。
從使用中網站範本畫面中，選取新增。
將網頁範本命名為 Weblinks Left Navigation。

帶有導覽和內容的自訂網頁範本的螢幕擷取畫面。

注意程式碼如何使用 Liquid extends 關鍵字來加入基底配置範本。

{% extends 'Two Column Layout' %}

{% block sidebar %}
  {% assign weblinkset_id = page.adx_navigation.id %}
  {% if weblinkset_id %}
    {% assign nav = weblinks[page.adx_navigation.id] %}
    {% if nav %}
      <div class=list-group>
        {% for link in nav.weblinks %}
          <a class=list-group-item href={{ link.url }}>
            {{ link.name }}
          </a>
        {% endfor %}
      </div>
    {% endif %}
  {% endif %}
{% endblock %}

{% block content %}
  <div id="mainContent" class = "wrapper-body" role="main">
    {% include 'Page Copy' %}
  </div>
{% endblock %}

步驟 3：以網站範本為基礎建立新的頁面範本

這一步驟根據上一個步驟建立的網頁範本建立一個新的頁面範本。自訂頁面版面配置需要頁面範本作為建立新網頁時可以選擇的選項。

在入口網站管理應用程式中，捲動至網站區段並選取頁面範本。
從活動頁面範本畫面中，選擇新建。

填寫欄位：

欄位	數值
姓名	輸入名稱。
網站	選擇套用該主題的網站。若要顯示可用選項的清單，請將遊標放在該欄位中並按下鍵盤上的回車鍵。
類型	選擇網站範本
Web 範本	選取網頁連結左側導覽 (或任何您命名的網頁範本)。
使用網站頁首與頁尾	已核取。
預設值	已取消核取。
資料表名稱	未選取任何項目。
描述	頁面範本的描述。