Question

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

我构建了一个通过验证here的模板，但是将其放入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

当您说“不起作用”时，是指轮播机未显示吗？

您的代码不能在AMP电子邮件场所（或实际的AMP电子邮件）中正常工作，因为列表的源代码“ https://amp-templates.com/templates/api/1.json”未发送正确的CORS标头在回应中。尝试打开控制台和网络请求，您应该能够准确了解我的意思。

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

我可以自己托管JSON并将其添加到我的htaccess中，从而确认此问题影响了您的代码：

var data = {
    indexes: []
};
var myArray = [1,2,3,4,5,6,7,8,9,10];

myArray.filter(function (element, index) {
    if (element%2 == 0) {
        this.indexes.push(index);
        return true;
    }
}, data);

console.log(data.indexes); // [1, 3, 5, 7, 9]
data.indexes.forEach(function(value) {
    console.log(myArray[value]);
}); // 2, 4, 6, 8, 10

我将它放在临时主机“ https://fjas298401cxj.000webhostapp.com/amptemplates-api-1.json”上，您可以用它替换src进行验证。

Screenshot

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

1 个答案: