">文档：<amp-story> - amp.dev - AMP 框架
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>

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

版本说明

版本 说明
1.0 当前版本，自 2018-07-16 起。

AMP 故事格式

AMP 故事是一个完整的 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 故事 HTML 格式遵循与有效的 AMP HTML 文档相同的标记要求，以及以下其他要求

规则 说明
<amp-story standalone> 元素是 <body> 的唯一子元素。 标识文档是 AMP 故事。
包含 <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"> 标签。 该链接指向故事本身，将故事标识为规范文档。

故事：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 Stories 生态系统中显示故事的预览，例如呈现引人入胜的预览链接。这些属性为您的故事提供面向未来的保障，以获得丰富的嵌入式体验 Web Stories 表面。

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

publisher-logo-src 指南

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

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

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

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

  • 海报图片应代表整个 AMP 故事。
  • AMP 故事开始时，海报图片应对用户可见。为了适应尺寸调整、裁剪或轻微样式更改或预览目的，元数据中使用的图片文件 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 故事在客户端显示时，AMP 运行时会轮询主机上的源文档以获取更新。当客户端收到响应时，它会筛选这些更新，然后动态地将它们重新插入客户端上的故事中。发布商可以自定义轮询速率以控制传入请求的数量，而 Google AMP Cache 等 AMP 缓存可以执行优化以减少服务器响应负载，从而节省客户端带宽和 CPU 周期。

轮询

在大多数实时博客的实现中，内容要么由服务器推送到页面的客户端实例，要么客户端轮询 JSON 端点以接收更新。此处的实现不同，因为故事的客户端实例轮询 <amp-story> 元素内的故事文档的服务器副本以获取更新。例如：如果用户正在查看从 AMP 缓存提供的某个故事，则客户端将轮询托管在该 AMP 缓存上的该文档以获取更新；如果用户正在查看从网络发布商的源域（例如“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-story 中包含链接的准则

  • 位于故事页面最左侧或最右侧的链接部分将让位于导航。
  • 占据页面区域过多的链接将被忽略以进行导航。

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

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 故事中可用的其他组件

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

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

属性

standalone（必需）

标识 AMP 文档是一个故事。

title（必需）

故事的标题。

publisher（必需）

故事出版商的名称。

publisher-logo-src（必需）

指向故事出版商徽标的 URL，采用方形格式（1x1 宽高比）。例如 publisher-logo-src="https://example.com/logo/1x1.png"，其中 1x1.png 是 96x96 px 的徽标。

poster-portrait-src（必需）

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

poster-square-src（可选）

指向 故事海报 的 URL，采用方形格式（1x1 宽高比）。

poster-landscape-src（可选）

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

entity（可选）

故事创建实体的名称。例如：entity="User"，其中用户在出版商的平台上创建了故事。

entity-logo-src（可选）

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

entity-url（可选）

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

supports-landscape（可选）

在移动设备上启用横向模式支持，在台式机设备上提供全出血横向体验。

background-audio（可选）

指向在整个故事中播放的音频文件的网址。

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>组件配置自定义动画。

动画可以帮助您的网络故事在视觉上更令人兴奋和引人入胜，但要谨慎使用。一些用户可能会发现冗长、连续的动画令人分心。其他用户可能有运动敏感性，并且会受到过度使用运动和视差效果的不利影响。

动画效果

以下动画效果可作为 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
向下平移 1000 0
向上平移 1000 0
放大 1000 0
缩小 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 动画]

使用此属性指定图像在平移左/平移右动画中的水平平移。值必须大于或等于 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 Stories 现在支持以下形式的 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