DéveloppementsBac à sable

Une pagination automatique avec le gadget Pages

Description Gadget Gadget Version Template Version
Code XML de démonstration du gadget PageList, qui permet d'afficher une pagination automatique numérotée des pages autonomes.
PageList
1
1
2
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.


<b:widget id='PageList1' locked='false' mobile='no' title='Start the pages tour' type='PageList'>
  <b:includable id='main'>
  <!-- Demo - Pages 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: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 name='quickedit'/>
    </div>
    <b:include cond='data:widget.sectionId not in ["crosscol","crosscol-overflow"]' name='style'/>
  </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 expr:class='data:links[pager].isCurrentPage ? "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='8' 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'>
    <!-- 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>
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Populaire