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

重要提示：此文档不适用于您当前选择的格式网站！

amp-story

描述

一种丰富的视觉故事讲述格式。

 

必需脚本

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

Web story 是一种沉浸式、可点击且易于分享的故事讲述格式。Web story 使用 AMP 框架构建。amp-story 组件提供 AMP 的 Web story 子集。它是 Web story 的基础技术。

版本说明

版本 描述
1.0 当前版本，自 2018-07-16 起。

AMP story 格式

AMP story 是一个完整的 AMP HTML 文档，由页面组成，页面内有图层，图层内有 AMP 和 HTML 元素，如媒体、分析、文本等。


样板

以下标记是一个不错的起点或样板。复制此标记并将其保存到扩展名为 .html 的文件中。

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script
      async
      custom-element="amp-story"
      src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
    ></script>
    <title>Hello, amp-story</title>
    <link rel="canonical" href="http://example.ampproject.org/my-story.html" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >
  </head>
  <body>
    <amp-story
      standalone
      title="Hello Story"
      publisher="The AMP Team"
      publisher-logo-src="https://example.com/logo/1x1.png"
      poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
    >
      <amp-story-page id="my-first-page">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="https://example.ampproject.org/helloworld/bg1.jpg"
            width="900"
            height="1600"
            alt=""
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>Hello, amp-story!</h1>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-page id="my-second-page">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="https://example.ampproject.org/helloworld/bg2.gif"
            width="900"
            height="1600"
            alt=""
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>The End</h1>
        </amp-story-grid-layer>
      </amp-story-page>
    </amp-story>
  </body>
</html>

正文中的内容创建一个包含两个页面的故事。每个页面都有一个全出血的背景图像，顶部有一个简单的文本字符串。

amp-story 的必要标记

AMP story HTML 格式遵循与有效的 AMP HTML 文档相同的标记要求，以及以下附加要求

规则 描述
<amp-story standalone> 元素是 <body> 的唯一子元素。 标识该文档是 AMP story。
包含一个 <script async src="https://cdn.ampproject.org/v0/amp-story-1.0.js" custom-element="amp-story"></script> 标签，作为 <head> 标签的第三个子元素。 包含并加载 amp-story JS 库。
在 <head> 内包含一个 <link rel="canonical" href="$STORY_URL"> 标签。 链接指向故事本身，将故事标识为规范文档。

Story：amp-story

amp-story 组件表示一个完整的故事。该组件本身实现 UI 外壳，包括处理手势和导航，以及插入应用程序外壳 UI（控件、进度条等）。

示例

<amp-story
  standalone
  title="My Story"
  publisher="The AMP Team"
  publisher-logo-src="https://example.com/logo/1x1.png"
  poster-portrait-src="https://example.com/my-story/poster/3x4.jpg"
  poster-square-src="https://example.com/my-story/poster/1x1.jpg"
  poster-landscape-src="https://example.com/my-story/poster/4x3.jpg"
  background-audio="my.mp3"
>
  <amp-story-page>[...]</amp-story-page>
  <amp-story-page>[...]</amp-story-page>
  <amp-story-page>[...]</amp-story-page>
</amp-story>

元数据指南

元数据属性在 Web Story 生态系统中显示故事的预览，例如渲染引人入胜的预览链接。这些属性使您的故事在未来能够适应丰富的嵌入式体验 Web Story 表面。

这些元数据属性是对页面上任何结构化数据（例如 JSON-LD）的补充，而不是替代。我们仍然建议向您的 Web Story 添加结构化数据。

publisher-logo-src 指南

这些指南适用于发布商徽标图像

  • 提供栅格文件，例如 .jpg、.png 或 .gif。避免使用矢量文件，例如 .svg 或 .eps。
  • 避免使用动画图像，例如动画 gif。
  • 图像徽标应在背景颜色上清晰可见。
首选 首选 避免这种情况
  • 徽标应至少为 96x96 像素，并且是完美的正方形。
  • 背景不应透明。
  • 每个品牌使用一个徽标，该徽标在 AMP story 中保持一致。

海报指南（适用于 poster-portrait-src、poster-landscape-src 和 poster-square-src）

这些指南适用于故事海报图像

  • 海报图像应代表整个 AMP story。
  • 当 AMP story 开始时，海报图像应对于用户可见。为了适应大小、裁剪或微小的样式更改或预览目的，元数据中使用的图像文件 URL 不需要与故事第一页上的 URL 完全匹配。
  • 提供栅格文件，例如 .jpg、.png 或 .gif。避免使用矢量文件，例如 .svg 或 .eps。
  • 海报图像的纵横比应为纵向 3x4、横向 4x3 和方形 1x1。
  • 如果海报图像来自视频中的帧，则缩略图应代表该视频。例如，视频中的第一帧通常不具有代表性。
  • 每个海报图像都应满足建议的最小尺寸
    • 纵向：640px x 853px
    • 横向：853px x 640px
    • 方形：640px x 640px

故事生成器元标记

可选的 HTML 元标记可用于指示创建该文档的故事生成器。有两个元标记，分别指示生成器的名称及其版本。

<meta name="amp-story-generator-name" content="Story generator name" />
<meta name="amp-story-generator-version" content="0.1" />

横向和全出血桌面体验选择加入

如果在 <amp-story> 元素上指定了 supports-landscape 属性，它将

  • 允许在移动设备以横向方向握持时查看故事。
  • 将桌面体验更改为沉浸式全出血模式，替换默认的三个纵向面板体验。

虽然目前是选择加入且可选的，但我们强烈建议确保移动设备上的用户能够以最适合其需求的任何方向查看故事 - 否则，他们将只会看到一条“该页面最好以纵向模式查看”的消息。

用法：<amp-story ... supports-landscape>...</amp-story>

之前 之后

实时故事

使用 live-story 属性将新页面追加到故事，供用户实时查看。

此属性在最后一页上向用户显示新页面的通知，并更新进度条。

live-story 的核心用例包括突发新闻或现场活动的报道，使用户无需退出故事即可进行实时更新。颁奖典礼、体育赛事和选举是一些示例。

工作原理

在后台，当客户端上显示使用 live-story 的 AMP story 时，AMP 运行时会在主机上轮询原始文档以进行更新。当客户端收到响应时，它会筛选并动态地将这些更新插入回客户端上的故事中。发布者可以自定义轮询率，以便控制传入请求的数量，并且 Google AMP Cache 等 AMP 缓存可以执行优化以减少服务器响应负载，从而节省客户端带宽和 CPU 周期。

轮询

在大多数实时博客实现中，内容要么由服务器推送到页面的客户端实例，要么客户端轮询 JSON 端点以接收更新。此处的实现有所不同，因为故事的客户端实例轮询服务器上 <amp-story> 元素内的故事文档以进行更新。例如：如果用户正在查看从 AMP 缓存提供的故事，则客户端将轮询该 AMP 缓存上托管的该文档以进行更新；如果用户正在查看从 Web 发布商的原始域（例如“example.com”）提供的文档，则客户端将轮询该原始域上托管的该文档以进行更新。

这意味着故事的发布者无需设置 JSON 端点或推送机制即可使此功能正常工作。

通过使用有效的 <amp-story> 标记发布到同一 URL 来更新内容。内容将在下一次轮询期间提取到用户的客户端实例中。可以使用 data-poll-interval 属性配置轮询间隔。

停止轮询

只要 <amp-story> 元素上存在 live-story 属性，客户端就会持续轮询服务器上的文档副本。请确保在发布故事的最后一次更新时，将 live-story-disabled 属性设置为 <amp-story> 元素。这将使轮询停止。

用法

  • 在 <amp-story> 元素上指定一个 id。
  • 将 live-story 属性添加到 <amp-story> 元素。
  • [可选] 将 data-poll-interval 属性添加到 <amp-story> 元素，以指定检查新更新的时间间隔。
  • [可选] 当直播结束时，将 live-story-disabled 属性添加到 <amp-story> 元素，以禁用轮询。
  • 在每个 <amp-story-page> 上
    • 使用有效值指定 data-sort-time 属性。这是一个用于排序页面的时间戳。较高的时间戳将在较旧的页面条目之后插入。我们建议使用 Unix 时间。
<amp-story id="story1" live-story ...>
  <amp-story-page id="cover" data-sort-time="1552330790"> ... </amp-story-page>
  <amp-story-page id="page1" data-sort-time="1552330791"> ... </amp-story-page>
  <amp-story-page id="page2" data-sort-time="1552330792"> ... </amp-story-page>
</amp-story>

子元素（amp-story 的子元素）

<amp-story> 组件包含一个或多个 <amp-story-page> 组件，其中包含故事的每个单独屏幕。文档顺序中指定的第一个页面是故事中显示的第一个页面。

可选自定义

使用 object-position 裁剪 amp-img 和 amp-video 资源

object-position 属性可以用于 <amp-img> 和 <amp-video> 元素，以指定资源在其容器内的对齐方式（裁剪）。默认情况下，这些资源居中，并且根据视口比例，它们的边缘会从容器中裁剪出来。由于资源的感兴趣区域不总是其中心，因此 object-position 允许指定图像的哪一部分必须保持可见。此属性接受 object-position CSS 属性接受的任何值。

示例


可以使用这种方式使用 object-position 将同一个图像用于移动设备竖屏和横屏桌面

<amp-img src="cat.jpg" alt="..." object-position="75% 40%"></amp-img>
通过在原始文档上使用免费的 Google 托管视频缓存来优化 amp-video

故事中的 <amp-video> 元素支持通过属性 cache="google" 在原始文档上使用 Google 视频缓存。视频缓存将定期提取和存储视频内容，从而降低视频的服务成本，并生成具有不同质量设置的转码，使比特率适应网络条件。

使用 720p 或更高分辨率的视频，以利用所有视频转码和自适应比特率算法。

示例

<amp-video layout="fill" poster="img.png" cache="google" autoplay>
  <source src="video.mp4" type="video/mp4">
</amp-video>
data-text-background-color

data-text-background-color 属性使用指定的颜色突出显示元素的文本。要突出显示整个块，请将此属性直接添加到文本元素。要仅突出显示文本，请将属性和文本添加到内部 。请注意，它在 <amp-story-page> 中的任何位置都可以使用，而不仅仅是在 <amp-story-grid-layer> 中。

示例

<amp-story-grid-layer template="vertical">
  <h2>
    <span data-text-background-color="crimson">
      Cat ipsum dolor sit amet, sleeps on my head, but lounge in doorway so if
      human is on laptop sit on the keyboard
    </span>
  </h2>
</amp-story-grid-layer>

示例

<amp-story-grid-layer template="vertical">
  <h2 data-text-background-color="crimson">
    Cat ipsum dolor sit amet, sleeps on my head, but lounge in doorway so if
    human is on laptop sit on the keyboard
  </h2>
</amp-story-grid-layer>

嵌入式组件

我们支持在 amp-story-grid-layer 中嵌入一些组件，例如 <amp-twitter>。默认情况下，它们在故事中不是交互式的（即，点击它们将前进到下一页），但是通过使用 interactive 属性，您可以显示一个工具提示，链接到原始来源（即，在新选项卡中打开推文）。

示例

<amp-twitter
  width="100"
  height="100"
  layout="responsive"
  data-tweetid="1102562523524579328"
  interactive
>
</amp-twitter>

amp-story-grid-layer 中的链接

我们支持内联链接 <a> 作为 amp-story-grid-layer 的后代。每当点击链接时，将显示一个工具提示 - 将相应的操作延迟到用户再次点击工具提示。

请注意以下在 AMP 故事中包含链接的准则

  • 距离故事页面左边缘或右边缘太远的链接部分将会导致导航。
  • 占用页面区域过多的链接将被忽略导航。

您可以通过指定以下属性来自定义在用户交互元素顶部显示的工具提示的内容。如果未指定，则会自动提供回退值。

data-tooltip-icon

接受图标图像所在的 src。

data-tooltip-text

当工具提示出现时将显示的字符串。

示例

<a
  href="https://www.google.com"
  role="link"
  data-tooltip-icon="./assets/ic_amp_googblue_1x_web_24dp.png"
  data-tooltip-text="Go to page"
>
  Click me!
</a>

AMP stories 中可用的其他组件

以下是可在 AMP 故事中使用的其他组件，这些组件需要一些特定于故事的注意事项。

有关更常用的组件，请参阅允许的子项列表。

属性

standalone（必需）

标识 AMP 文档是故事。

title（必需）

故事的标题。

publisher（必需）

故事发布者的名称。

publisher-logo-src（必需）

故事发布者徽标的方形格式（1x1 宽高比）的 URL。例如 publisher-logo-src="https://example.com/logo/1x1.png"，其中 1x1.png 是一个 96x96 px 的徽标。

poster-portrait-src（必需）

纵向格式（3x4 宽高比）的故事海报的 URL。

poster-square-src（可选）

方形格式（1x1 宽高比）的故事海报的 URL。

poster-landscape-src（可选）

横向格式（4x3 宽高比）的故事海报的 URL。

entity（可选）

故事创建实体的名称。例如：entity="User"，其中 User 在发布者的平台上创建了故事。

entity-logo-src（可选）

故事创建实体徽标的方形格式（1x1 宽高比）的 URL。例如 entity-logo-src="https://example.com/logo/1x1.png"，其中 1x1.png 是一个 96x96 px 的徽标。

entity-url（可选）

故事创建实体平台的 URL。例如 entity-url="https://example.com/profile/user"，它链接到发布者平台上 User 的个人资料。

supports-landscape（可选）

在移动设备上启用横向方向支持，并在桌面设备上启用全出血横向体验。

background-audio（可选）

在整个故事中播放的音频文件的 URL。

live-story（可选）

启用直播故事功能。

live-story-disabled（可选）

禁用直播故事功能。

data-poll-interval（可选）

与 live-story 属性一起使用。检查新内容的时间间隔（以毫秒为单位）。如果没有提供 data-poll-interval，则默认为 15000 毫秒的最小值。小于 15000 毫秒的值无效。

desktop-aspect-ratio（可选）

该值以“水平：垂直”格式指定宽高比，其中“水平”和“垂直”都是整数。如果指定此属性，则将故事在桌面单面板模式下的布局设置为符合指定的比例。可接受的比例在 1:2 和 3:4 之间，超出该范围的任何值都将被钳制。

动画

<amp-story-page> 中的每个元素都可以具有进入动画。

您可以通过在元素上指定一组动画属性来配置动画；无需额外的 AMP 扩展或配置。

如果需要预设之外的其他内容，可以使用<amp-story-animation>组件来配置自定义动画。

动画可以帮助您的 Web Story 更加引人入胜，但请谨慎使用。一些用户可能会觉得长时间、连续的动画令人分心。其他用户可能对运动敏感，并且会受到过度使用运动和视差效果的不利影响。

动画效果

以下动画效果可用作 AMP 故事的预设

预设名称 默认持续时间（毫秒） 默认延迟（毫秒）
drop 1600 0
fade-in 600 0
fly-in-bottom 600 0
fly-in-left 600 0
fly-in-right 600 0
fly-in-top 600 0
pulse 600 0
rotate-in-left 1000 0
rotate-in-right 1000 0
scale-fade-down 600 0
scale-fade-up 600 0
twirl-in 1000 0
whoosh-in-left 600 0
whoosh-in-right 600 0
pan-left 1000 0
pan-right 1000 0
pan-down 1000 0
pan-up 1000 0
zoom-in 1000 0
zoom-out 1000 0

在 AMP By Example 上查看所有 AMP 故事动画的实时演示。

动画属性

animate-in [必需]

使用此属性指定进入动画预设的名称。

示例：标题从页面的左侧飞入。

<h2 animate-in="fly-in-left">
  Fly from left!
</h2>

animate-in-duration [可选]

使用此属性以秒或毫秒为单位指定进入动画的持续时间（例如，0.2 秒或 200 毫秒）。默认持续时间取决于您指定的动画预设。

示例：标题从页面的左侧飞入，动画在半秒内完成。

<h2 animate-in="fly-in-left" animate-in-duration="0.5s">
  Fly from left!
</h2>

animate-in-timing-function [可选]

使用此属性指定进入动画的计时函数（动画曲线）。默认计时函数取决于您指定的动画预设。

示例：标题从页面的左侧飞入，动画减速（缓出）。

<h2
  animate-in="fly-in-left"
  animate-in-timing-function="cubic-bezier(0.0, 0.0, 0.2, 1)"
>
  Fly from left!
</h2>

animate-in-delay [可选]

使用此属性指定开始动画之前的延迟。该值必须大于或等于 0，以秒或毫秒为单位（例如，0.2 秒或 200 毫秒）。默认延迟取决于您指定的动画预设。

示例：0.4 秒后，标题从页面的左侧飞入，并在 0.5 秒内完成进入。

<h2 animate-in="fly-in-left" animate-in-duration="0.5s" animate-in-delay="0.4s">
  Fly from left!
</h2>

动画延迟不能保证完全精确。当扫描到第一个动画元素时，在后台加载 amp-animation 扩展可能会导致额外的延迟。属性约定定义为将此动画延迟至少 N 毫秒。这适用于所有元素，包括延迟为 0 秒的元素。

animate-in-after [可选]

使用此属性来链接或按顺序排列动画（例如，animation2 在 animation1 完成后开始）。指定此元素动画将跟随的动画元素的 ID。该元素必须存在于同一 <amp-story-page> 上。延迟在前一个元素的动画完成后应用。有关更多详细信息，请参阅下面的按顺序排列动画部分。

例如，在以下代码中，object2 在 object1 完成其进入后进行动画

<amp-story-page id="page1">
  <amp-story-grid-layer template="vertical">
    <div id="object1" animate-in="rotate-in-left">
      1
    </div>
    <div id="object2" animate-in="fly-in-right" animate-in-after="object1">
      2
      <!-- will start after object1 has finished -->
    </div>
  </amp-story-grid-layer>
</amp-story-page>

scale-start，scale-end [可选，仅适用于 zoom-in 和 zoom-out 动画]

使用这两个属性进一步指定放大和缩小动画的参数。该值必须大于或等于 0，并且允许使用小数。对于放大，默认值将为 scale-start: 1 和 scale-start: 3，对于缩小，默认值为相反的值。

示例：图像在 4 秒内从 2 倍放大到 5 倍。

<amp-img
  animate-in="zoom-in"
  scale-start="2"
  scale-end="5"
  animate-in-duration="4s"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

translate-x [可选，仅适用于 pan-left 和 pan-right 动画]

使用此属性在 pan-left/pan-right 动画中指定图像的水平平移。该值必须大于或等于 0 像素。默认值将平移指定图像的整个宽度。

示例：图像在 10 秒内向左平移 200 像素。

<amp-img
  animate-in="pan-left"
  translate-x="200px"
  animate-in-duration="10s"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

translate-y [可选，仅适用于 pan-up 和 pan-down 动画]

使用此属性指定在向上/向下平移动画中图像的垂直平移。该值必须大于或等于 0 像素。默认值将平移指定图像的整个高度。

示例：图像在 15 秒内向下平移 50 像素。

<amp-img
  animate-in="pan-down"
  translate-y="50px"
  animate-in-duration="15s"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

pan-scaling-factor [可选，仅适用于 pan-left、pan-right、pan-up 和 pan-down 动画]

目标在向左/向右/向上/向下平移动画中自动缩放，以确保平移时不会超出目标边界。

使用此属性可以覆盖默认的缩放因子计算，并指定一个静态缩放因子。该值必须大于 0，并且允许使用小数。

示例：图像在平移时缩放 1.3 倍。

<amp-img
  animate-in="pan-left"
  pan-scaling-factor="1.3"
  layout="fixed"
  src="https://picsum.photos/720/320?image=1026"
  width="720"
  height="320"
  alt="..."
>
</amp-img>

动画排序

要在序列中链接动画，请使用 animate-in-after 属性。给定链中的所有元素必须存在于同一个 <amp-story-page> 中。没有 animate-in-after 属性的元素不属于序列链，并且将在页面进入时独立启动。

<amp-story-page id="my-sequencing-page">
  <amp-story-grid-layer template="vertical">
    <div class="circle" animate-in="drop-in" animate-in-duration="1.8s">
      1
      <!-- will start independently -->
    </div>
    <div
      id="rotate-in-left-obj"
      class="square"
      animate-in="rotate-in-left"
      animate-in-after="fade-in-obj"
      animate-in-delay="0.2s"
    >
      2
      <!-- will start after fade-in-obj has finished -->
    </div>
    <div
      class="square"
      animate-in-after="rotate-in-left-obj"
      animate-in="whoosh-in-right"
      animate-in-delay="0.2s"
    >
      3
      <!-- will start after rotate-in-left-obj has finished -->
    </div>
    <div
      id="fade-in-obj"
      class="circle"
      animate-in="fade-in"
      animate-in-duration="2.2s"
    >
      1
      <!-- will start independently -->
    </div>
  </amp-story-grid-layer>
</amp-story-page>

组合多个动画

您可以在一个元素上应用多个进入动画（例如，一个元素飞入页面并同时淡入）。不能将多个动画预设分配给单个元素；但是，可以嵌套具有不同进入动画的元素，以将它们组合为一个。

<div animate-in="fly-in-left">
  <div animate-in="fade-in">
    I will fly-in and fade-in!
  </div>
</div>

如果组合动画应该在单独元素的动画结束后开始，请确保组成该动画的所有嵌套元素都将属性 animate-in-after 设置为相同的 id。

分支

分支允许识别单独的故事页面。用户可以在故事中跳转，从故事的开头以外的地方开始故事，并分享特定的故事页面。一个例子是目录或多项选择按钮。

URL 中的片段参数支持此功能。

分支允许在故事中操作导航。故事会跟踪导航。如果用户从 page-1 导航到 page-5，然后到 page-6，则向后导航将遵循确切的路径。当向后导航时，跳过的页面不会向用户显示，它将遵循 page-6、到 page-5，并最终回到 page-1。

URL 片段参数

通过分支，AMP 故事现在支持以下形式的 URL：

https://www.mydomain.com/good-story/#page=<page-id>

其中 page-id 指的是 amp-story-page 的唯一 ID。在某些用例中，您还可以将片段参数和 page-id 值用作锚链接。

本地化

您应始终在故事的 <html> 标签上包含 lang 属性中的语言代码，例如，英文内容为 <html ⚡ lang="en">。支持的语言代码为：

  • ar (阿拉伯语)
  • de (德语)
  • en-GB (英语，英国)
  • en (英语，美国)
  • es-419 (西班牙语，中美洲/拉丁美洲)
  • es (西班牙语，西班牙)
  • fr-CA (法语，加拿大)
  • fr (法语，法国)
  • hi (印地语)
  • id (印度尼西亚语)
  • it (意大利语)
  • ja (日语)
  • ko (韩语)
  • nl (荷兰语)
  • no (挪威语)
  • pt-BR (葡萄牙语，巴西)
  • pt (葡萄牙语，葡萄牙)
  • ru (俄语)
  • tr (土耳其语)
  • vi (越南语)
  • zh-TW (繁体中文)
  • zh (简体中文)

此外，对于从右到左的语言，您可以在故事的 <html> 标签上包含 dir="rtl" 属性。这也可以与语言代码结合使用，例如 <html ⚡ lang="ar" dir="rtl">。

验证

请参阅 AMP 验证器规范中的 amp-story 规则。

需要更多帮助？

您已经阅读本文档十几次了，但它并没有真正涵盖您的所有问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

前往 Stack Overflow
发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但也欢迎您为自己特别感兴趣的问题做出一次性贡献。

前往 GitHub