Une pagination automatique avec le gadget Libellés

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>


Spotlight

L'Éditeur XML de Thème Blogger : Quand le BackEnd Rencontre le FrontEnd

Populaires cette semaine

Ajouter des boutons à la barre de partage Blogger