Question

我有我的Google自定义搜索引擎（GCSE）代码：

<script>
  (function() {
    var cx = '008589157460623253837:mhsjluzrngo';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

但是我的加速移动页面（AMP）网站不允许我添加JavaScript，而且我也看不到任何允许将GCSE嵌入AMP网站的AMP组件。

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

由于

Answer 1

你是对的，这还不支持，因为它不在AMP Components list中。尝试提交feature request on their githubpage。

Answer 2

您可以尝试将该代码放在单独的页面中，然后通过ng new组件在AMP中包含该页面。您还必须遵守此处描述的约束：https://www.ampproject.org/docs/reference/components/amp-iframe

Answer 3

使用AMP放大器组件，并将表单提交给Google自定义搜索

看看这个教程

https://gfw-blog.netlify.com/2018/05/11/cse-amp.html

Answer 4

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

按照https://cse.google.com/所述，在CSE（自定义搜索引擎）控制台https://developers.google.com/custom-search/docs/tutorial/creatingcse上创建GCSE（Google自定义搜索引擎）。
记住您的Search engine ID，它看起来像“ 013535696182405026577：kmxne16xdtx”。您可以在CS控制台的“基本”标签上看到它，或者，如果您正在查看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

将Google自定义搜索添加到AMP网站

4 个答案: