Une pagination automatique avec le gadget Libellés
Comment créer une pagination pour les pages de libellés ?
Ce code de démonstration XML reconstruit une barre de liens numérotés à partir des libellés sélectionnés dans le gadget "libellés".
Fonctionnement
Pour naviguer sur un blog, généralement on utilise les liens de navigation "Article(s) plus récent(s)" ou "Article(s) plus ancien(s)" qui se situent sous l'article ou sous la liste d'articles.Pour passer d'une page libellé à une autre page libellé, il faut préalablement installer le gadget "Libellés" ou activer l'option d'affichage des libellés sous les articles.
Mais pourquoi pas inventer une barre de navigation numérotée qui permettrait de basculer d'un libellé à l'autre. C'est ce que propose le code de démonstration ci-dessous.
Sur toutes les pages du blog, exceptés les pages de recherche de libellés qui ont été cochés dans les paramètres du widget, le widget affichera un lien suggérant au visiteur de démarrer une visite des libellés.
Dés que le visiteur aura cliqué sur le lien, il atterrira sur la page de recherche du premier libellé de la liste.
Sur cette première page de recherche, le widget affichera une barre de navigation qui contiendra une série de liens :
- Liste partielle de liens de libellés (Quantité définie dans le code)
- Lien du premier libellé (si le lien n'est pas dans la liste numérotée)
- Lien du dernier libellé (si le lien n'est pas dans la liste numérotée)
- Lien vers le libellé suivant (si il existe)
- Lien vers le libellé précédent (si il existe)
Le code de démonstration
Comme il s'agit d'une démonstration du potentiel du langage XML de Blogger, ce développement n'a pas été finalisé pour la distribution. L'apparence n'a pas été travaillée...Si vous souhaitez tester le code, commencez d'abord par installer un widget Libellés sur votre blog via la mise en page et ensuite, vous remplacez son code dans l'éditeur XML par ce code.
<b:widget id='Label1' locked='false' title='Start the labels tour' type='Label'> <b:includable id='main'> <!-- Demo - Labels navigation Author : Soraya Lambrechts Date : January 2016 - Update : August 2016 Compatibility - Gadget Version : 1 Template Version : 1-2 Unauthorized distribution --> <div class='widget-content'> <ul> <b:if cond='data:labels none (l => l.name == data:view.search.label.escaped)'> <b:include name='startTour'/> <b:else/> <b:include name='pagination'/> </b:if> </ul> <b:include name='quickedit'/> </div> <b:include cond='data:widget.sectionId not in ["crosscol","crosscol-overflow"]' name='style'/> </b:includable> <b:includable id='firstAndPreviousLabel'> <b:if cond='data:prev gte (data:nbr / 2)'> <li><a expr:href='data:labels.first.url' title='First label'>«</a></li> </b:if> <li><a expr:href='data:labels[prev].url' title='Previous label'>‹</a></li> </b:includable> <b:includable id='lastAndNextLabel'> <li><a expr:href='data:labels[next].url' title='Next label'>›</a></li> <b:if cond='data:next lte ((data:labels.size - 1) - (data:nbr / 2))'> <li><a expr:href='data:labels.last.url' title='Last label'>»</a></li> </b:if> </b:includable> <b:includable id='numberedLabels'> <b:with value='data:i lte (data:nbr / 2) ? data:nbr - data:i : (data:i gte data:labels.size - 1 - (data:nbr / 2) ? data:nbr - ((data:labels.size - 1) - data:i) : data:nbr / 2)' var='AtoB'> <b:loop values='data:i - data:AtoB to data:i + data:AtoB' var='pager'> <b:if cond='data:pager gte 0 and data:pager lte data:labels.size - 1'> <li> <b:class cond='data:labels[pager].name == data:view.search.label.escaped' name='selected'/> <a expr:href='data:labels[pager].url' expr:title='data:labels[pager].name.escaped'><b:eval expr='data:pager + 1'/></a> </li> </b:if> </b:loop> </b:with> </b:includable> <b:includable id='pagination'> <b:with value='8' var='nbr'> <b:loop index='i' values='data:labels' var='label'> <b:if cond='data:label.name == data:view.search.label.escaped'> <b:with value='data:i + 1' var='next'> <b:with value='data:i - 1' var='prev'> <b:include cond='data:prev gte 0' name='firstAndPreviousLabel'/> <b:include name='numberedLabels'/> <b:include cond='data:next gte 0 and data:labels.size - 1 != data:i' name='lastAndNextLabel'/> </b:with> </b:with> </b:if> </b:loop> </b:with> </b:includable> <b:includable id='startTour'> <li><a expr:href='data:labels.first.url' expr:title='data:title.escaped'><data:title/></a></li> </b:includable> <b:includable id='style'> <!-- ALTERNATIVE BASIC STYLE IF VERTICAL --> <style> #<data:widget.instanceId/> ul, #<data:widget.instanceId/> ul li { margin: 0px; padding: 0px; list-style: none; } #<data:widget.instanceId/> ul li { display: inline-block; } #<data:widget.instanceId/> ul li a { display: inline-block; padding: 10px; } #<data:widget.instanceId/> ul li a.selected { font-weight: bold; color: #000; } </style> </b:includable> </b:widget>
Autres tutos
- Peut-on trier les tableaux de nombres ?
- Comment contourner le changement automatique du type d'une donnée dans une opération XML Blogger ?
- Modifier le menu des boutons de partage
- Ajouter des boutons au menu de partage
- Une pagination automatique avec le gadget Pages
- Favicons multi-sets : icon, apple-touch-icon et msapplication
- Masquer des éléments des thèmes dynamiques
- Créer des sous-catégories dans le gadget Libellés
- Une pagination automatique avec le gadget Libellés
- Filtrer les libellés dans les articles
- Créer un sélecteur d'articles
- Ajouter son blog au module de recherche Firefox
- inReplyTo : Développer un module de commentaires avec réponses