我只是想尝试创建一个AMP HTML网站.但是,我不能错过的是我们的搜索功能.
据我所知,到目前为止,使用AMP HTML无法进行搜索(输入字段,JavaScript处理程序).
有没有办法在AMP HTML中提供整洁的搜索功能?也许使用amp-list组件?
AMP通过放大器组件支持表单.使用放大器形式,您可以将搜索表单嵌入AMP中,并将搜索结果渲染到服务器上的新AMP中.
这是AMP中的搜索表单:
<html>
<head>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<!-- ... AMP boilerplate ... -->
</head>
<body>
<form method="get" action="https://example.com/search" target="_top">
<input name="search" type="search">
<input type="submit" value="">
</form>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
然后,https://example.com/search可以呈现为显示搜索结果的AMP页面:
<html>
<head>
<!-- ... AMP boilerplate ... -->
</head>
<body>
<h1>Results</h1>
<ul>
<li>Result 1</li>
<li>Result 2</li>
</ul>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
您可以在此处找到使用AMP实现的搜索的工作示例.
| 归档时间: |
|
| 查看次数: |
2875 次 |
| 最近记录: |