Bom, eu já postei alguns artigos aqui antes sobre Jekyll, desta vez iremos fazer uma melhoria na página home, para facilitar ainda mais a navegação dos usuários para encontrar postagens mais rapidamente.
Este processo requer quatro passos simples que consiste na alteração de 3 arquivos Gemfile, config.yml e index.html/index.md e a criação de uma arquivos pagination.html caso não exista. Então, vamos ao que nos interessa.
Passo 1 (Gemfile)
Para começarmos, temos de adicionar o plugin jekyll-paginate-v2 dentro do arquivo Gemfile, caso exista outro plugin de paginação sugiro remover o mesmo para evitar possíveis conflitos de compilação do Jekyll.
group :jekyll_plugins do
gem "jekyll-paginate-v2" #New plugin paginate
gem "jekyll-sitemap"
gem "jekyll-admin"
end
Em seguida deve executar o seguir comando para instalar e atualizar as dependências do novos plugin.
bundle install
Passo 2 (config.yml)
Ao finalizar o passo 1, a aplicação Jekyll estará preparada para receber as configurações em nosso arquivo config.yml, adicione os seguinte código dentro do arquivos em qualquer posição.
# Outros códigos de configurações…
pagination:
enabled: true # Habilita a paginação
per_page: 12 # Quantidade de postagens por página
permalink: '/blog/page/:num/' # URL que será exibido ao navegar entre as página
sort_reverse: true # Habilita a opção de voltar à página anterior
sort_field: 'date' # Filtra a paginação de acordo com a data de publicação das postagens
title: 'Página :num' # Nome de exibição que será carregado no <title> do blog
trail:
before: 2 # Exibe o número de postagens a esquerda
after: 2 # Exibe o número de postagens a direita
# Outros códigos de configurações…
Note que descrevemos cada linha com um breve comentários, com cada uma de suas funcionalidade.
Caso o servidor Jekyll esteja em execução, sugerimos que pare o mesmo e inicie novamente, pois a cada alteração realizada no arquivos config.yml o servidor deve ser reiniciado.
Passo 3 (index.html/index.md)
Agora já podemos trabalhar no nosso arquivos index, aqui são dois passos simples, acompanhe a seguir.
Front Matter: Adiciona o seguinte código dentro da estrutura Front Matter do arquivo index.
---
layout: home
pagination:
enabled: true
---
Include: Ainda dentro do arquivo index adicionar a seguinte linha, esta linha deve ser adicionado você deseja que a numeração de página seja exibida.
{% include pagination.html %}
Passo 4 (pagination.html)
Agora dentro do diretório includes crie uma arquivo chamado pagination.html, em seguida adicione o código abaixo dentro do arquivo que acabou de criar.
<!-- Pagination links -->
{% if paginator.total_pages > 1 %}
<ul class="pagination">
{% if paginator.previous_page %}
<li>
<a class="previous" href="{{ paginator.previous_page_path | prepend: site.baseurl }}">⇠</a>
</li>
{% endif %}
{% if paginator.page_trail %}
{% for trail in paginator.page_trail %}
<li {% if page.url == trail.path %}class="selected"{% endif %}>
<a href="{{ trail.path | prepend: site.baseurl }}" title="{{ trail.title }}">{{ trail.num }}</a>
</li>
{% endfor %}
{% endif %}
{% if paginator.next_page %}
<li>
<a class="next" href="{{ paginator.next_page_path | prepend: site.baseurl }}">⇢</a>
</li>
{% endif %}
</ul>
<span class="page_number">Página: {{ paginator.page }} de {{ paginator.total_pages }}</span>
{% endif %}
Agora pronto, seu blog já deve funcionar com uma nova paginação, a única coisa que você precisa fazer agora é adicionar um pouco de CSS para estilizar a exibição, optamos por não liberar um modelo de CSS aqui por questões de gosto pessoal.
Conclusão
Bom, eu espero que todos vocês tenham entendido e curtido o que acabamos de realizar aqui. Caso você deseja ter acesso ao CSS para estilizar a paginação, ou caso tenha alguma dúvida é só deixar nos comentários.
Não esqueça de compartilhar nas redes sociais com seus amigos.