1

我想使用 amp-list 为 AMP4Email 创建一个动态 amp-carousel。

我在这里构建了一个通过验证的模板，但是将其放入https://amp.gmail.dev/playground/时，轮播不起作用。

AMP4Email 无法做到这一点吗？通常基于此，它似乎在 AMP 中运行良好。

渲染轮播的代码部分

<amp-list src="https://amp-templates.com/templates/api/1.json"
  layout="fixed-height"
  height="400">
  <template type="amp-mustache">
    <amp-carousel id="links-carousel"
      height="400"
      layout="fixed-height"
      type="slides">
        {{#default}}
          {{#images}}
            <div>
              <a href="{{link}}" class="carousel-link">
                <amp-img
                  class="contain"
                  layout="fill"
                  src="{{image}}"
                  alt="photo courtesy of Unsplash"></amp-img>
                  <div class="caption">
                    <p>{{description}}</p>
                  </div>
              </a>
            </div>
          {{/images}}
        {{/default}}
    </amp-carousel>
  </template>
</amp-list>
4

1 回答 1

1

当您说“不起作用”时，您是指轮播没有出现吗？

您的代码原样在 AMP 电子邮件游乐场（或实际的 AMP 电子邮件）中不起作用，因为您的列表的 src，“ https://amp-templates.com/templates/api/1.json " 没有在其响应中发回正确的 CORS 标头。尝试打开控制台和网络请求，你应该能明白我的意思。

由于 src 是远程的，AMP 规范强制执行许多额外的安全要求，您必须遵守这些要求才能获取 json 文件。可以在此处找到电子邮件游乐场的标头，而更完整的所需标头列表在此处。

通过自己托管 JSON 并将其添加到我的 htaccess 中，我能够确认此问题影响了您的代码：

# AMP
Header add Access-Control-Allow-Origin "*"
Header add AMP-Access-Control-Allow-Source-Origin "amp@gmail.dev"
Header add Access-Control-Allow-Source-Origin "AMP-Access-Control-Allow-Source-Origin"
Header add access-control-expose-headers "AMP-Access-Control-Allow-Source-Origin"

我把它扔在一个临时主机上，在“ https://fjas298401cxj.000webhostapp.com/amptemplates-api-1.json ”，你可以用它替换你的 src 来验证。

截屏

于 2019-05-03T15:26:24.127 回答