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

amp-next-page

实验性

描述

动态加载更多推荐给用户的文档。

必需脚本

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

用法

动态加载更多推荐给用户的文档。

给定页面列表，amp-next-page 尝试在当前文档之后加载它们，从而提供无限滚动类型的体验。

页面应在从元素 src 中列出的远程 URL 加载的 JSON 配置中指定，或内联作为 script 元素的子项。

<amp-next-page src="https://example.com/next-page-config.json"></amp-next-page>
<!-- Or -->
<amp-next-page>
  <script type="application/json">
    {
      "pages": ...
    }
  </script>
</amp-next-page>

如果加载下一个文档成功，它将作为 amp-next-page 组件的子项附加到当前文档的末尾，从而将它之后的任何内容进一步向下移动。因此，该组件通常应放置在给定页面的唯一内容之后：例如，在新闻文章或食谱的末尾，但在页脚或其他在文章中重复的内容之前。

该组件将在屏幕上的一个组件实例中最多渲染总共三个文档。此限制可能会在将来更改或删除。

重要提示 <amp-analytics> 当前在用户通过 <amp-next-page> 进入的页面上不受支持。通过主机页面上的 <amp-pixel> 或 <amp-analytics> 支持跟踪页面浏览量。

配置规范

该配置将 amp-next-page 推荐给用户的文档定义为 JSON 对象。

键	值
`pages`（必需）	一个或多个页面对象的有序数组
`hideSelectors`	要在子文档中隐藏的可选字符串 CSS 选择器数组

每个页面对象应具有以下格式

键	值
`ampUrl`（必需）	页面的字符串 URL。必须与当前文档位于同一来源。URL 会在需要时自动重写以指向 Google AMP 缓存。
`title`（必需）	页面的字符串标题，将在渲染推荐框时使用
`imageUrl`（必需）	要在推荐框中显示的图像的字符串 URL

分隔符

在每个加载的文档之间渲染一个分隔符。默认情况下，这会渲染为全宽细线。可以通过设置 .amp-next-page-default-separator 类的样式来自定义它。

或者，您可以使用 separator 属性，通过使用任意 HTML 内容作为 amp-next-page 组件的子项来指定自定义分隔符。

<amp-next-page src="https://example.com/config.json">
  <div separator>
    <h1>Keep reading</h1>
  </div>
</amp-next-page>

元素隐藏

在多个页面中常见的元素可以在子文档中以编程方式隐藏，以避免例如在文档末尾堆叠多个页面页脚，或者隐藏每个后续页面的页面标题。

可以通过在元素配置的 hideSelectors 键中指定一个或多个字符串 CSS 选择器来隐藏元素。与任何选择器匹配的元素将在所有子文档中设置为 display: none。

<amp-next-page>
  <script type="application/json">
    {
      "hideSelectors": [
        ".header",
        ".main footer",
        "#navigation"
      ],
      "pages": ...
    }
  </script>
</amp-next-page>

替换

amp-next-page src 允许所有标准的 URL 变量替换。有关详细信息，请参阅替换指南。

例如

<amp-next-page src="https://foo.com/config.json?RANDOM"></amp-next-page>

可能会向类似 https://foo.com/config.json?0.8390278471201 发送请求，其中 RANDOM 值在每次展示时随机生成。

属性

`src`

返回用于配置此 amp-next-page 组件的 JSON 的远程端点的 URL。这必须是一个 CORS HTTP 服务。URL 的协议必须是 HTTPS。您的端点必须实现 AMP 规范中 CORS 请求中指定的要求。

除非已内联指定配置，否则必须提供 src 属性。 |

示例配置

以下配置将推荐另外两个文档供用户阅读，并隐藏每个子文档的标题和页脚元素。

{
  "pages": [
    {
      "image": "https://example.com/image1.jpg",
      "title": "This article shows first",
      "ampUrl": "https://example.com/article1.amp.html"
    },
    {
      "image": "https://example.com/image2.jpg",
      "title": "This article shows second",
      "ampUrl": "https://example.com/article2.amp.html"
    }
  ],
  "hideSelectors": [".header", ".footer"]
}

分析

通过初始主机页面通过两个单独的事件包含对分析的部分支持。这些事件由 <amp-next-page> 触发，您可以在 amp-analytics 配置中跟踪它们

事件	何时触发
`amp-next-page-scroll`	用户滚动到新页面时
`amp-next-page-click`	用户单击推荐框中的文章时

两个 triggers 都提供引用先前和当前页面的变量 fromUrl 和 toUrl。它们可以按如下方式使用

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "nextpage": "https://foo.com/pixel?RANDOM&toURL=${toURL}"
      },
      "triggers": {
        "trackScrollThrough": {
          "on": "amp-next-page-scroll",
          "request": "nextpage"
        },
        "trackClickThrough": {
          "on": "amp-next-page-click",
          "request": "nextpage"
        }
      }
    }
  </script>
</amp-analytics>

验证

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

需要更多帮助？

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

转到 Stack Overflow

发现错误或缺少功能？

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

转到 GitHub

amp-next-page 1.0 0.1

描述