Une pagination automatique avec le gadget Pages

Comment créer une pagination pour les pages autonomes ?
Ce code de démonstration XML reconstruit une barre de liens numérotés à partir des liens de pages sélectionnés dans le gadget "Pages".

Présentation

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.
Mais lorsque l'on se rend sur une page autonome, ces liens n'existent pas. Pour accéder à ces pages, il faut préalablement installer le widget Pages, et sélectionner les pages que l'on veut afficher dans un menu horizontal ou vertical.
Parfois, il y a tellement de pages publiées, qu'il est très difficile d'afficher tous les liens.
Le code de démonstration ci-dessous a été conçu pour afficher une barre de navigation numérotée qui permet aux visiteurs de naviguer de pages en pages.
Quant à l'auteur du blog, il ne doit plus se tracasser du nombre de pages à publier, puisque la barre prend en charge un nombre illimité de pages.

Fonctionnement

Sur toutes les pages du blog, exceptés les pages autonomes qui ont été cochées dans les paramètres du widget, le widget affichera un lien suggérant au visiteur de démarrer une visite des pages autonomes.

Dés que le visiteur aura cliqué sur le lien, il atterrira sur la première page autonome de la liste.
Sur cette page autonome, le widget affichera une barre de navigation qui contiendra une série de liens :

• Liste partielle de liens de pages numérotés (Quantité définie dans le code)
• Lien de la première page (si le lien n'est pas dans la liste numérotée)
• Lien de la dernière page (si le lien n'est pas dans la liste numérotée)
• Lien vers la page suivante (si elle existe)
• Lien vers la page précédente (si elle existe)

Note : Les liens externes sont ignorés.

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 Pages sur votre blog via la mise en page et ensuite, vous remplacez son code dans l'éditeur XML par ce code.

Dernière mise à jour : Avril 2017

• Compatibilité toutes versions (Template V1-2-3 et Gadget V1-2)
• Correctif pages impaires
• Inclus les dernières fonctionnalités XML du pack 5
• Désactivation des inclusions originales inutilisées (Gadget V2)

<b:widget id='PageList1'
          locked='false'
          cond='not data:view.isPost'
          title='Start the pages tour'
          type='PageList'>

  <b:includable id='main'>
  <!-- Demo - Pages navigation
       Author : Soraya Lambrechts
       Date : January 2016 - Update : April 2017
       Compatibility - Gadget Version : 1-2
                       Template Version : 1-2-3
       Unauthorized distribution -->
    <b:with value='5' var='nbr'>
      <div class='widget-content'>
        <ul>
          <b:class cond='data:widget.version == 2' name='tabs'/>
          <b:with value='data:links where (l => l.id)' var='links'>
            <b:if cond='data:links none (l => l.id == data:view.pageId)'>
              <b:include name='startTour'/>
              <b:else/>
              <b:include name='pagination'/>
            </b:if>
          </b:with>
        </ul>
        <b:include cond='data:widget.version == 1' name='quickedit'/>
      </div>
      <b:include cond='data:widget.sectionId not in ["page_list_top", "crosscol", "crosscol-overflow"]' name='style'/>
    </b:with>
  </b:includable>

  <b:includable id='firstAndPreviousPage'>
    <b:if cond='data:prev gte (data:nbr / 2)'>
      <li><a expr:href='data:links.first.href' title='First page'>«</a></li>
    </b:if>
    <li><a expr:href='data:links[prev].href' title='Previous page'>‹</a></li>
  </b:includable>

  <b:includable id='lastAndNextPage'>
    <li><a expr:href='data:links[next].href' title='Next page'>›</a></li>
    <b:if cond='data:next lte ((data:links.size - 1) - (data:nbr / 2))'>
      <li><a expr:href='data:links.last.href' title='Last page'>»</a></li>
    </b:if>
  </b:includable>

  <b:includable id='numberedPages'>
    <b:with value='data:i lte (data:nbr / 2) ? data:nbr - data:i : (data:i gte data:links.size - 1 - (data:nbr / 2) ? data:nbr - ((data:links.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:links.size - 1'>
          <li b:whitespace='remove'>
            <b:class cond='data:links[pager].isCurrentPage' name='selected'/>
            <a expr:href='data:links[pager].href' expr:title='data:links[pager].title.escaped'>
              <b:eval expr='data:pager + 1'/>
            </a>
          </li>
        </b:if>
      </b:loop>
    </b:with>
  </b:includable>

  <b:includable id='pagination'>
    <b:with value='data:nbr - (data:nbr % 2)' var='nbr'>
      <b:loop index='i' values='data:links' var='link'>
        <b:if cond='data:link.id == data:view.pageId'>
          <b:with value='data:i + 1' var='next'>
          <b:with value='data:i - 1' var='prev'>
            <b:include cond='data:prev gte 0' name='firstAndPreviousPage'/>
            <b:include name='numberedPages'/>
            <b:include cond='data:next gte 0 and data:links.size - 1 != data:i' name='lastAndNextPage'/>
          </b:with>
          </b:with>
        </b:if>
      </b:loop>
    </b:with>
  </b:includable>

  <b:includable id='startTour'>
    <li><a expr:href='data:links.first.href' expr:title='data:title.escaped'><data:title/></a></li>
  </b:includable>

  <b:includable id='style'>
    <b:comment>ALTERNATIVE BASIC STYLE IF VERTICAL</b:comment>
<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:includable id='content'><b:comment>disabled</b:comment></b:includable>
  <b:includable id='overflowButton'><b:comment>disabled</b:comment></b:includable>
  <b:includable id='overflowablePageList'><b:comment>disabled</b:comment></b:includable>
  <b:includable id='pageLink'><b:comment>disabled</b:comment></b:includable>
  <b:includable id='pageList'><b:comment>disabled</b:comment></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