Настройка поиска на стороне клиента для сайта Jekyll / Github Pages с помощью Lunr и Backbone
Поэтому я совсем недавно перешел на Jekyll и Github Pages для размещения своего блога. Это просто фантастика, но, как и все остальное в мире разработки, она не идеальна прямо из коробки.
Одна из самых больших проблем - это отсутствие поиска. Поскольку сайт статичен и нет базы данных, поддерживающей контент, нам остается создать полностью клиентское решение. Здесь на помощь приходит lunr.js ». Между этим и Backbone.js мы можем настроить хороший поиск для нашего блога.
Обычно для решения такой проблемы вы можете полагаться на плагин Jekyll, однако Github создает ваш сайт с флагом safe, который не запускает никакие плагины. Есть два способа справиться с этим. Один из них - поставить только созданный сайт под контроль версий и разместить его на Github. Другой - заставить Jekyll работать как плагин, но не как плагин. Мы реализуем последний метод с помощью lunr.js, Backbone.js и некоторых приятных манипуляций с Jekyll.
ПРИМЕЧАНИЕ. Это не введение в Jekyll. Если вы не знакомы с Front Matter или другими соглашениями Jekyll, эта статья может быть вам не очень полезна.
План игры
Чтобы это заработало, нужно сделать несколько вещей:
- Первым делом необходимо получить заголовок, выдержку и категории каждого сообщения в файле JSON, чтобы мы могли получить эту информацию, когда будем готовы настроить наш индекс.
- Затем мы создадим нашу коллекцию сообщений (привязку к нашему индексу lunr) и представление результатов с помощью Backbone.
Подготовка к настройке
Прежде всего убедитесь, что у вас установлены lunr.js и Backbone.js. Затем нам нужно добавить файл post.json в наш каталог _includes. Когда мы перебираем наши сообщения, чтобы получить информацию о нем, мы будем использовать этот шаблон JSON для хранения необходимой нам информации о каждом сообщении. В post.json добавьте следующее:
Хотя это технически недействительный JSON, после его анализа Jekyll мы получим что-то вроде этого:
Теперь, когда у нас есть наш шаблон сообщения, нам нужно добавить фактический файл .json, который мы будем анализировать Jekyll для создания каждого сообщения для нас.
Я добавил файл json / posts.json, не стесняйтесь размещать его в любом каталоге по вашему выбору. В posts.json нам нужно перебрать все наши сообщения и включить наш шаблон post.json, это построит окончательные данные, которые мы загрузим в наш Сборник сообщений.
В posts.json:
Несмотря на то, что наш титульный лист для этого файла пуст, Jekyll все равно проанализирует его и создаст для нас JSON наших сообщений. Причина использования файла JSON заключается в том, что мы можем загружать данные асинхронно, это потенциально может стать большим файлом, и если мы просто построим цикл в нашем макете по умолчанию или в файле JS, страница будет задерживаться до тех пор, пока не будет загружен. Асинхронная загрузка обеспечивает загрузку остальной части сайта до загрузки данных поиска. Возможно, в конечном итоге его можно будет разбить по категориям и т. Д., Но пока этого должно хватить как одного файла JSON.
Реализация функциональности Backbone и Lunr
Сначала создадим нашу коллекцию Записи:
Отлично, теперь, когда у нас есть коллекция Сообщения, давайте настроим представление Результаты, которое мы будем использовать для отображения наших результатов. Сначала давайте настроим шаблон:
Его следует разместить в макете или включить, который используется на каждой странице. Или вы можете загрузить его с помощью AJAX или построить прямо в своем JS с помощью строки.
Теперь, когда у нас есть шаблон, давайте создадим представление Результаты:
Теперь давайте создадим коллекцию Записи и посмотрим, как она будет выглядеть при загрузке поискового запроса:
И это все. Очевидно, что можно сделать гораздо больше, но это даст вам быстрое решение для поиска на стороне клиента, охватывающее весь сайт. И это относительно тривиальный объем кода, чтобы заставить его работать.
