如何将自定义谷歌搜索添加到 AMP 网站答案

【问题标题】：how to add custom google search to AMP site如何将自定义谷歌搜索添加到 AMP 网站
【发布时间】：2020-06-16 01:01:37
【问题描述】：

您好，我正在尝试使用我的 Google 自定义搜索引擎 (GCSE) 代码：

<script async src="https://cse.google.com/cse.js?cx=009000000000000:u0000000"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

但是，我的 Accelerated Mobile Pages (AMP) 网站不允许我向其中添加 JavaScript，而且我没有看到任何允许将 GCSE 集成到 AMP 网站中的 AMP 组件。

如何在不违反 AMP 合规性的情况下在我的网站上获得 GCSE？

谢谢

【问题讨论】：

这能回答你的问题吗？ Adding Google Custom Search to AMP site

标签： wordpress amp-html

【解决方案1】：

我按照以下步骤使用amp-form 向我的开源网站 (https://csaba.page/) 添加了搜索功能：

如果您尚未按照https://developers.google.com/custom-search/docs/tutorial/creatingcse 的说明在 CSE（自定义搜索引擎）控制台 https://cse.google.com/ 创建 GCSE（Google 自定义搜索引擎）。
记住你的Search engine ID，它看起来像“013535696182405026577:kmxne16xdtx”。您可以在 CS 控制台的 Basics 选项卡上看到它，或者如果您正在查看 JavaScript 代码，它是 cx 变量。
将<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> 添加到您的head 部分，其中包含其他AMP。
在body 中添加一个amp-form，您希望在其中放置搜索输入并根据需要设置表单样式：

<div>
  <form method="GET" class="search-form" action="https://www.google.com/cse" target="_top">
    <div class="search-form-inner">
      <input name="cx" type="hidden" value="013535696182405026577:kmxne16xdtx" />
      <input name="ie" type="hidden" value="UTF-8" />
      <input type="search" placeholder="Search..." name="q" required>
      <input type="submit" value="Go" class="search-button">
    </div>
  </form>
</div>

这里还有一些博客文章：

还有一个初始提交：https://gitlab.com/MrCsabaToth/mrcsabatoth.gitlab.io/-/commit/96345716d620b916d1c61cb5b51941378ffc5dc6

【讨论】：