Молниеносный поиск для Jekyll!

Молниеносный поиск для Jekyll!

Хорошему сайту нужен поиск, пользователю он необходим.

Скрипт взят на christianfei.com. Thanks.

Json!

JSON (JavaScript Object Notation) - текстовый формат передачи данных c помощью JS.

Очень действенный способ хранений текстовых данных, как раз для нашего случая. Зачем нам сторонние сервисы типа Google Search?

Сперва заходим в корень сайта с Jekyll и создаем файл search.json с похожим содержимым:

---
---
[
  {% for post in site.posts %}
    {
    
      "title"    : "{{ post.title | escape }}",
      "url"      : "{{ site.baseurl }}{{ post.url }}",
      "category" : "{{ post.categories | join: ', ' }}",
      "tags"     : "{{ post.tags | join: ', ' }}",
      "date"     : "{{ post.date | date: "%-d/%m/%y" }}" 

    } {% unless forloop.last %},{% endunless %}
  {% endfor %}
]
Фильтр escape очень важен, если где-то есть двойные кавычки.
Не ставьте кому после последнего параметра. И не добавляйте в массив очень больших текстов, в этом нет необходимости.

Поиск будет работать по данным из переменных названия заголовка, url, категорий, тегов и даты. Посмотреть исходный код можно после сборки проекта в корне сайта _site -> search.json.

Далее создайте в корне каталог search с нашей страницей поиска index.html:

---
layout: default
title: "Поиск чужеродной рассы"
---

<div id="search-container">
  <input type="text" id="search-input" placeholder="Поищем чужого?">
  <ul id="results-container"></ul>
</div>

Подключаем скрипт

Скачайте .zip архив с Github и подключите скрипт по пути:

<script src="/js/Simple-Jekyll-Search-master/dest/simple-jekyll-search.min.js"></script>

Или добавьте к вашему футеру:

<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>

Инициализиция

<script>SimpleJekyllSearch({
    searchInput: document.getElementById('search-input'),
    resultsContainer: document.getElementById('results-container'),
    json: '/search.json',
    noResultsText: 'Результат сожрали', 
    searchResultTemplate: '<li><a href="{{site.url}}{url}">{title}</a></li>',
  });
</script>
Конструкция {{ site.url }} - оператор Jekyll, а {title} - наша переменная из JSON. Не путаем.

Всё!

Кастомизируйте страницу, меняйте строку searchResultTemplate на свой лад, но не суйте пробелов в переменные json, не надо.

    Поделиться: