Поиск

Xingluo интегрирует Flexsearch для клиентского полнотекстового поиска, с индексами по языкам и сохранением состояния View Transitions.

Включение

Настройте через features.search:

ts
features: {
  search: "flexsearch", // "flexsearch" | false
}

При установке false страница поиска перенаправляется на 404 через Astro.rewrite, и UI поиска не генерируется.

Как это работает

Генерация индекса

Третий шаг сборки, node scripts/generateSearchIndex.mjs, сканирует HTML-файлы в директории dist/:

• Анализирует содержимое страниц и извлекает текст записей
• Индексы автоматически разделяются по языку (zh-cn и en получают свои собственные)
• Индексы выводятся в dist/search/

Область индекса

Скрипт сборки анализирует содержимое <main> на страницах деталей записей, поэтому индексируется только тело записей. Другие страницы (главная, списки, архивы и т.д.) не попадают в поисковый индекс.

UI поиска

src/components/pageViews/SearchView.astro реализует страницу поиска:

• Использует клиентский индекс Flexsearch для сопоставления поиска в браузере
• Находит ресурсы индекса через getAssetPath("search/")
• Использует переменные темы shadcn (--background, --foreground, --primary и т.д.) для стилизации поля поиска и списка результатов
• transition:persist сохраняет состояние поиска при навигации

Процесс поиска

1. Пользователь вводит текст в поле поиска
2. Flexsearch сопоставляет с индексом текущего языка
3. Список результатов показывает соответствующие записи (заголовок, даты публикации/обновления, значок категории, теги, фрагмент совпадающего текста)
4. processTerm записывает URL страницы поиска с параметрами запроса в sessionStorage для восстановления кнопкой “Назад”

Навигация назад

Механизм обратной навигации между страницей поиска и страницами записей:

• Компонент Main.astro записывает URL исходной страницы в sessionStorage backUrl
• BackButton.astro на странице записи предпочитает переход к sessionStorage backUrl или на главную, если отсутствует
• processTerm на странице поиска записывает URL с параметрами запроса, восстанавливая состояние поиска при возврате из записи

Многоязычный поиск

Flexsearch разделяет индексы по языку страницы:

• Страницы zh-cn (корневые) → китайский индекс
• Страницы en (префикс /en/) → английский индекс

Поиск автоматически соответствует индексу языка текущей страницы: китайский на китайских страницах, английский на английских.

Адаптация темы

UI поиска Flexsearch использует переменные темы shadcn, определённые в SearchView.astro для стилизации поля поиска и списка результатов:

css
:root {
  --search-primary: var(--primary);
  --search-text: var(--foreground);
  --search-background: var(--background);
  /* ... */
}

Тёмный режим переключается автоматически через селектор .dark, в соответствии с темой сайта.

Производительность

• Индексы Flexsearch — это статические файлы; поиск происходит на стороне клиента без серверных запросов
• Индексы загружаются по требованию (фрагменты индекса загружаются только при поиске)
• transition:persist предотвращает повторную инициализацию UI поиска при навигации