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

Question

嗨，我试图使用的代码，我有我的谷歌自定义搜索引擎（GCSE）的代码。

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

然而，我的加速移动页面（AMP）网站不允许我添加JavaScript，我没有看到任何AMP组件，允许GCSE集成到AMP网站。

我怎样才能在不违反AMP标准的情况下，让GCSE出现在我的网站上？

谢谢你的帮助

Answer 1

我添加了一个搜索功能到我的开源网站(https:/csaba.page)与 amp-form 按照这些步骤。

1. 在CSE（自定义搜索引擎）控制台创建一个GCSE（谷歌自定义搜索引擎）。https:/cse.google.com。 所谓 https:/developers.google.comcustom-searchdocstutorialcreatingcse。 如果你还没有这样做。
2. 记住你的 Search engine ID它看起来像 "013535696182405026577:kmxne16xdtx"。你可以在CS控制台的 "基础 "选项卡中看到它，或者如果你正在看JavaScript代码，它是这样的。cx 变量。
3. 添加 <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> 对你的 head 其间 AMP 包括有。
4. 在 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:/csaba.pageblogamp-google-custom-search-engine.html。
• https:/gfw-blog.netlify.app20180511cse-amp.html。

还有一个初始提交。https:/gitlab.comMrCsabaTothmrcsabatoth.gitlab.io-commit96345716d620b916d1c61cb5b51941378ffc5dc6。