0

在 AMP Start 模板中运行的代码是否也可以在 amp-story 中开箱即用？哪些改变是必要的？

例如，在 Adventures 中使用的这个搜索表单（一个 AMP Start 模板）是否可以在 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 -->
4

1 回答 1

1

不，有很多原因。

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

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

指定 AMP 开始模板中的搜索表单在故事中不起作用，因为目前不允许在故事中使用表单。

于 2018-10-14T18:09:05.287 回答