Скачать jekyll lunr js search - jekyll lunr js search Скачать исходный код

jekyll lunr js search

Другой исходный код

1.0.0

Скачать

Jekyll + lunr.js = Статические веб-сайты с мощным полнотекстовым поиском с использованием JavaScript.

Используйте lunr.js, чтобы обеспечить простой полнотекстовый поиск с использованием JavaScript в вашем браузере для вашего статического веб-сайта Jekyll.

Вдохновлен плагинами Jekyll + indextank Паскаля Виддершовена и плагинами Sitemap.xml Generator Майкла Левина.

Этот плагин Jekyll обрабатывает создание индексного файла .json , совместимого с lunr.js. Конфигурация поиска во время выполнения обеспечивается простым плагином jQuery.

Он позволяет осуществлять полнотекстовый поиск по всем вашим страницам и сообщениям Jekyll. Выполняется клиентом без какой-либо обработки на стороне сервера (кроме обслуживания статических файлов).

Как использовать

1. Установите плагин

Выберите установку либо как Ruby Gem, либо путем копирования предварительно созданного файла плагина на свой сайт Jekyll.

1а. Установить как Ruby Gem

Установите Ruby Gem jekyll-lunr-js-search.
```
 gem install jekyll-lunr-js-search
```
Измените файл Jekyll _config.yml , включив в него Gem.
```
 gems: ['jekyll-lunr-js-search']
```

1б. Установите, скопировав плагин на свой сайт Jekyll.

Поместите build/jekyll_lunr_js_search.rb в папку _plugins в корне вашего сайта Jekyll.

Содержимое всех сообщений и страниц Jekyll будет проиндексировано в файл js/index.json готовый для использования lunr.js. Это происходит каждый раз при создании сайта.

Плагин jQuery предоставляется в js/jquery.lunr.search.js для обработки конфигурации lunr.js с данными JSON индекса поиска, сгенерированными этим плагином.

Зависимости для плагина jQuery следующие.

jQuery
лунр.js
Усы.js
date.format.js
URI.js

Предварительно созданная версия плагина jQuery вместе со всеми вышеперечисленными зависимостями, объединенными и минимизированными, доступна по адресу build/search.min.js.

2. Скопируйте плагин jQuery и добавьте ссылку на скрипт.

2а. Используя готовый мини-плагин из драгоценного камня.

Плагин автоматически добавит минифицированный файл JavaScript js/search.min.js на ваш _site .

Чтобы использовать его, вы должны добавить ссылку на скрипт внизу выбранной вами страницы поиска.

    <script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>

2б. Использование плагина jQuery и самостоятельное управление его зависимостями.

Скопируйте js/jquery.lunr.search.js в каталог JavaScript вашего сайта Jekyll.

Добавьте ссылку на скрипт в нижнюю часть назначенной страницы поиска для jquery.lunr.search.js и каждой из зависимостей, описанных выше.

 <script src="/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/lunr.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/mustache.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/date.format.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/URI.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/jquery.lunr.search.js" type="text/javascript" charset="utf-8"></script>

Убедитесь, что вы используете ту же версию lunr.js, что и драгоценный камень. Вывод журнала Jekyll включает использованную версию.

В идеале вы должны объединить, минимизировать и оптимизировать эти шесть файлов .js , используя uglify/Google closure/etc, чтобы создать один файл search.min.js для ссылки (или использовать предварительно созданный сценарий, как описано в пункте 2a выше).

 <script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>

4. Добавьте форму поиска с вводом запроса, как показано.

 <form action="/search" method="get">
  <input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
</form>

Поиск происходит по мере ввода, если введены хотя бы три символа.

Предоставление действия формы и указание метода get позволяет пользователю нажать «Ввод/Ввод», чтобы также отправить поиск. При необходимости измените URL-адрес действия формы для страницы поиска на вашем сайте.

5. Добавьте элемент, содержащий список записей результатов поиска.

 <section id="search-results" style="display: none;"> </section>

Изначально это может быть скрыто, поскольку плагин будет показывать элемент при поиске.

6. Создайте шаблон Mustache для отображения результатов поиска.

 {% raw %}
<script id="search-results-template" type="text/mustache">
  {{#entries}}
    <article>
      <h3>
        {{#date}}<small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
        <a href="{{url}}">{{title}}</a>
      </h3>
      {{#is_post}}
      <ul>
        {{#tags}}<li>{{.}} </li>{{/tags}}
      </ul>
      {{/is_post}}
    </article>
  {{/entries}}
</script>
{% endraw %}

Обратите внимание на использование {% raw %} и {% endraw %} чтобы гарантировать, что теги Mustache не удаляются Jekyll.

Поля, доступные для отображения, следующие.

записи

Список записей результатов поиска (обязательно).

дата

Необработанная дата публикации для сообщений или ноль для страниц. Может использоваться для переключения отображения следующих дат в шаблоне {{#date}}has a date{{/date}} {{#!date}}no date{{/date}} .

опубликовать

Дата публикации публикации в формате «гггг-мм-дд» для использования в элементе html5 <time datetime="{{pubdate}}"> (только публикации).

дата отображения

Дата публикации публикации в формате «ммм дд, гггг», например 12 октября 2012 г. (только публикации).

заголовок

Название страницы или сообщения Jekyll.

URL

URL-адрес страницы или публикации Jekyll, который можно использовать для создания гиперссылки <a href="{{url}}">{{title}}</a> .

категории

Категории (массив) страницы или сообщения Jekyll можно использовать в цикле {{#categories}}{{.}} {{/categories}} для их перечисления.

is_post

Логическое значение, true, если текущий элемент результата является публикацией. Может использоваться для переключения отображения определенных элементов в шаблоне {{#is_post}}is a post{{/is_post}}

7. Настройте плагин jQuery для поля ввода поиска.

 <script type="text/javascript">
  $(function() {
    $('#search-query').lunrSearch({
      indexUrl  : '/js/index.json',           // url for the .json file containing search index data
      results   : '#search-results',          // selector for containing search results element
      template  : '#search-results-template', // selector for Mustache.js template
      titleMsg  : '<h1>Search results<h1>',   // message attached in front of results (can be empty)
      emptyMsg  : '<p>Nothing found.</p>'     // shown message if search returns no results
    });
  });
</script>

8. Исключить страницы из поискового индекса.

Добавьте следующий параметр exclude_from_search в конфигурацию YAML любой страницы.

 exclude_from_search: true

Или добавьте массив исключений (в виде отдельных регулярных выражений) в файл _config.yml сайта.

 lunr_search:
  excludes: [rss.xml, atom.xml]

9. Стоп-слова

Вы также можете настроить файл стоп-слов и минимальную длину слова, которое будет включено в индексный файл. Это можно сделать, добавив блок поиска в _config.yml . Значения по умолчанию:

 lunr_search:
  stopwords: "stopwords.txt"
  min_length: 3

Файл стоп-слов должен состоять из одного слова в строке, строчных букв, без знаков препинания.

10. Альтернативный каталог данных.

Вы можете сохранить index.json , search.min.js и lunr.min.js в другом каталоге, например:

 lunr_search:
  js_dir: "javascript"

Демо

Плагин поиска развернут на 10consulting.com/search. Некоторые примеры поисковых запросов: /search/?q=git, /search/?q=cqrs.

Он также обеспечивает загрузку плагина поиска .js по требованию при фокусировке на поле поиска на главной странице. Посмотрите на сетевые запросы браузера, вводящие поисковый запрос.