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

文章
03/16/2023

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

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

我們的範例案例是要建置簡單的兩欄範本，以主要網站功能表為左側導覽，並讓頁面內容位於右側。

要建立來提供自訂頁面配置的步驟和資產如下：

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

先決條件

Power Pages 訂閱或試用。在這裡取得 Power Pages 試用版。
Power Pages 網站已建立。建立 Power Pages 網站。
HTML 和 Liquid 的基本知識。

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

首先，我們會建立網站範本並撰寫 Liquid 範本程式碼。我們可能會在未來的範本中重複使用此範本中一些常用的元素。因此，我們會建立要使用特定範本來擴充的通用基底範本。基底範本會提供導覽路徑連結、頁面標題/標頭，並定義兩欄配置。

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

在來源欄位中貼上以下程式碼。

兩欄版面配置 (網站範本)

<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：建立新的網站範本來擴充基底配置範本

我們將會建立要從相關網頁讀取導覽記錄的網頁範本 (見下文)。還會擴充上一個步驟中建立的基底範本。建立進階網站時，可以使用網站範本做為可重複使用的元件。

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

將網站範本命名為網頁連結左側導覽。

包含導覽和內容的自訂網站範本。

注意程式碼如何使用 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：以網站範本為基礎建立新的頁面範本

在此步驟中，我們會建立以前一個步驟所建立範本為基礎的新頁面範本。必須有頁面範本，才能讓自訂頁面配置成為可在建立新網頁時選取的選項。

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

填入欄位。

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