在AMP4HTML中使用amp-list创建动态amp-carousel

Question

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

我构建了一个通过验证here的模板，但是当将它放入https://amp.gmail.dev/playground/中时，carousel不起作用。

这在AMP4Email中是不可能实现的吗？它似乎在基于this的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>

Answer 1

当你说“不工作”时，你指的是旋转木马没有出现吗？

您的代码，按原样，将不会在AMP电子邮件游乐场(或实际的AMP电子邮件)中工作，因为您列表的src "https://amp-templates.com/templates/api/1.json“在其响应中没有发回正确的CORS头。尝试打开控制台和网络请求，您应该能够确切地看到我的意思。

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

我自己托管了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来验证。

Screenshot