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

版本说明

版本 描述
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>

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

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 shell，包括处理手势和导航，以及插入应用程序 shell 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。
  • 如果海报图像来自视频中的帧，则缩略图应代表该视频。例如，视频中的第一帧通常不具有代表性。
  • 每个海报图像应满足建议的最小尺寸
    • 竖屏：640 像素 x 853 像素
    • 横屏：853 像素 x 640 像素
    • 正方形：640 像素 x 640 像素

故事生成器元标记

可选的 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 的 AMP 故事时，AMP 运行时会轮询主机上的原始文档以进行更新。当客户端收到响应时，它会过滤这些更新并将其动态插入到客户端的故事中。发布商可以自定义轮询速率，以便控制传入请求的数量，而像 Google AMP 缓存这样的 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（必需）

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

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 像素的徽标。

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 [可选]

使用此属性链接或排序动画（例如，动画 2 在动画 1 完成后开始）。指定此元素动画将遵循的动画元素的 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 动画]

使用此属性指定图像在 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 动画]

目标在 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> 标签中包含语言代码，如英语内容应为 <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