jekyll lunr js search
1.0.0
Use lunr.js para fornecer pesquisa simples de texto completo, usando JavaScript em seu navegador, para seu site estático Jekyll.
Inspirado nos plug-ins Jekyll + indextank de Pascal Widdershoven e Sitemap.xml Generator de Michael Levin.
Este plugin Jekyll lida com a geração de um arquivo de índice .json compatível com lunr.js. A configuração da pesquisa em tempo de execução é fornecida por um plugin jQuery simples.
Ele permite a pesquisa de texto completo em todas as suas páginas e postagens do Jekyll. Executado pelo cliente sem qualquer processamento no servidor (além de servir arquivos estáticos).
Escolha instalar como Ruby Gem ou copiando o arquivo do plugin pré-construído para o seu site Jekyll.
Instale a gema Ruby jekyll-lunr-js-search.
gem install jekyll-lunr-js-search
Modifique seu arquivo Jekyll _config.yml para incluir o Gem.
gems: ['jekyll-lunr-js-search']
build/jekyll_lunr_js_search.rb dentro da pasta _plugins na raiz do seu site Jekyll. O conteúdo de todas as postagens e páginas do Jekyll será indexado em um arquivo js/index.json pronto para ser consumido pelo lunr.js. Isso acontece cada vez que o site é gerado.
Um plugin jQuery é fornecido em js/jquery.lunr.search.js para lidar com a configuração de lunr.js com os dados JSON do índice de pesquisa gerados por este plugin.
As dependências do plugin jQuery são as seguintes.
Uma versão pré-construída do plugin jQuery, junto com todas as dependências acima, concatenadas e minificadas, está disponível em build/search.min.js.
O plug-in adicionará automaticamente o arquivo JavaScript minificado js/search.min.js ao seu _site .
Para usá-lo, você deve adicionar uma referência de script na parte inferior da página de pesquisa indicada.
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
Copie js/jquery.lunr.search.js para o diretório JavaScript do seu site Jekyll.
Adicione uma referência de script na parte inferior da página de pesquisa indicada para jquery.lunr.search.js e cada uma das dependências descritas acima.
<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>
Certifique-se de usar a mesma versão do lunr.js que a gem. A saída do log do Jekyll inclui a versão usada.
Idealmente, você concatenaria, reduziria e otimizaria esses seis arquivos .js usando uglify/Google encerramento/etc para produzir um único arquivo search.min.js para referência (ou usaria o script pré-construído conforme descrito em 2a acima).
<script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>
<form action="/search" method="get">
<input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
</form>
A pesquisa acontece enquanto você digita, depois que pelo menos três caracteres forem inseridos.
Fornecer a ação do formulário e especificar o método get permite que o usuário pressione Enter para também enviar a pesquisa. Altere o URL de ação do formulário conforme necessário para a página de pesquisa do seu próprio site.
<section id="search-results" style="display: none;"> </section>
Isso pode estar inicialmente oculto, pois o plugin mostrará o elemento durante a pesquisa.
{% 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 %}
Observe o uso de {% raw %} e {% endraw %} para garantir que as tags Moustache não sejam removidas pelo Jekyll.
Os campos disponíveis para exibição são os seguintes.
Lista de entradas de resultados de pesquisa (obrigatório).
Data bruta de publicação para postagens ou nula para páginas. Pode ser usado para alternar a exibição das seguintes datas no modelo {{#date}}has a date{{/date}} {{#!date}}no date{{/date}} .
Data de publicação da postagem, formatada como 'aaaa-mm-dd', para ser usada em um elemento HTML5 <time datetime="{{pubdate}}"> (somente postagens).
Data de publicação da postagem, formatada como 'mmm dd, yyyy', como 12 de outubro de 2012 (apenas postagens)
Título da página ou postagem do Jekyll.
URL da página ou postagem do Jekyll que pode ser usada para criar um hiperlink <a href="{{url}}">{{title}}</a> .
As categorias (matriz) da página ou postagem do Jekyll podem ser usadas em um loop {{#categories}}{{.}} {{/categories}} para listá-las.
Tags (array) da página ou postagem do Jekyll podem ser usadas em um loop {{#tags}}{{.}} {{/tags}} para listá-las.
Valor Booelan, verdadeiro se o elemento de resultado atual for uma postagem. Pode ser usado para alternar a exibição de elementos específicos no modelo {{#is_post}}is a post{{/is_post}}
<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>
Adicione a seguinte configuração exclude_from_search à configuração YAML de qualquer página.
exclude_from_search: true
Ou adicione uma série de exclusões (como expressões regulares individuais) ao arquivo _config.yml do site.
lunr_search:
excludes: [rss.xml, atom.xml]
Você também pode configurar um arquivo de palavras irrelevantes e um comprimento mínimo de palavra a ser incluído no arquivo de índice. Isso pode ser feito adicionando um bloco de pesquisa a _config.yml . Os valores padrão são:
lunr_search:
stopwords: "stopwords.txt"
min_length: 3
O arquivo de stopwords deve ser composto por uma palavra por linha, em letras minúsculas, sem pontuação.
Você pode optar por armazenar index.json , search.min.js e lunr.min.js em um diretório diferente como este:
lunr_search:
js_dir: "javascript"
O plugin de pesquisa é implantado em 10consulting.com/search. Alguns exemplos de consultas de pesquisa são /search/?q=git, /search/?q=cqrs.
Ele também oferece carregamento sob demanda do plugin de pesquisa .js ao focar no campo de pesquisa da página inicial. Observe as solicitações de rede do navegador clicando na entrada de pesquisa.
Para construir o único arquivo de plugin jekyll_lunr_js_search.rb .
Instale o Bundler e execute o seguinte.
bundle install
Instale o Bower.
Para construir o plugin.
rake build
Em seguida, copie build/jekyll_lunr_js_search.rb para a pasta _plugins do seu site Jekyll e os arquivos build/*.min.js para a pasta js do seu site.
Se você incluir os arquivos .js e .js.map o console do desenvolvedor do seu navegador será vinculado ao código não minificado.
