练习 - 编辑页面

已完成

本动手实验旨在使用 Power Pages 设计工作室创建网页和编辑源代码。

在这些练习结束时，您将能够：

• 打开 Power Pages 设计工作室以编辑门户。
• 使用标准模板创建新页面。
• 查看页面的源代码。
• 直接添加自定义 HTML 代码。

对于本练习，您需要具备以下条件：

• 在您的环境中预配了 Power Pages 站点。 如果没有可用 Power Pages 站点，请按照创建和管理 Power Pages 站点说明来创建一个站点。

应用场景

为了增强访问者的网站体验，有时需要向页面添加自定义 HTML 内容。 在本练习中，您将添加用于创建可关闭警报的 HTML 代码。 该代码还将包含一个用 Liquid 语言编写的小片段，用于为访问者创建动态问候语。

简要步骤

1. 在 Power Pages 设计工作室中打开门户。
2. 创建新的登陆网页。
3. 编辑页面，添加间隔符和内容占位符，然后添加 HTML 代码。
4. 保存页面并浏览站点以查看结果。

详细步骤

启动 Power Pages 设计工作室

1. 登录到 Power Pages。

2. 使用右上角的环境选择器，选择目标环境。

3. 选择您的站点，然后选择编辑启动设计工作室。

4. 确保选定了页面工作区。

   

创建网页

1. 选择 + 页面按钮。
2. 输入页面名称。
3. 选择登陆页标准布局，然后按添加。

编辑页面

1. 选择页面上的第一个按钮。 按加号 (+)，然后选择分隔条元素。 该命令将在我们的自定义内容之前添加小空间。

2. 选择分隔条，按加号 (+)，然后选择文本元素。 该命令将为我们的自定义内容添加一个占位符。

3. 页面应如下所示：

   

4. 按编辑代码，在 Web 版 Visual Studio Code 编辑器中打开页面。

5. 出现提示时，选择打开 Visual Studio Code：

6. 这时将打开 Web 版 Visual Studio Code 的新窗口或选项卡。 找到之前用 Enter text 创建的文本元素：

7. 复制以下代码并将其粘贴到页面源代码中，替换 <p>Enter text</p> 内容：

   <div role="alert" class="alert alert-info alert-dismissible">
     <button type="button" data-bs-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
     <strong>Happy <span>{{ now | date: 'MMMM' }}</span>!</strong>
     Get your unlimited free education at 
     <a href="https://learn.microsoft.com/">Microsoft Learn</a>
   </div>
   

8. 内容现在应如下所示：

9. 按 Ctrl-S（在 macOS 上为 ⌘-S）保存文件。

10. 切换到设计工作室窗口。 按同步按钮同步编辑器，并在画布上显示更新的内容：

11. 更改将显示在设计工作室画布上。 按右上角的预览按钮，然后选择桌面。

12. 此时将打开带有可关闭警报的自定义页面。

13. 检查问候语是否包含当前月份。

14. 按叉号 (x) 图标关闭警报。

继续