如何在本地环境中使用amp-list开发AMP?

时间:2018-05-10 07:30:44

标签: html amp-html progressive-web-apps accelerated-mobile-page

我意识到amp-list必须使用CORS和https。那么如何在本地环境中构建演示呢?
我从头开始构建一个AMP页面并创建一个简单的JSON文件。

{
  "items": [
    {
      "title": "AMP YouTube Channel",
      "url": "https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw"
    },
    {
      "title": "AMP project.org",
      "url": "https://www.ampproject.org/"
    },
    {
      "title": "AMP By Example",
      "url": "https://ampbyexample.com/"
    },
    {
      "title": "AMP Start",
      "url": "https://ampstart.com/"
    }
  ]
}

然后将src添加到amp-list

<amp-list width="auto"
          height="100"
          layout="fixed-height"
          src="http://localhost:9909/data1.json/">
    <template type="amp-mustache">
        <div class="url-entry">
            <a href="{{url}}">{{title}}</a>
        </div>
    </template>
</amp-list>

我得到了

GET http://localhost:9909/data1.json/?__amp_source_origin=http%3A%2F%2Flocalhost%3A9909 404 (Not Found)

如果我将src更改为“data1.json”,我得到了

"source" "must start with "https://" or "//" or be relative and served from either https or from localhost.

从错误中可以看出,它可以从https 或从localhost 提供。
但是我怎么能实现这个目标呢?

1 个答案:

答案 0 :(得分:0)

如果您正在使用WAMP之类的内容,则可以将其设置为使用https。我曾多次使用this guide来完成它。

我最近也被告知了Local by Flywheel。它主要用于Wordpress环境,但只需单击一下按钮即可启动SSL证书。如果你使用Wordpress,它就是当地开发工作的梦想。

它也适用于非Wordpress网站(请参阅下面的网站截图)。就你必须首先安装Wordpress然后删除Wordpress而言,这有点麻烦。

Does Local Work with Non-Wordpress Sites? Yes.