格式指南和教程
指南和教程以 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
格式。
筛选部分
有些文档可能与多种 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]
```html``` [/example] Hello World
This is the cover page of this story.
First Page
This is the first page of this story.
来使端点网址绝对化。 ```html ``` [/example]
和
在示例中转义 mustache 模板: -
Written by @CrystalOnScript