教程：将自定义页面布局设置添加到您的站点

项目
03/16/2023

当您使用“页面”工作区创建新网页时，您可以选择提供的页面布局。在某些情况下，您可能希望创建自定义页面布局，从而以某种格式显示信息或提供专门的用户界面。

在本教程中，您将了解如何使用 Liquid 创建自定义页面布局。

我们的示例方案是构建简单的两列式模板，该模板使用主站点菜单作为左侧导航，并在右侧显示页面内容。

此处列出了为提供自定义页面布局而创建的以下步骤和资产：

我们将创建一个包含自定义代码的常见基本 Web 模板以建立基本页面布局。
我们将创建第二个包含其他代码的 Web 模板，以演示 Web 模板的模块化功能。
我们还将创建一个引用 Web 模板的页面模板记录，该模板将配置页面布局在站点上的呈现方式。
最后，我们将使用自定义页面布局创建一个网页。

先决条件

Power Pages 订阅或试用。在此获取免费的 Power Pages 试用版。
已创建 Power Pages 站点。创建 Power Pages 站点。
HTML 和 Liquid 的基本知识。

步骤 1：创建 Web 模板并编写 Liquid 模板代码

首先，我们将创建 Web 模板并编写 Liquid 模板代码。我们可能在将来的模板中重用此模板的部分通用元素。因此，我们将创建可以使用我们的特定模板进行扩展的通用基本模板。我们的基本模板将提供痕迹链接和我们的页面标题，并定义双列式布局。

转到 Power Pages。
在设计工作室中，选择 ...，然后选择门户管理。您需要使用“门户管理”应用创建 Web 模板记录并输入自定义代码。
在门户管理应用中，滚动到内容部分并选择 Web 模板。
在可用 Web 模板屏幕中，选择新建。
将 Web 模板命名为双列式布局。

将以下代码粘贴到来源字段中。

两列布局（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：创建用于扩展基本布局模板的新 Web 模板

我们将创建一个将从关联网页读取导航记录的 Web 模板（参见下文）。我们还将扩展在上一步中创建的基本模板。在创建高级站点时，Web 模板可以用作可重用组件。

在门户管理应用中，滚动到内容部分并选择 Web 模板。
在可用 Web 模板屏幕中，选择新建。

将 Web 模板命名为 Web 链接左侧导航。

包含导航和内容的自定义 Web 模板。

请注意代码如何使用 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 模板创建新的页面模板

在此步骤中，我们将创建基于之前步骤中创建的 Web 模板的新页面模板。我们的自定义页面布局需要页面模板才能作为您在创建新网页时可以选择的选项。

在门户管理应用中，滚动到网站部分并选择页面模板。
在可用见面模板屏幕中，选择新建。

填写字段。

字段	价值
Name	键入名称。
网站	选择主题将应用于的网站。将光标放在该字段中，然后按键盘上的 Enter 以显示可用选项列表。
类型	选择 Web 模板
Web 模板	选择 Web 链接左侧导航（或您为 Web 模板命名的任何名称）。
使用网站页眉和页脚	已选中。
为默认值	已取消选中。
表名称	尚未选择。
说明	页面的描述。