Эта статья была рецензирована Марком Брауном . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Владельцы веб-сайтов очень часто решают использовать систему пользовательского поиска Google (GCSE) для поиска по своему контенту вместо использования встроенных и / или пользовательских функций поиска. Причина проста — это гораздо меньше работы, и чаще всего это делает свое дело. Если вам не нужны расширенные фильтры или пользовательские параметры поиска, тогда GSCE для вас.
В этом кратком совете я покажу вам, как вручную визуализировать форму поиска (без использования специального тега GCSE) и поле результатов, которое обеспечивает больший контроль и более чистый способ оформления поля ввода поиска.
Проблема
Обычно добавить GCSE на ваш сайт так же просто, как скопировать на свой сайт скрипт и специальный HTML-тег. В месте, где вы помещаете специальный тег GCSE, будет отображаться поле поиска ввода. Ввод и запуск поиска в этом поле приведет к поиску в Google на основе предварительно настроенных параметров (например, поиск только на sitepoint.com).
Часто возникает вопрос: «Как изменить заполнитель поля ввода GCSE?». К сожалению, очень часто предлагаемый ответ неверен, поскольку он использует ненадежный метод setTimeout , чтобы дождаться завершения вызова Ajax из GCSE (убедившись, что входные данные уже подключены к DOM), а затем изменяет атрибуты через JavaScript.
Мы также собираемся запросить элемент и изменить атрибуты с помощью JS, но вместо слепого setTimeout() мы будем использовать обратный вызов, предоставленный GCSE, который будет гарантировать, что входные данные уже загружены.
Создание учетной записи GCSE
Поисковая система настроена полностью онлайн. Первый шаг — перейти на сайт GCSE и нажать « Добавить» . Следуйте указаниям мастера, указав домен, по которому вы хотите выполнить поиск (обычно это URL вашего сайта). Вы можете игнорировать любые дополнительные настройки на данный момент.
Когда вы нажмете « Готово» , вы увидите три варианта:
- Получить код , который проведет вас через то, что и где вы должны скопировать, чтобы поиск отображался на вашем сайте
- Публичный URL покажет вам рабочий предварительный просмотр поиска, который вы настроили
- Панель управления для настройки поиска
Перейдите в Панель управления , нажмите « Идентификатор поисковой системы» и запишите это значение на будущее.
Настройка HTML
Чтобы попробовать это, мы создадим базовый index.html содержащий необходимый HTML-файл, и файл app.js содержащий функции, необходимые для визуализации и настройки поиска.
Давайте создадим простой HTML-файл с этим внутри:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>GCSE test</h1> <div class="gcse-search-wrapper"></div> <div class="gcse-results-wrapper"></div> <script src="app.js"></script> </body> </html>
Мы добавили два элемента <div> со специальными классами, чтобы их можно было распознавать как элементы, в которых должна отображаться форма поиска и результаты.
Функции для ручного рендеринга
Теперь перейдите в файл app.js и добавьте это:
var config = { gcseId: '006267341911716099344:r_iziouh0nw', resultsUrl: 'http://localhost:8080', searchWrapperClass: 'gcse-search-wrapper', resultsWrapperClass: 'gcse-results-wrapper' }; var renderSearchForms = function () { if (document.readyState == 'complete') { queryAndRender(); } else { google.setOnLoadCallback(function () { queryAndRender(); }, true); } }; var queryAndRender = function() { var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass); var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass); if (gsceSearchForms) { renderSearch(gsceSearchForms[0]); } if (gsceResults) { renderResults(gsceResults[0]); } }; var renderSearch = function (div) { google.search.cse.element.render( { div: div.id, tag: 'searchbox-only', attributes: { resultsUrl: config.resultsUrl } } ); if (div.dataset && div.dataset.stylingFunction && window[div.dataset.stylingFunction] && typeof window[div.dataset.stylingFunction] === 'function') { window[div.dataset.stylingFunction](form); } }; var renderResults = function(div) { google.search.cse.element.render( { div: div.id, tag: 'searchresults-only' }); }; window.__gcse = { parsetags: 'explicit', callback: renderSearchForms }; (function () { var cx = config.gcseId; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })();
Сначала мы объявляем некоторые переменные для конфигурации. Поместите идентификатор, который вы gcseId ранее, в поле gcseId конфигурации. Поместите URL вашего локального файла index.html в поле resultsUrl . Здесь поиск будет перенаправлен после того, как пользователь отправит запрос. Кроме того, GCSE ожидает, что в указанном URL будет отображаться поле результатов.
addSearchForms
Эта функция проверяет, была ли страница загружена, и, если это так, вызывает функцию, которая позаботится о рендеринге queryAndRender() или, если документ еще не загружен, затем устанавливает обратный вызов, чтобы вернуться сюда позже после того, как документ закончил загрузку.
queryAndRender
Эта функция запрашивает DOM для элементов с классами, предоставленными в конфигурации. Если найден div-обертка, вызовите renderSearch() и renderResults() для рендеринга полей поиска и результатов соответственно.
renderSearch
Здесь происходит настоящее волшебство.
Мы используем Google Search API (дополнительную документацию о том, как использовать объект google.search.cse.element здесь ), чтобы создать окно поиска, и, если есть активный запрос (результаты), окно результатов.
Функция рендеринга принимает больше аргументов, чем предусмотрено в этом примере, поэтому обязательно проверьте документацию, если требуется дополнительная настройка. Аргумент div самом деле принимает идентификатор div, в котором мы хотим выполнить поиск, а аргумент tag должен обозначать, что именно мы хотим отобразить ( результаты или поиск или оба).
Кроме того, renderSearch() ищет атрибуты данных элемента-оболочки, и если задан атрибут функции стилевого оформления , он ищет это имя функции в области и применяет его к элементу. Это наша возможность, где мы можем стилизовать элемент.
window.__gcse = { parsetags: 'explicit', callback: renderSearchForms };
В этом фрагменте кода мы устанавливаем переменную обратного вызова в глобальной области видимости, так что GCSE использует это внутренне и выполняет функцию обратного вызова после завершения загрузки. Это та часть, которая делает этот метод намного лучше, чем решение setTimeout() для редактирования заполнителя (или чего-либо еще) поля ввода.
Тестовый забег
Пока что мы включили все необходимое для отображения окна поиска и результатов. Если у вас установлен файл node.js, перейдите в папку, в которую вы поместили файлы index.html и app.js , и выполните команду http-server . Который по умолчанию будет сервировать контент из папки на локальном хосте через порт 8080.
Функция укладки
Теперь мы готовы добавить пользовательскую функцию стилей к поисковому элементу. Вернитесь в index.html и в div #searchForm добавьте атрибут функции стайлинга
<div styling-function="removePlaceholder" id="searchForm" class="gcse-search-wrapper"></div>
Теперь перейдите в app.js и в верхней части файла, под объявлением переменной config, добавьте новую функцию:
var removePlaceholder = function(div) { var inputField = div.querySelector("input.gsc-input"); // Change the placeholder inputField.placeholder = "Search SitePoint"; // Remove the background inputField.style.background = "none"; // The background will get re-attached on blur, so add an event that will also remove it on blur // Another way to do this would be to de-attach the element from the DOM and then re-attach again, hence wiping the listeners inputField.addEventListener("blur", function() { inputField.style.background = "none"; }); };
Теперь попробуйте снова загрузить тестовую страницу, и вы увидите правильный заполнитель.
Вывод
Для быстрой настройки простого поиска, особенно если сайт представляет собой просто статический HTML, система пользовательского поиска Google работает отлично. С помощью небольшого количества JavaScript можно настроить не только форму поиска, но и страницу результатов, обеспечивая более удобную работу для пользователей.
Вы используете GCSE, или вы нашли лучшее решение? Комментарий ниже!