重要提示：此文档不适用于您当前选择的格式 电子邮件！

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`

返回 JSON 的远程端点的 URL，该 JSON 将用于配置此 amp-next-page 组件。这必须是 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

描述