下一步

练习 - 构建侧导航

15 分钟

本动手实验旨在设置网页布局并为其他网页和外部链接添加侧面菜单导航。

学习目标

这些练习旨在帮助您学习如何：

识别和修改辅助网站导航。
使用门户管理应用向现有 Web 链接集添加新 Web 链接。
使用 Power Pages 设计工作室创建包含嵌入式导航菜单的网页。

先决条件

在本练习中，您需要在环境中设置以下参数：

已预配的 Power Pages 网站。如果没有可用的网站，请按照使用 Power Pages 创建站点说明创建网站。
Power Pages 设计工作室访问权限。

注意

本练习假定使用一个初学者布局网站模板来预配网站，但任何具有多个页面的初学者模板都可以使用。

应用场景

贵组织已预配和配置 Power Pages 网站。您希望开始修改网站导航，以便快速访问常用信息。

为了修改网站导航以满足组织要求，您需要完成以下任务：

使用门户管理应用修改现有辅助导航 Web 链接集，在其中添加现有网页和外部链接。
使用 Power Pages 设计工作室新建页面。
向新页面添加两列组件。
修改页面源代码以引用辅助导航。

更新 Web 链接集

要更新 Web 链接集，请按照以下步骤操作：

登录 Power Pages。
在右上角选择正确的环境。
选择网站的省略号 (...) 菜单，然后选择门户管理。请勿关闭 Power Pages 主窗口。
查找 Web 链接集行。
选择并打开名为辅助导航的 Web 链接集行。
如果该行不存在，请选择 + 新建创建一个名为辅助导航的新行。
选择链接选项卡。
选择新建 Web 链接按钮。
输入以下信息：
- 名称 - 产品 A
- Web 链接集 - 辅助导航（应已选定）
- 发布状态 - 已发布
- 页面 - 子页面 1
注意

本练习假定使用一个初学者布局网站模板来预配网站。如果使用其他模板，网站可能不包括子页面 1 页面。您可以选择任意页面创建链接。
选择保存并关闭。
再次选择新建 Web 链接按钮。
输入以下信息：
- 名称 - 产品 B
- Web 链接集 - 辅助导航（应已选定）
- 发布状态 - 已发布
- 页面 - 子页面 2
选择保存并关闭。
再次选择新建 Web 链接按钮。
输入以下信息：
- 名称 - Microsoft
- Web 链接集 - 辅助导航（应已选定）
- 发布状态 - 已发布
- 外部 URL - https://www.microsoft.com
选择保存并关闭。

创建网页

要创建网页，请按照以下步骤操作：

切换到 Power Pages 主窗口。
选择编辑以打开 Power Pages 设计工作室。
选择页面工作区，然后选择 + 页面。
在“新建页面”对话框中，完成以下操作：
1. 输入产品链接作为页面名称。
2. 选择从空白开始布局。
3. 选择添加。

要添加列组件并添加导航，请按照以下步骤操作：

选择编辑代码以启动 Visual Studio Code 编辑器。
在代码编辑器中，查找最内层的 <div> 元素。

在行中添加 {% include "weblink_list_group" weblink_set_name: "Secondary Navigation" %} Liquid 标记，使其类似于以下示例：

<div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;">
  {% include "Weblink List Group" weblink_set_name: "Secondary Navigation" %}
</div>

关闭 Visual Studio Code 编辑器选项卡。在出现提示后选择保存。
选择同步以同步所做的更改。
选择预览 > 桌面。应出现一个包含网页链接和外部 URL 的页面。

注意

列表和窗体等许多网页组件由 Liquid 标记表示。在本练习中，include 标记引用名为 Web 链接列表组 的 Web 模板，该模板描述辅助导航的呈现方式。有关详细信息，请参阅 Liquid 概览。

继续