#Настройка поиска

Возможно, потребуется настроить поведение поиска для сценариев, таких как:

• Обработка поисковых запросов, например удаление чувствительных слов.
• Фильтр результатов встроенного полнотекстового поиска.
• Отправка отчётов о введённых поисковых запросах.
• Подмена источника поисковых данных (например, поиск в базе данных).
• Отрисовка результатов из собственного источника поиска.

Rspress предоставляет интерфейсы для расширения поисковых компонентов стандартной темы, чтобы можно было настраивать поведение поиска.

#Знакомство с searchHooks

Используйте опцию search.searchHooks в конфигурации Rspress, чтобы зарегистрировать хуки поисковых компонентов:

import { defineConfig } from '@rspress/core';
import path from 'path';

export default defineConfig({
  search: {
    searchHooks: path.join(__dirname, './search.tsx'),
  },
});

Значение search.searchHooks — это путь к файлу. Этот файл экспортирует логику хуков, например onSearch, позволяя настраивать поиск во время выполнения. Мы называем такой файл модулем searchHooks.

#Функции-хуки в searchHooks

Модуль searchHooks поддерживает хуки beforeSearch, onSearch, afterRender и render.

#beforeSearch

Хук beforeSearch выполняется перед началом поиска. Используйте его для обработки или отправки поисковых запросов.

Хук поддерживает асинхронные операции.

Пример:

import type { BeforeSearch } from '@rspress/core/theme';

const beforeSearch: BeforeSearch = (query: string) => {
  // Что-то делаем перед поиском
  console.log('beforeSearch');
  // Возвращаем обработанный запрос
  return query.replace(' ', '');
};

export { beforeSearch };

#onSearch

Хук onSearch выполняется после завершения стандартного полнотекстового поиска. Используйте его для фильтрации или отправки результатов поиска, либо для добавления собственного источника данных поиска.

Хук поддерживает асинхронные операции.

Пример:

import type { OnSearch } from '@rspress/core/theme';
import { RenderType } from '@rspress/core/theme';

const onSearch: OnSearch = async (query, defaultSearchResult) => {
  // Запрашиваем какие-нибудь данные
  console.log(query);
  // Результаты стандартного источника поиска — это массив
  console.log(defaultSearchResult);
  // const customResult = await searchQuery(query);

  // Напрямую изменяем результаты стандартного поиска
  defaultSearchResult.pop();

  // Возвращаемое значение — массив. Каждый элемент является результатом источника поиска и добавляется в итоговые результаты.
  return [
    {
      group: 'Custom',
      result: {
        list: [
          {
            title: 'Результат поиска 1',
            path: '/search1',
          },
          {
            title: 'Результат поиска 2',
            path: '/search2',
          },
        ],
      },
      renderType: RenderType.Custom,
    },
  ];
};

export { onSearch };

Хук onSearch возвращает массив результатов источников поиска. Каждый элемент имеет следующую структуру:

{
  group: string; // Название группы результатов поиска, отображаемое в интерфейсе.
  result: unknown;
  renderType: RenderType; // Тип результата поиска. Может быть `RenderType.Default` или `RenderType.Custom`. По умолчанию — `RenderType.Custom`.
}

result — это результат поиска и может иметь любую необходимую структуру. renderType управляет способом отображения результата. Если указано значение RenderType.Default, Rspress использует стандартную логику рендеринга. Если указано RenderType.Custom, Rspress использует функцию render.

#afterSearch

Хук afterSearch выполняется после отображения результатов поиска. Используйте его для доступа к итоговым поисковым запросам и результатам.

Хук поддерживает асинхронные операции.

Пример:

import type { AfterSearch } from '@rspress/core/theme';

const afterSearch: AfterSearch = async (query, searchResult) => {
  // Поисковый запрос
  console.log(query);
  // Результат поиска
  console.log(searchResult);
};

export { afterSearch };

#render

Функция render отвечает за отрисовку данных из пользовательского источника поиска, который вы добавили в хуке onSearch. Поэтому её обычно используют вместе с onSearch. Пример использования:

import type { RenderSearchFunction } from '@rspress/core/theme';

// Реализация хука onSearch выше опущена

interface ResultData {
  list: {
    title: string;
    path: string;
  }[];
}

// Функция рендера для каждого источника поиска
const render: RenderSearchFunction<ResultData> = item => {
  return (
    <div>
      {item.list.map(i => (
        <div>
          <a href={i.path}>{i.title}</a>
        </div>
      ))}
    </div>
  );
};

export { onSearch, render };

Вот как выглядит результат: