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

2025-03-05

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

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

我们的示例方案是创建一个两列模板，主网站菜单作为左侧导航，页面内容位于右侧。

以下是创建自定义页面布局的步骤和资产：

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

先决条件

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

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

首先，创建网页模板并编写 Liquid 模板代码。您很可能会在以后的模板中重复使用该模板的一些常用元素。因此，请创建一个通用的基础模板，然后用您的特定模板对其进行扩展。基础模板提供痕迹导航链接、页面标题/页眉，并定义双列布局。

转到 Power Pages。
在设计工作室中，选择 ...，然后选择门户管理。使用门户管理应用创建 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 模板屏幕中，选择新建。
将网页模板命名为 Weblinks 左侧导航。

包含导航和内容的自定义 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 模板
Web 模板	选择 Web 链接左侧导航（或您为 Web 模板命名的任何名称）。
使用网站页眉和页脚	已选中。
为默认值	已取消选中。
表名称	尚未选择。
说明	页面的描述。