在AMP Start模板中工作的代码也会在amp-story中开箱即用吗？有哪些改变是必要的？

Question

在AMP Start模板中工作的代码也会在amp-story中开箱即用吗？有哪些改变是必要的？

例如，这个搜索表单在冒险中使用变得容易，一个AMP开始模板，在amp-story中工作吗？若否，原因为何？

AMP Start -使用我们的模板和组件构建响应迅速的AMP页面

https://www.ampstart.com/templates

  <!-- 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
            })
          ">

    <a href="travel-results.amp" class="ampstart-btn travel-input-big rounded center bold white block col-12" on="
        tap:AMP.setState({
            ui_reset: false,
            ui_filterPane: false,
            query_query: fields_query,
            fields_query_edited: false,
            query_departure: fields_departure,
            fields_departure_edited: false,
            query_return: fields_return,
            fields_return_edited: false,
            query_maxPrice: fields_maxPrice,
            fields_maxPrice_edited: false,
            query_city: fields_city,
            fields_city_edited: false,
            query_type: fields_type,
            fields_type_edited: false,
            query_sort: fields_sort,
            fields_sort_edited: false,
        })
      ">
      Find Adventures & Tours
    </a>
  <!--/ Search Form -->

Answer 1

不，有很多原因。

• AMP文章不支持滚动；这些模板都需要滚动。
• <amp-story>标记必须是body的直接子项，并且不能有任何其他同级；这些模板都有其他内容作为body的子项。
• 这些模板中使用的许多组件在AMP文章中是不允许的。
• 模板中使用的某些组件(例如链接)可以在AMP文章中使用，但需要不同的标记。<代码>H29<代码>F210

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

指定的AMP Start模板中的搜索表单在文章中不起作用，因为文章中当前不允许使用表单。