在 AMP 开始模板中有效的代码在 AMP 故事中是否也能开箱即用?需要进行哪些更改?

Question

在AMP 开始模板中有效的代码在 amp 故事中也能开箱即用吗？需要进行哪些更改？

例如，这个在"轻松冒险"中使用的搜索表单(AMP Start 模板(是否适用于 AMP 故事？如果没有，为什么不呢？

AMP开始 - 使用我们的模板和组件构建响应迅速、速度快如闪电的 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 故事中是可能的，但需要不同的标记。

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

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