Simple Jekyll Search
vements
Библиотека JavaScript для добавления функции поиска в любой блог Jekyll.
У вас есть блог, созданный с помощью Jekyll, и вы хотите, чтобы в вашем блоге была облегченная функция поиска , исключительно на стороне клиента?
Никаких конфигураций сервера или баз данных, которые нужно поддерживать .
Всего 5 минут, чтобы создать полностью работающий блог с возможностью поиска .
npm install simple-jekyll-searchsearch.json Поместите следующий код в файл search.json в корне вашего блога Jekyll. (Вы также можете получить копию здесь)
Этот файл будет использоваться как небольшой источник данных для выполнения поиска на стороне клиента:
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] Для работы SimpleJekyllSearch необходимы два элемента DOM :
Вот код, который вы можете использовать с конфигурацией по умолчанию:
Вам нужно поместить следующий код в макет, где вы хотите, чтобы поиск отображался. (Чтобы настроить его, см. раздел конфигурации ниже)
Например, в _layouts/default.html :
<!-- HTML elements for search -->
< input type =" text " id =" search-input " placeholder =" Search blog posts.. " >
< ul id =" results-container " > </ ul >
<!-- or without installing anything -->
< script src =" https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js " > </ script > Настройте SimpleJekyllSearch, передав параметры конфигурации:
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json'
} ) Новый экземпляр SimpleJekyllSearch возвращает объект с единственным search по свойству.
search — это функция, используемая для имитации пользовательского ввода и отображения результатов сопоставления.
Например:
var sjs = SimpleJekyllSearch ( { ... options } )
sjs . search ( 'Hello' )его можно использовать для фильтрации сообщений по тегам или категориям!
Вот список доступных опций, вопросы по использованию, устранение неполадок и руководства.
Элемент ввода, на котором плагин должен прослушивать события клавиатуры и запускать поиск и рендеринг статей.
Элемент-контейнер, в котором должны отображаться результаты поиска. Обычно это <ul> .
Вы можете либо передать URL-адрес в файл search.json , либо результаты непосредственно в форме JSON, чтобы сэкономить время на получение данных.
Шаблон одного отображаемого результата поиска.
Синтаксис шаблонов очень прост: вы просто заключаете свойства, которые хотите заменить, в фигурные скобки.
Например
Шаблон
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json' ,
searchResultTemplate : '<li><a href="{{ site.url }}{url}">{title}</a></li>'
} )отобразится следующим образом
< li > < a href =" /jekyll/update/2014/11/01/welcome-to-jekyll.html " > Welcome to Jekyll! </ a > </ li > Если search.json содержит эти данные
[
{
"title" : " Welcome to Jekyll! " ,
"category" : " " ,
"tags" : " " ,
"url" : " /jekyll/update/2014/11/01/welcome-to-jekyll.html " ,
"date" : " 2014-11-01 21:07:22 +0100 "
}
]Функция, которая будет вызываться всякий раз, когда будет найдено совпадение в шаблоне.
Ему передаются имя текущего свойства, значение свойства и шаблон.
Если функция возвращает значение, отличное от неопределенного, оно заменяется в шаблоне.
Это может быть потенциально полезно для манипулирования URL-адресами и т. д.
Пример:
SimpleJekyllSearch ( {
...
templateMiddleware : function ( prop , value , template ) {
if ( prop === 'bar' ) {
return value . replace ( / ^/ / , '' )
}
}
. . .
} )Подробный пример кода см. в тестах.
Функция, которая будет использоваться для сортировки отфильтрованных результатов.
Его можно использовать, например, для группировки разделов.
Пример:
SimpleJekyllSearch ( {
...
sortMiddleware : function ( a , b ) {
var astr = String ( a . section ) + "-" + String ( a . caption ) ;
var bstr = String ( b . section ) + "-" + String ( b . caption ) ;
return astr . localeCompare ( bstr )
}
. . .
} )HTML-код, который будет показан, если запрос ничего не соответствует.
Вы можете ограничить количество сообщений, отображаемых на странице.
Включите нечеткий поиск, чтобы обеспечить менее строгое сопоставление.
Передайте список терминов, которые вы хотите исключить (термины будут сопоставляться с регулярным выражением, поэтому URL-адреса и слова разрешены).
Функция, вызываемая после загрузки данных.
Ограничьте количество раз, которое функция поиска может быть выполнена в течение заданного временного окна. Это особенно полезно для улучшения пользовательского опыта при поиске по большому набору данных (либо по редким терминам, либо по причине большого количества отображаемых сообщений). Если не указано время debounceTime (миллисекунды), поиск будет запускаться при каждом нажатии клавиши.
remove_chars в качестве фильтра.Например: в search.json замените
"content" : " {{ page.content | strip_html | strip_newlines }} "с
"content" : " {{ page.content | strip_html | strip_newlines | remove_chars | escape }} " Если это не работает при использовании страниц Github, вы можете попробовать jsonify чтобы убедиться, что контент совместим с json:
"content" : { { page . content | jsonify } } Примечание: вам не нужно использовать здесь кавычки " поскольку jsonify автоматически вставит их.
Замените search.json следующим кодом:
---
layout : none
---
[
{% for post in site.posts %}
{
" title " : "{{ post.title | escape }}",
" category " : "{{ post.category }}",
" tags " : "{{ post.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ post.url }}",
" date " : "{{ post.date }}",
" content " : "{{ post.content | strip_html | strip_newlines }}"
} {% unless forloop.last %},{% endunless %}
{% endfor %}
,
{% for page in site.pages %}
{
{% if page.title != nil %}
" title " : "{{ page.title | escape }}",
" category " : "{{ page.category }}",
" tags " : "{{ page.tags | join: ', ' }}",
" url " : "{{ site.baseurl }}{{ page.url }}",
" date " : "{{ page.date }}",
" content " : "{{ page.content | strip_html | strip_newlines }}"
{% endif %}
} {% unless forloop.last %},{% endunless %}
{% endfor %}
] npm installnpm test cd example ; jekyll serve
# in another tab
npm run cypress -- runСпасибо всем участникам на протяжении многих лет! Ты лучший :)
@daviddarnes @XhmikosR @PeterDaveHello @miceybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber и многие другие!
