La Gestion des Ancres et Paginations

Si vous utilisez un squelette pour construire une page longue, par exemple pour éditer un livre, vos visiteurs apprécieront probablement d’utiliser des ancres pour aller directement à une section de votre page, ou pour revenir à un sommaire automatique ; vous pourrez aussi vouloir utiliser les facilités de pagination proposées dans les critères et balises...

Quelques explications pour travailler en SPIP avec les ancres nommées en HTML, et un aperçu vers des plugins dédiés.

 
 
 
 
 
 
 
 
 
 
 
 
 
 

 Qu’est-ce qu’une ancre ?

Votre navigateur peut interpréter certains clics sur des liens <a href="{url_page}#{ancre}" de la page chargée, comme des repositionnements internes pour atteindre rapidement la position ancre de la page url_page..

- Pour cela, il faudrait générer le code HTML suivant,

  • pour le lien : <a href="{url_page}#{ancre}"
  • et pour positionner l’ancre : <a name="{ancre}"/>,
    mais nous verrons aussi l’utilisation directe de l’attribut CSS id=.

Notez que cette facilité est souvent utilisée dans les pages longues [1] pour Remonter (sans préciser qu’il s’agit du début de la page..), ce qui correspond de la façon la plus simple à :
<a href="#" title="Retour au début de la page.">Remonter.</a>.

 Raccourcis d’édition

En bon rédacteur de SPIP, vous savez déjà utiliser le raccourci d’article (écrire [->art33] pour créer un lien vers l’article 33) ! Vous pourrez facilement renvoyer à un endroit spécifique d’un article, en complétant ce raccourci de la façon suivante : [->art33#ancre], qui génèrera le code HTML attendu décrit ci-dessus.
Mais si vous voulez que ce lien soit efficace, vous n’aurez garde d’oublier de préciser dans le texte de l’article visé, la position de l’ancre nommée, en rajoutant le raccourci standard SPIP à l’endroit visé : taper[definition_ancre<-] [2] .
Par exemple, dans le texte de cet article, on utilisera plusieurs fois le raccourci de retour à l’ancre qui génère <a name="definition_ancre"></a> : voyez !

 Sommaire de page article

Cette facilité de saut rapide vers des ancrages nommés dans la page Web, est désormais utilisée dans ce site par la génération d’un sommaire dans les articles.

Celui-ci est construit grâce à la détection des Titres Principaux [3] dans le corps de l’article, par la lame Sommaire du CS, ou le plugin simple correspondant, qui insère le code HTML d’une ancre nommée dans le contenu affiché.
Parallèlement, le squelette de l’article comprend (ici à la suite de #CHAPO) la balise spécifique #CS_SOMMAIRE pour intégrer un sommaire généré, simple liste de liens vers les ancres détectées...

 Table des matières dans le squelette

Mais vous pourriez vouloir créer une table des matières plus complexe, par exemple avec le lien vers le début des rubriques et articles intégrés dans une page complète d’édition [4] de votre site.

Imaginons d’utiliser comme nom d’ancre, le numéro d’article ou de rubrique : en préfixant le numéro d’id ( #ID_RUBRIQUE ou #ID_ARTICLE ) d’une lettre pour éviter de confondre article et rubrique de meme numéro, il faudrait -pour aller au début local de la rubrique 33- donc générer dans votre boucle de parcours des rubriques quelque chose comme :
 <a href="?page=livre#R33" [ title="(#INTRODUCTION|textebrut)"] >[(#TITRE)]</a>
Pas de problèmes, me direz-vous :

  • on utilise la balise #URL_PAGE#SELF pour récupérer l’accès à la page courante,
  • on rajoute les caractères "#", "R", et "#ID_RUBRIQUE"
  • ne vous laissez pas perturber par l’attribut "[ title="(#INTRODUCTION|textebrut)"]" juste utile pour montrer une bulle d’explication introductive au contenu de la rubrique ciblée....
    et :
    çà marche pas !!

Pourquoi ? Vous retrouvez bien un lien généré dans votre source de page résultant [5] :

<a href="?page=livre33"..>

 : et le dièse, et le R ?

  • le squelette a sans doute généré " ?page=livre#R33", ce que SPIP a interprété en reconnaissant le dièse marqueur de début d’une balise nommée en Majuscules.... #R non trouvée !

Plutôt que d’utiliser une minuscule (ce qui n’activerait pas le compilateur SPIP), ou |concat{#} en un inutilement compliqué <a href="[(#SELF|concat{'#'}|concat{R#ID_RUBRIQUE})]", il serait préférable d’utiliser le filtre dédié dans la liste !
Et voila :
  <li><a href="[(#SELF|ancre_url{r#ID_RUBRIQUE})]"[ title="(#INTRODUCTION|textebrut)"] >...

 Génération des ancres avec retour

Quant à la génération de l’ancre nommée dans la boucle des rubriques affichant le texte complet, avec retour au sommaire, voici comment l’intégrer :
- vous pourriez générer pareillement l’instruction <a name=" ...."></a> [6],
- mais il est presque plus simple d’utiliser l’identification implicite de l’attribut id= :
(<a href="#" id="r#ID_RUBRIQUE" title="Retour au début de la page.">Up</a>)
- et remplacer automatiquement le lien de remontée par une flèche standard dans SPIP par une classe CSS, telle que magiquement surchargée à l’exemple du Couteau Suisse :

  1. a.ancre {background-color: transparent;
  2. background-image: url("prive/images/spip_out.gif");
  3. background-origin: padding-box;
  4. background-position: left center;
  5. background-repeat: no-repeat;
  6. background-size: auto auto;
  7. padding-left: 10px;}

Télécharger

 Boucle d’édition de contenu d’une rubrique ancrée

Vous pouvez utiliser la boucle ci-dessous, dans un contexte de Rubrique [7] du secteur voulu.

  1. <B_contenu_rubriques>
  2. <ul><h2>Chapitres</h2>
  3. <BOUCLE_contenu_rubriques(RUBRIQUES) {id_parent} {par titre}>
  4. <hr> [(#REM) Edition du contenu de la rubrique avec ancre et retour au sommaire ]
  5. <li>
  6. <h2><a href="#URL_RUBRIQUE" class="transform_up">#TITRE</a>
  7. (<a href="#" class="ancre" id="r#ID_RUBRIQUE" title="Retour au début de la page.">Up</a>)
  8. </h2>
  9.  
  10. <B_contenu_articles>
  11. <ul>
  12. <BOUCLE_contenu_articles(ARTICLES) {id_rubrique} {par titre}>
  13. <li><a href="#URL_ARTICLE">#TITRE</a>
  14. [(#TEXTE)]</li>
  15. </BOUCLE_contenu_articles>
  16. </ul>
  17. </B_contenu_articles>
  18.  
  19. <BOUCLE_sous_rubriques(BOUCLE_contenu_rubriques)></BOUCLE_sous_rubriques>
  20. </li>
  21. </BOUCLE_contenu_rubriques>
  22. </ul>
  23. </B_contenu_rubriques>
  24. <B_contenu_rubriques>
  25. <ul><h2>Chapitres</h2>
  26. <BOUCLE_contenu_rubriques(RUBRIQUES) {id_parent} {par titre}>
  27. <hr>
  28. <li><a href="#"
  29. <h2><a href="#URL_RUBRIQUE" class="transform_up">#TITRE</a></h2>
  30.  
  31. <B_articles>
  32. <ul>
  33. <BOUCLE_contenu_articles(ARTICLES) {id_rubrique} {par titre}>
  34. <li><a href="#URL_ARTICLE">#TITRE</a>
  35. [(#TEXTE)]</li>
  36. </BOUCLE_articles>
  37. </ul>
  38. </B_articles>
  39.  
  40. <BOUCLE_sous_rubriques(BOUCLE_contenu_rubriques)></BOUCLE_sous_rubriques>
  41. </li>
  42. </BOUCLE_contenu_rubriques>
  43. </ul>
  44. </B_contenu_rubriques>
  45.  

Télécharger

 Et la Pagination ...

Notez d’abord que la pagination correspond à une approche différente : au lieu de proposer des déplacements rapides dans la page avec le système d’ancres décrit ci-dessus, la pagination dans une boucle vous automatise le déplacement entre plusieurs pages d’un même squelette, sans avoir a écrire autre chose qu’une balise pour l’affichage des liens, et un critère supplémentaire dans la boucle.

Pour cela, il suffit de rajouter deux éléments dans la boucle concernée :
- un critère {pagination} dans l’entete de boucle,
- une balise de champ#PAGINATION à afficher dans la boucle,
et c’est tout !


Enfin, vous trouverez divers plugins pour améliorer les déplacements dans la page, importants en termes d’accessibilité pour les mal-voyants, par exemple les scripts qui permettent de 1) masquer le "Aller au contenu", "Aller à la rechercher" etc, et 2) de faire des menus déroulants qui marche à la fois à la souris et au clavier : utilisés par l’espace privé de SPIP, s’ils sont génériques, cela permettrait diffuser des "bonnes pratiques" complémentaires et simples à mettre en oeuvre....


Merci de nous signaler les coquilles ou erreurs qui figureraient dans cette page.

[1Pas sur SPN actuellement, on a préféré vous proposer des liens en bas de page pour "feuilleter" le site.

[2Sans espaces, ni autres caractères spéciaux dans votre ancre, car cela doit pouvoir faire partie de l’URL.

[3Les titres principaux sont déclarées par l’encadrement typographique {{{ ..  }}} dans le corps de texte.

[4Cet article a été rédigé à la suite d’un tel besoin pour un site Intranet...avec le secours immédiat du canal IRC : voir Utiliser le canal IRC.

[5Tous les navigateurs savent vous "Afficher le Source" (souvent Ctrl+U.

[6Penser toujours à fermer les tags de balises HTML !

[7Dans le "contexte de Rubrique" implique que l’environnement connaisse une valeur pour une Rubrique !


Liens visibles seulement pour les inscrits.

Article publié le 28 juin 2012, et actualisé en juillet 2016 .

Répondre à cet article