">文档：<amp-next-page> - amp.dev - AMP 框架
AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

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

用法

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

给定一个页面列表，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-links
  • 单个链接的 .amp-next-page-link
  • 链接图片的 .amp-next-page-image
  • 链接文本的 .amp-next-page-text

分隔符

在每个已加载文档之间呈现一个分隔符。默认情况下，这将呈现为全宽细线。可以通过设置 .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