19 июн 2022 в 21:16

Как сделать свой поисковик?

Ожидает приглашения

Привет! Думаю ты хочешь создать свой поисковик если ты зашел на этот пост, сейчас мы его сделаем за 10 минут с настройкой.

Заходим на официальный сайт Google для создания поисковика.

Если у вас нет поисковиков, то у вас сразу отобразится страница для создания поисковика, а если есть то нажимаем на кнопку: "Добавить".

Сайты на которых выполняется поиск - это сайты откуда будет идти информация из запроса, рекомендую всегда писать google.com

Языки - это язык на котором будет сам поисковик, лучше всего выбрать "русский" или "Все языки"

Название поисковой системы - например: Google, Yandex, Mail.ru

Проходим капчу и нажимаем "создать".

У вас появится эта страница, вы можете сразу посмотреть результат нажав на кнопку "Общедоступный URL", но сейчас надо настроить поисковик, поэтому нажимаем на "панель управления".

У вас появится страница на которой можно запутаться, поэтому ставим настройки как на картинке:

Дальше нажимаем на "внешний вид".
Здесь лучше выбрать "На развороте" или "Накладка".

Темы: это тема вашего интерфейса, лучше всего выглядят: "Зеленый", "Фиолетовый" и "Серебристый", это уже на ваш вкус.

Не забываем сохранять настройки!

Настроить: это глобальная настройка вида вашего поисковика, сначала надо войти в "Фирменное оформление" и отключить его чтобы не было рекламы Google.

Поисковая строка - цвет границы, можно оставить по умолчанию,

Кнопка поиска - можно настроить цвет границы, цвет фона и цвет иконки (лупы)

Уточняющая категория - можно настроить цвет текста, цвет фона по умолчанию, цвет текста выбран и цвет выделяющего фона. Лучше выбрать те настройки - благодаря которым будет хорошо видно.

Настройка результатов - это настройка вида результата поиска, можно оставить также.

Заголовок результата - настройка вида заголовка результата, можно также оставить.

URL результата - настройка ссылки после Снипета, лучше всего поставить: "Отображать URL полностью".

Снипет результата - (снипет - описание страницы) можно настроить цвет снипета.

Настройка продвижений (рекламных страниц) - можно настроить цвет границы и цвет фона.

Название (заголовок) продвижения - можно настроить цвет ссылки по умолчанию, цвет посещенной ссылки, цвет при наведении и активный цвет.

URL продвигаемого сайта - можно настроить цвет URL и как он будет отображаться, лучше всего оставить "Отображать URL полностью"

Снипет (описание) продвигаемого сайта - можно настроить только цвет снипета.

Все настройки внешнего вида закончены, поисковик готов.
Заходим в "настройка" и нажимаем на "получить код",

Копируем его и создаем новые текстовый документ с расширением .html

Дальше вставляем его в Visual Studio Code (например, можно в другую программу или даже в блокнот),
Делаем самую обычную структуру HTML

<!DOCTYPE HTML>
<html>
  <head>
    <title>Название поисковика</title>
  </head>
  <body>
  	...
  </body>
</html>

В <body> мы вставляем код который скопировали

<!DOCTYPE HTML>
<html>
  <head>
    <title>Название поисковика</title>
  </head>
  <body>
  	<script async src="https://cse.google.com/cse.js?cx=ff92b3e28ff855d6c"></script>
		<div class="gcse-search"></div>
  </body>
</html>

<!DOCTYPE HTML>
<html>
  <head>
    <title>Название поисковика</title>
  </head>
  <body>
		<div class="gcse-search">
    	<script async src="https://cse.google.com/cse.js?cx=ff92b3e28ff855d6c"></script>
    </div>
  </body>
</html>

Готово, теперь открываем файл в браузере, и вот что у нас получилось:

Думаю вам был полезен этот туториал, всем пока.

Хабы: