Question

在AMP Start模板中使用的代码也可以在amp-story中开箱即用吗？需要进行哪些更改？

例如，使用AMP开始模板的AMP Start模板可以简化在Adventures中使用的此搜索表单吗？如果没有，为什么不呢？

AMP开始-使用我们的模板和组件构建快速响应的AMP页面

https://www.ampstart.com/templates

id

  <!-- Search Form -->
  <div class="travel-hero-search">
    <label class="travel-input-icon travel-shadow flex col-12 relative rounded">
      <input class="travel-input travel-input-big travel-input-clear border block col-12 rounded" list="locations" type="text" name="query" placeholder="Where would you like to go?" on="
          change:AMP.setState({
            fields_query: event.value,
            fields_query_live: event.value,
            fields_query_edited: query_query != event.value
          });
          input-debounced:AMP.setState({
            fields_query_live: event.value
          });
        " value="" [value]="fields_query">

    <amp-list layout="flex-item" src="/api/places?types=(regions)&types=(cities)&input=" [src]="'/api/places?types=(regions)&types=(cities)&input=' + fields_query_live">
      <template type="amp-mustache">
        <datalist id="locations">
          {{#predictions}}
          <option value="{{description}}">
          {{/predictions}}
        </option></datalist>
      </template>
    </amp-list>

    <div class="travel-hero-search-dates flex my2 justify-around">
      <label class="travel-date-input relative bold flex-auto" [class]="'travel-date-input relative bold flex-auto' + (fields_departure ? ' travel-date-input-touched' : '')">
        <input class="block relative p0 z1" type="date" placeholder="yyyy-mm-dd" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="yyyy-mm-dd" name="departure" on="
            change:AMP.setState({
              fields_departure: true,
              fields_departure_edited: true
            })
          ">

Answer 1

不，出于多种原因。

AMP故事不支持滚动；这些模板都需要滚动。
<amp-story>标签必须是body的直接子元素，并且不能具有任何其他同级；这些模板作为子实体具有其他内容。
AMP模板中不允许使用这些模板中的许多组件。
在AMP故事中，模板中使用的某些组件（例如，链接）是可能的，但需要不同的标记。

这些模板都旨在用于非故事性文档。故事的模板当然是可能的，希望很快就会出现。

指定的AMP Start模板中的搜索表单不适用于故事，因为当前在故事中不允许使用表单。

在AMP-story中开箱即用的代码也可以在AMP Start模板中使用吗？有哪些必要更改？

1 个答案: