设置
前提条件
在开始本教程之前,您需要以下条件:
- HTML、CSS 和 JavaScript 的基本知识
- 对 AMP 核心概念的基本了解(请参阅 “将您的 HTML 转换为 AMP” 教程)
- 您选择的浏览器
- 您选择的文本编辑器
设置您的开发环境
步骤 1. 下载代码
-
下载教程代码,该代码以 zip 文件的形式从以下 URL 压缩:/static/files/tutorials/amp-pets-story.zip
-
解压 zip 文件的内容。在 amp-pets-story 目录中,有我们将用于创建故事的图像、视频、音频和数据文件。pets.html 文件是我们故事的起点。该故事的完整版本可以在 pets-completed.html 文件中找到。
步骤 2. 运行示例页面
为了测试我们的示例 Web Story,我们需要从 Web 服务器访问这些文件。有几种方法可以创建用于测试的临时本地 Web 服务器。这里有一些选项,选择最适合您的一个
设置本地 Web 服务器后,通过访问以下 URL,了解本教程结束时我们完成的 Web Story 将是什么样子
https://127.0.0.1:8000/pets-completed.html
重要提示 – 确保 URL 从
localhost
提供服务,否则 Web Story 可能无法正确加载,并且您可能会遇到类似于 “source” “must start with "https://" or "//" or be relative and served from either https or from localhost.”
的错误。点击浏览完成的故事,了解我们将要创建的内容。
-
撰写者 @bpaduch