创建自定义页面模板

项目
03/16/2023

备注

从 2022 年 10 月 12 日起，Power Apps 门户更名为 Power Pages。详细信息请参阅：Microsoft Power Pages 现已正式发布（博客）
不久后我们将迁移 Power Apps 门户文档并将其与 Power Pages 文档合并在一起。

在此示例中，我们将使用 Liquid 和基于 Web 模板的页面模板创建自定义页面模板。详细信息：使用 Web 模板存储源内容。我们的目标是构建简单的两列式模板，该模板使用 Web 链接集作为左侧导航，并在右侧显示页面内容。

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

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

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 链接集。

Weblinks 左侧导航（Web 模板）

{% 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 class=page-copy>
    {{ page.adx_copy }}
  </div>
{% endblock %}