AMP

格式指南和教程

指南和教程以 Markdown 形式提交,附带前页和短代码格式。

文档位置

可从 amp.devAMPHTML 这两个仓库中提取关于 amp.dev 的内容。组件下的所有参考文档均从 AMPHTML 的内置组件或扩展组件中提取。

此外,还有一些从 AMPHTML 导入到 amp.dev 中的其他文档。此文件中列出了这些文档。不要在 amp.dev 仓库中更新这些文档——您的变更将在后续构建中被覆盖!

前页

前页位于每个指南和教程的顶部。

示例:

$title: Include Custom JavaScript in AMP Pages
$order: 7
formats:
  - websites
author: CrystalOnScript
contributors:
  - fstanis
description: For web experiences requiring a high amount of customization AMP has created amp-script, a component that allows the use of arbitrary JavaScript on your AMP page without affecting the page's overall performance.
$title 将显示在目录中的文档标题。除“AMP”和其他专有名词外,将第一个单词的首字母大写。使用与号 & 代替单词 and
$order 定义文档在目录中的显示位置。您可能需要编辑其他文档中的 $order 才能使其显示在正确的位置。
formats 列出与文档相关的 AMP 体验。如果您的文档与 AMP 网站和 AMP 故事有关,但与 AMP 广告和 AMP 电子邮件无关,则您的前页将如下所示:yaml formats: - websites - stories
author 作者是您!使用您的 GitHub 用户名。
contributors 列出为您的文档做出贡献的任何人。这是一个可选字段。
description 撰写您的指南或教程的简短说明。这有助于搜索引擎优化,让您的工作成果惠及有需要的人!
tutorial 向网站的前页中添加 tutorial: true,以便在它旁边添加教程图标。教程位于目录中相应部分的底部。

短代码

有关短代码及其用法的列表,请查看 GitHub 上的 documentation.md

图片

amp.dev 是使用 AMP 构建的!因此,我们的图片必须符合 amp-img 标准。构建过程使用以下语法将图像转换为正确的 amp-img 格式。

Image of basic amp script tutorial starter app

筛选部分

有些文档可能与多种 AMP 格式相关,但某些格式可能需要进一步说明或与其他格式不相关的信息。您可以通过将它们封装到以下短代码中来筛选这些部分。

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites"]
This is only visible for [websites](?format=websites).
[/filter]

[filter formats="websites, email"]
This is visible for [websites](?format=websites) & [email](?format=email).
[/filter]

[filter formats="stories"]
This is visible for [stories](?format=stories).
[/filter]

提示

您可以通过将文本封装到以下短代码中来添加提示和标注:

[tip type="default"]
Default tip
[/tip]

[tip type="important"]
Important
[/tip]

[tip type="note"]
Note
[/tip]

[tip type="read-on"]
Read-on
[/tip]

代码段

将代码段放置在三个反引号组中,在第一组反引号末尾指定语言。

```html
  // code sample

wzxhzdk:1



wzxhzdk:2



警告:内嵌示例直接嵌入到网页中。如果网页上已经使用了组件(例如 `amp-consent`),则可能导致冲突。

### Top-Frame 预览

每当需要在 `
    
    
      

Hello AMP

``` [/example]
实际效果如下: [example preview="top-frame" playground="true"] wzxhzdk:3
在 Playground 中打开此代码段
### AMP 故事 将 `preview="top-frame"` 与 `orientation="portrait"` 一起使用来预览 AMP 故事。
```html

Hello World

This is the cover page of this story.

First Page

This is the first page of this story.

``` [/example]
实际效果如下: [example preview="top-frame" orientation="portrait" playground="true"] wzxhzdk:4
在 Playground 中打开此代码段
### AMP 电子邮件的绝对网址 注意我们如何在嵌入到 AMP 电子邮件中时使用 来使端点网址绝对化。
```html
``` [/example]
实际效果如下: [example preview="top-frame" playground="true"] wzxhzdk:5
在 Playground 中打开此代码段
### 转义 mustache 模板 下面是一个使用远程端点的 `top-frame` 示例。需要使用 在示例中转义 mustache 模板:
```html ``` [/example]
实际效果如下: [example preview="top-frame" playground="true" imports="amp-list:0.1" template="amp-mustache:0.2"] wzxhzdk:6
在 Playground 中打开此代码段
## 链接 您可以使用标准的 markdown 链接语法链接到其他网页: wzxhzdk:7 链接到 amp.dev 上的另一个网页时,引用将是目标文件的相对文件路径。 ### 锚点 使用锚点链接到文档中的特定部分: wzxhzdk:8 在链接到不存在锚点的部分之前,请使用 `