AMP
ZH
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe Polski Tiếng việt

格式指南和教程

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

文档位置

可从 amp.dev 和 AMPHTML 这两个仓库中提取关于 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 在链接到不存在锚点的部分之前，请使用 `