как добавить пользовательский поиск Google на AMP-сайт - PullRequest
Новая
       96

как добавить пользовательский поиск Google на AMP-сайт

1 голос
/ 09 мая 2020

привет, я пытаюсь использовать код, который у меня есть в моей системе пользовательского поиска 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>

Однако мой сайт с ускоренными мобильными страницами (AMP) не позволяет мне добавлять JavaScript к нему, и я не вижу никаких компонентов AMP, которые позволяют интегрировать GCSE в сайт AMP.

Как я могу разместить GCSE на своем сайте, не нарушая совместимость с AMP?

Спасибо ты

1 Ответ

0 голосов
/ 15 июня 2020

Я добавил функцию поиска на свой веб-сайт с открытым исходным кодом (https://csaba.page/) с помощью amp-form, выполнив следующие действия:

  1. Создание GCSE (система пользовательского поиска Google) в консоли СПП (система пользовательского поиска) https://cse.google.com/, как описано в https://developers.google.com/custom-search/docs/tutorial/creatingcse, если вы еще этого не сделали.
  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://gitlab.com/MrCsabaToth/mrcsabatoth.gitlab.io/-/commit/96345716d620b916d1c61cb5b51941378ffc5dc6

...