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 story 子集。它是 Web Stories 的基础技术。

版本说明

版本 描述
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 故事 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"> 标签。 该链接指向故事本身，将故事标识为规范文档。

故事：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 Story 显示在客户端上时，AMP 运行时会轮询主机上的原始文档以进行更新。当客户端收到响应时，它会过滤并将这些更新动态插入到客户端上的故事中。发布商可以自定义轮询速率，以控制传入请求的数量，而 Google AMP Cache 等 AMP 缓存可以执行优化，以减少服务器响应负载，从而节省客户端带宽和 CPU 周期。

轮询

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

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

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

停止轮询

只要 live-story 属性存在于 <amp-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> 元素支持在原始文档上使用 Google 视频缓存，通过属性 cache="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 像素的徽标。

poster-portrait-src（必需）

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

poster-square-src（可选）

指向方形格式（1x1 纵横比）的故事海报的 URL。

poster-landscape-src（可选）

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

entity（可选）

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

entity-logo-src（可选）

指向故事创建实体方形徽标的 URL（1x1 纵横比）。例如 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 故事在视觉上更令人兴奋和引人入胜，但请谨慎使用。一些用户可能会发现长时间、连续的动画会分散注意力。其他用户可能对运动敏感，并且可能会因过度使用运动和视差效果而受到不利影响。

动画效果

以下动画效果可作为 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 动画]

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