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

返回 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