This page was translated automatically from the English original.
View the original
Pagination
Implémentez des boutons de navigation précédent/suivant et des listes d'articles paginées sur votre site Jekyll.
Table of Contents
Pagination
Ajoutez des boutons de pagination pour naviguer entre les pages et les articles.
Vue d’ensemble
La pagination facilite la navigation des utilisateurs dans le contenu. Ce guide couvre :
- Boutons Précédent/Suivant pour les articles
- Listes d’articles paginées
- Raccourcis clavier pour la navigation
Navigation Précédent/Suivant
Implémentation de base
Créez _includes/pagination.html :
<ul class="pager">
{% if page.previous.url %}
<li><a class="btn btn-outline-primary" href="{{page.previous.url}}">Previous</a></li>
{% else %}
<li class="disable"><a class="btn btn-outline-primary disabled">Previous</a></li>
{% endif %}
{% if page.next.url %}
<li class="next"><a class="btn btn-outline-primary" href="{{page.next.url}}">Next</a></li>
{% else %}
<li class="next disable"><a class="btn btn-outline-primary disabled">Next</a></li>
{% endif %}
</ul>
Inclure dans votre mise en page
Ajoutez à votre modèle (par exemple _layouts/journals.html) :
{% include pagination.html %}
<hr />
<div class="post">{{ content }}</div>
<hr />
{% include pagination.html %}
Ordre de tri personnalisé
Triez selon un champ personnalisé (comme index) plutôt que par date :
{% if page.collection %}
{% assign posts = site[page.collection] | sort: 'index' %}
{% for links in posts %}
{% if links.title == page.title %}
{% unless forloop.first %}
{% assign prevurl = prev.url %}
{% endunless %}
{% unless forloop.last %}
{% assign next = posts[forloop.index] %}
{% assign nexturl = next.url %}
{% endunless %}
{% endif %}
{% assign prev = links %}
{% endfor %}
<ul class="pager">
{% if prevurl %}
<li><a class="btn btn-outline-primary" href="{{prevurl}}">Previous</a></li>
{% else %}
<li class="disable"><a class="btn btn-outline-primary disabled">Previous</a></li>
{% endif %}
{% if nexturl %}
<li class="next"><a class="btn btn-outline-primary" href="{{nexturl}}">Next</a></li>
{% else %}
<li class="next disable"><a class="btn btn-outline-primary disabled">Next</a></li>
{% endif %}
</ul>
{% endif %}
Navigation au clavier
Ajoutez des raccourcis clavier pour la navigation avec les flèches :
<script>
document.body.onkeyup = function(e){
if (e.keyCode == '37') { window.location = '{{prevurl}}'; }
if (e.keyCode == '39') { window.location = '{{nexturl}}'; }
};
</script>
Cela permet aux utilisateurs d’appuyer sur les flèches ← et → pour naviguer.
Listes d’articles paginées
Pour paginer une liste d’articles, utilisez le plugin jekyll-paginate :
Configuration
# _config.yml
plugins:
- jekyll-paginate
paginate: 10
paginate_path: "/blog/page:num/"
Modèle
{% for post in paginator.posts %}
<article>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
<p>{{ post.excerpt }}</p>
</article>
{% endfor %}
<!-- Pagination Links -->
<nav>
{% if paginator.previous_page %}
<a href="{{ paginator.previous_page_path }}">← Newer</a>
{% endif %}
<span>Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
<a href="{{ paginator.next_page_path }}">Older →</a>
{% endif %}
</nav>
Mise en forme
Ajoutez du CSS pour les boutons de pagination :
.pager {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 2rem 0;
}
.pager li.disable a {
pointer-events: none;
opacity: 0.5;
}
.pager .next {
margin-left: auto;
}
Référence
Voir aussi
- [[Jekyll]]
- [[Liquid]]
- [[front-matter]]