Fazendo um sistema de busca simples no Jekyll usando AngularJS
Publicado há 4 anos por Fernando Moreira.Tempo de leitura: 3 minutos - 618 palavras.Por alguns meses eu usei o plugin Simple Jekyll Search que funcionou muito bem no meu blog, mas agora ele foi totalmente feito em angular e ficou uma maravilha.
Hoje vou mostrar aqui como foi eu criei essa façanha, é bem simples e sem segredo nenhum, vem comigo.
Primeiro obstáculo: Liquid x Angular
Você deve ter notado que o Jekyll, assim como o Angular, usa 2 chaves em sua sintaxe, causando assim um conflito na hora de compilar o jekyll.
É bem simples resolver esse pequeno probleminha, o próprio Angular tem a solução, o $interpolateProvider é usado para configurar a interpolação da linguagem.
Com ele vamos setar no config
para o angular reconhecer apenas {( var )}
, mais ou menos assim:
var app = angular.module('searchApp', [])
app.config([
'$interpolateProvider',
function($interpolateProvider) {
return $interpolateProvider.startSymbol('{(').endSymbol(')}')
},
])
O arquivo json
Precisamos pegar todos os artigos do blog para alimentar nosso Javascript, criaremos um template para o Jekyll montando um .json
.
search.json
---layout: null
---[
{% for post in site.posts %}
{
"title" : "{{ post.title | escape }}",
"category" : "{{ post.categories | array_to_sentence_string }}",
"tags" : "{{ post.tags | array_to_sentence_string }}",
"url" : "{{ site.baseurl }}{{ post.url }}",
"date" : "{{ post.date | date: "%-d/%-m/%Y" }}"
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
O código acima irá montar uma estrutura mais ou menos assim.
[
{
"title": "Fazendo um sistema de busca simples no Jekyll usando AngularJS",
"category": "jekyll",
"tags": "jekyll, angular, and angularjs",
"url": "/busca-no-jekyll-com-angularjs",
"date": "27/12/2015"
},
{
"title": "dotX - mais um tema para Jekyll",
"category": "temas-jekyll",
"tags": "temas, jekyll, and download",
"url": "/dotX-mais-um-tema-para-jekyll",
"date": "21/12/2015"
}
]
Se você quiser dar uma olhada no arquivo final pode entrar [nesse link aqui]({{ "/search.json" | prepend: site.baseurl }}).
searchController
Logo acima, no primeiro código angular, nós iniciamos o módulo searchApp
e setamos o config
para corrigir a interpolação da linguagem, agora vamos terminar nosso script criando o controller.
// criando o ng-controller="searchController"
app.controller('searchController', [
'$scope',
'$http',
function($scope, $http) {
// criando a funcao "pesquiser(q)" que logo será usada em ng-keyup="pesquisar(search)"
$scope.pesquisar = function(q) {
$scope.posts = []
if (q != '' && q != undefined && q.length >= 1) {
// no $http.get() que toda a mágica acontece...
$http
.get('/search.json', { data: q })
.success(function(data) {
// atribuindo os objetos em uma variável "posts"
$scope.posts = data
})
.error(function(data) {
console.error('error...')
})
}
}
},
])
O HTML
<div ng-app="searchApp">
<div ng-controller="searchController">
<input
type="text"
ng-model="search"
ng-keyup="pesquisar(search)"
placeholder="Digite: sass, javascript, ruby, gulp, php..."
autofocus
autocomplete="off"
/>
<hr />
<ul ng-show="posts.length > 0">
<li ng-repeat="post in posts | filter:search">
<a href="{( post.url )}">
<span>{( post.title )}</span> <small>{( post.category )}</small>
</a>
</li>
</ul>
</div>
</div>
Bem, esse HTML ai em cima dispeça explicações né, se você sabe pelo menos o básico de AngularJS você já vai "matar todas as charadas" dele, mas vou dar uma explicação rápida.
ng-app="searchApp"
: iniciamos o app do Angular;ng-controller="searchController"
: iniciamos o controller searchController;ng-model="search"
: iniciamos o model search;ng-keyup="pesquisar(search)"
: a funcao pesquisar() recebe como parâmetro o model search;ng-show="posts.length > 0"
: aul
só vai existir se a variávelposts
existir;ng-repeat="post in posts | filter:search"
: caso haja objetos na variávelposts
criamos a lista comng-repeat
;
O filtro
Você deve ter notado que o nosso searchController
e nossa função pesquisar
retorna todos os objetos do arquivo search.json
por isso passamos um filtro mágico do AngularJS chamado filter:
que recebe o model search
(que é basicamente as letras digitadas no input).
Com isso fechamos nosso sisteminha de busca simples no Jekyll usando AngularJS ;)
Gostou, comenta ai \o/
\end