12、利用 Web 模板和 Liquid 打造动态网页

利用 Web 模板和 Liquid 打造动态网页

1. Web 模板布局基础

Web 模板常采用两列布局，包含面包屑导航和页面标题的头部部分。以下是一个典型模板的主要结构：
- 主内容与侧边栏 ：模板定义了一个行（带有 row 类的 div ），并将其分为两列。
- 左列（主内容） ：占据较大部分（由 col - sm - 8 col - lg - 8 类指定），包含 {% block main %} ，其中会包含 Page Copy 模板，存放事件页面的主要内容。
- 右列（侧边栏） ：较小的列（由 col - sm - 4 col - lg - 4 表示），包含 {% block aside %} ，当前为空，但可用于放置额外内容，如侧边菜单或与事件详情相关的小部件。

创建新的 Web 模板时，复制现有模板并进行修改会更便捷。例如，可以选择 Layout 2 Column wide left 模板作为起点。在 Power Pages 中编辑现有模板时，从 Power Pages 工作室打开 Visual Studio 代码编辑器进行编辑会更方便。

在 Web 模板编辑器中，可以自定义网站的头部、主体和页脚。具体配置布局的方法如下：
- 自定义 ：可对元