4

我正在尝试实现 amp-list 组件。我已经在亚马逊 S3 存储桶上上传了一个公开可用的 json 文件，因为内容将通过 https 协议提供。我使用了文档中的示例文件（https://github.com/ampproject/amphtml/blob/da89bab7c3401f4200d4c58166d5ca062f77e0c0/extensions/amp-list/amp-list.md）并稍微修改了它：

<html ⚡&gt;
<head>
    <meta charset="utf-8">
    <title>amp-list examples</title>
    <link rel="canonical" href="$SOME_URL" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>
  <h2> ******* LIST *******</h2>
    <amp-list width=300 height=200 src="https://s3-eu-west-1.amazonaws.com/gerswap/test.json">
        <template type="amp-mustache">
        <div>
          <p>text : {{text}}</p>
          <p>url : {{url}}</p>
        </div>
        </template>
    </amp-list>
</body>
</html>

验证器说：“AMP 验证成功”，但列表中没有显示任何内容。

我还尝试通过在 amp-list 标记的模板属性中引用它的 id 来指定模板，如文档（引用现有模板元素的 ID 的模板属性）中所述：

<!doctype html>
<html ⚡&gt;
<head>
    <meta charset="utf-8">
    <title>amp-list examples</title>
    <link rel="canonical" href="$SOME_URL" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>
  <h2> ******* LIST *******</h2>
    <amp-list template="list" width=300 height=200 src="https://s3-eu-west-1.amazonaws.com/gerswap/test.json">

    </amp-list>

    <template id="list" type="amp-mustache">
        <div>
          <p>text : {{text}}</p>
          <p>url : {{url}}</p>
        </div>
    </template>
</body>
</html>

列表仍然没有显示任何内容，并且验证器返回：“DISALLOWED_ATTR 模板”。似乎 amp-list 标签上不允许使用模板属性...

也许我没有正确理解文档......

任何帮助使其工作将不胜感激。

4

2 回答 2

3

amp-list 需要一个作为 CORS URL 的“src”。

您的 S3 存储桶目前仅提供以下标头：

HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Length: 181
Content-Type: application/octet-stream
Date: Thu, 31 Dec 2015 14:27:34 GMT
ETag: "683081003e1e42bfafcc054540ea60b4"
Last-Modified: Wed, 30 Dec 2015 17:34:34 GMT
Server: AmazonS3
x-amz-id-2: 9/ibtmhzmIdpIA/mjBlZbqDW4BcFYfgH6q52/MCOvMPR0mu9cPCT7acJkiRwh7hcG+BEuYDoJag=
x-amz-request-id: E00AF34C00EDC261
x-amz-version-id: null

您需要按照此处提供的说明在 S3 存储桶上启用 CORS 支持：http: //docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

于 2015-12-31T14:31:50.030 回答
0

嗨，Ade，感谢您提供的精确度。我终于设法使它工作。需要做的事情：

  • 正如您所说：导入 amp-list js lib。据我了解，每个 AMP 扩展组件都需要添加它自己的 js 库才能使其工作，对吗？
  • 正如您所说：通过实验启用 amp-mustache 支持。您提供的页面仅在 cdn.ampproject.org 域上启用非发布组件。要在我自己的域上启用 amp-mustache，我必须在浏览器的控制台中运行 AMP.toggleExperiment('mustache')，如文档中所述：https ://github.com/ampproject/amphtml/blob/abf3282cd5670bdf9d2062d5915de97140aee97b/tools/实验/README.md
  • 由于未知原因，我还必须在 amp-list 标记上添加一个 credentials="include" 属性才能在 Firefox 中工作
于 2016-01-06T17:16:48.367 回答