Simple Jekyll Search
vements
Uma biblioteca JavaScript para adicionar funcionalidade de pesquisa a qualquer blog Jekyll.
Você tem um blog criado com Jekyll e deseja uma funcionalidade de pesquisa leve em seu blog, puramente do lado do cliente?
Nenhuma configuração de servidor ou banco de dados para manter .
Apenas 5 minutos para ter um blog pesquisável totalmente funcional .
npm install simple-jekyll-searchsearch.json Coloque o código a seguir em um arquivo chamado search.json na raiz do seu blog Jekyll. (Você também pode obter uma cópia aqui)
Este arquivo será utilizado como uma pequena fonte de dados para realizar as buscas no lado do cliente:
---
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 precisa de dois elementos DOM para funcionar:
Aqui está o código que você pode usar com a configuração padrão:
Você precisa colocar o seguinte código no layout onde deseja que a pesquisa apareça. (Veja a seção de configuração abaixo para personalizá-lo)
Por exemplo em _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 > Personalize SimpleJekyllSearch passando suas opções de configuração:
var sjs = SimpleJekyllSearch ( {
searchInput : document . getElementById ( 'search-input' ) ,
resultsContainer : document . getElementById ( 'results-container' ) ,
json : '/search.json'
} ) Uma nova instância de SimpleJekyllSearch retorna um objeto, com a única propriedade search .
search é uma função usada para simular uma entrada do usuário e exibir os resultados correspondentes.
Por exemplo:
var sjs = SimpleJekyllSearch ( { ... options } )
sjs . search ( 'Hello' )ele pode ser usado para filtrar postagens por tags ou categorias!
Aqui está uma lista das opções disponíveis, perguntas de uso, solução de problemas e guias.
O elemento de entrada no qual o plugin deve escutar eventos de teclado e acionar a busca e renderização de artigos.
O elemento contêiner no qual os resultados da pesquisa devem ser renderizados. Normalmente um <ul> .
Você pode passar um URL para o arquivo search.json ou os resultados diretamente no formato JSON, para economizar uma viagem de ida e volta para obter os dados.
O modelo de um único resultado de pesquisa renderizado.
A sintaxe do modelo é muito simples: basta colocar as propriedades que deseja substituir entre chaves.
Por exemplo
O modelo
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>'
} )renderizará o seguinte
< li > < a href =" /jekyll/update/2014/11/01/welcome-to-jekyll.html " > Welcome to Jekyll! </ a > </ li > Se o search.json contiver esses dados
[
{
"title" : " Welcome to Jekyll! " ,
"category" : " " ,
"tags" : " " ,
"url" : " /jekyll/update/2014/11/01/welcome-to-jekyll.html " ,
"date" : " 2014-11-01 21:07:22 +0100 "
}
]Uma função que será chamada sempre que uma correspondência no modelo for encontrada.
Ele recebe o nome da propriedade atual, o valor da propriedade e o modelo.
Se a função retornar um valor não indefinido, ele será substituído no modelo.
Isso pode ser potencialmente útil para manipular URLs, etc.
Exemplo:
SimpleJekyllSearch ( {
...
templateMiddleware : function ( prop , value , template ) {
if ( prop === 'bar' ) {
return value . replace ( / ^/ / , '' )
}
}
. . .
} )Veja os testes para um exemplo de código detalhado
Uma função que será usada para classificar os resultados filtrados.
Pode ser usado, por exemplo, para agrupar as seções.
Exemplo:
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 )
}
. . .
} )O HTML que será mostrado se a consulta não corresponder a nada.
Você pode limitar o número de postagens renderizadas na página.
Ative a pesquisa difusa para permitir uma correspondência menos restritiva.
Passe uma lista de termos que você deseja excluir (os termos serão comparados a um regex, portanto, URLs e palavras são permitidos).
Uma função chamada quando os dados são carregados.
Limite quantas vezes a função de pesquisa pode ser executada em uma determinada janela de tempo. Isto é especialmente útil para melhorar a experiência do usuário ao pesquisar um grande conjunto de dados (seja com termos raros ou porque o número de postagens a serem exibidas é grande). Se nenhum debounceTime (milissegundos) for fornecido, uma pesquisa será acionada a cada pressionamento de tecla.
remove_chars como filtro.Por exemplo: em search.json, substitua
"content" : " {{ page.content | strip_html | strip_newlines }} "com
"content" : " {{ page.content | strip_html | strip_newlines | remove_chars | escape }} " Se isso não funcionar ao usar as páginas do Github, você pode tentar jsonify para ter certeza de que o conteúdo é compatível com o json:
"content" : { { page . content | jsonify } } Nota: você não precisa usar aspas " , pois jsonify as insere automaticamente.
Substitua search.json pelo seguinte código:
---
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 -- runObrigado a todos os colaboradores ao longo dos anos! Você é o melhor :)
@daviddarnes @XhmikosR @PeterDaveHello @mikeybeck @egladman @midzer @eduardoboucas @kremalicious @tibotiber e muitos outros!
