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

Question

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

我构建了一个通过验证的模板 here, but when putting it into https://amp.gmail.dev/playground/，但轮播不工作。

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

当你说 "doesn't work" 时，你指的是轮播没有显示吗？

您的代码 as-is 无法在 AMP 电子邮件平台（或实际的 AMP 电子邮件中）运行，因为您列表的 src“https://amp-templates.com/templates/api/1.json”未发回响应中正确的 CORS headers。尝试打开控制台和网络请求，你应该能明白我的意思。

由于 src 是远程的，AMP 规范强制执行了许多额外的安全要求，您必须遵守这些要求才能获取 json 文件。可以找到电子邮件游乐场的 headers here, whereas a more complete list of required headers is 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

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

Using amp-list to create dynamic amp-carousel in AMP4HTML

amp-html

amp-email