(dica) criando links nos posts para passar ao post seguinte
Zero
Esse vai ser um post um pouco maiorzinho porque vou mostrar várias opções, de acordo com o gosto do freguês!!!
Aqui ensino a fazer uma forma "automática" e outra manual; ambas têm seus prós e contras, aí vai de acordo com o que você precisa para seu blog.
Jeitinho 1: Embed
É possível incorporar na página uma chamada para o post anterior e o próximo.
Para isso você usa a sintaxe de {{ previous_post }} e {{ next_post }}, post anterior e próximo post, respectivamente.
Formatando na basiquinha
No puro, podemos colocar assim:
{{ previous_post }} | {{ next_post }}
Se você só adicionar as requisições, elas vão ser mostradas dessa forma:
Lado positivo
É um método "automático" e que você pode adicionar ao seu template para ficar ali por padrão. Não importa que não haja um post posterior no momento em que você fizer a configuração, assim que um novo post for publicado ele será colocado como próximo.
Lado negativo
Por ser um método automático, ele é bem limitado, o que significa dizer que ele é bem literal. O próximo post e o post anterior vão ser exatamente os posts que cumprem esse requisito.
Se você quer só uma forma de o leitor passar de um post para outro sem precisar voltar para a listagem do blog, esse método é perfeitamente funcional. Mas e se você quiser colocar uma sequência bem específica?
Exemplo: posts de um mesmo assunto ou posts de uma história, que por isso possuem uma sequência? Nesse caso, esse método não vai atender às sua necessidade, pois ele não consegue diferenciar esse tipo de configuração (ainda).
Além disso, por padrão ele só fica em inglês (é possível que dê pra traduzir, mas ainda não cheguei nesse level de expertise kkkkkkk), o que para falantes de português é meio paia.
Nesse caso, vamos para o próximo método, que consegue suprir essas faltas (especificidade e idioma)!
Jeitinho 2: HTML
Com o HTML conseguimos criar um link para as páginas internas do nosso blog. Para isso usamos a tag <a href="">. A aplicação dela fica assim:
<a href="/nome-da-pagina/"> Palavra que vai virar link </a>
Um exemplo:
Se você clicar aqui, vai para a minha listagem de posts!
Observação
Sempre lembre de abrir e fechar as tags!!!Formatando na basiquinha
A formatação abaixo coloca os links de Anterior e Próximo centralizados. As páginas usadas no exemplo simulam uma história.
Colocamos:
<div style="text-align:center;"><a href="/capitulo-1/">Capítulo Anterior</a> | <a href="/capitulo-3/">Próximo capítulo</a></div>
O resultado fica assim:
Lado positivo
Precisão: você sabe exatamente para onde está encaminhando seu leitor.
Além disso, como você escolhe qual vai ser a palavra linkada, pode escrever o texto como quiser, sem depender da escolha automática do sistema.
Lado negativo
Você precisa configurar tudo manualmente e se alterar o nome dos links, por exemplo, ele não vai fazer essa atualização de forma automática.
Formatando do jeito chique
Ok, você já escolheu se vai fazer o método 1 ou o método 2, mas e se você quiser ir além da formatação simples?
Aí nós usamos a melhor amiga do HTML: a tabela!
Passo 1
Para essa formatação funcionar, primeiro é necessário adicionar a configuração abaixo na folha de estilo do seu tema (opção "Themes", desce a página e você vai ver uma área para adicionar texto):
.table {
display:table;
width:100%;
}
.tr {
display:table-row;
}
.d1 {
display:table-cell;
width:25%;
}
.d2 {
display:table-cell;
text-align:center;
width:50%;
}
.d3 {
display:table-cell;
text-align:right;
width:25%;
}
Basta colar essa configuração lá, não mexa em mais nada!
E cuidado: se você trocar o seu tema, a folha de estilo vai ser zerada e essa configuração perdida.
Passo 2: Formatando o embed
No post em que você deseja adicionar os links, copie e cole as linhas a seguir:
<div class="table">
<div class="tr">
<div class="d1"> {{ previous_post }} </div>
<div class="d2"> | </div>
<div class="d3"> {{ next_post }} </div>
</div>
</div>
O resultado vai ser esse:
Passo 2: Formatando a tag a
Caso tenha optado por fazer tudo em HTML, a configuração vai ser assim:
<div class="table">
<div class="tr">
<div class="d1"><a href="/capitulo-1/">Capítulo anterior</a></div>
<div class="d2">|</div>
<div class="d3"><a href="/capitulo-3/">Próximo capítulo</a></div>
</div>
</div>
Resultado:
Como eu fui leitor de site de mangá pirata, resolvi acrescentar uma configuração ali no meio: um link de voltar para o topo! Nesse caso a configuração fica assim:
<div class="table">
<div class="tr">
<div class="d1"><a href="/capitulo-1/">Anterior</a></div>
<div class="d2"><a href="#">Voltar pro topo</a></div>
<div class="d3"><a href="/capitulo-3/">Próximo</a></div>
</div>
</div>
O <a href="#"> assim faz com que você retorne para o começo da página.
O resultado:
Você também pode fazer essa configuração extra mesmo se escolher usar a embed - eu só escolhi não adicionar ela aqui também para não ficar com um post imenso, mas você pode copiar e colar a div class d2 e ela vai funcionar certinho.
E por hoje é só, pessoal! \o