Quelques améliorations aux squelettes

A partir des squelettes basiques de la Dist, on trouve souvent sur les sites SPIP, de petites améliorations, qu’il serait bien pratique de reporter sur son site, mais comment oser le faire quand on débute ?

Alors, voici quelques indications...

Article publié le 22 juin 2018, et actualisé en mars 2020

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Encore une fois, ces modifications sont sans grand risque, car il sera facile de revenir en arrière : il suffit d’effacer le fichier modifié (du dossier ./squelettes).
Et l’une des solutions conseillées, c’est d’utiliser le plugin SkelEditor, comme proposé dans MODIFIER un JEU de SQUELETTES.

 donner un aperçu de l’article au survol du lien d’appel

L’appel est bien sûr généré par une ligne avec les deux balises #URL_ARTICLE et #TITRE à l’intérieur d’une boucle (ARTICLES)
L’utilisation d’une bulle d’aide automatique au survol complète facilement la prise de connaissance des informations (sauf sur écran tactile ;-) :
 <a href="#URL_ARTICLE" [title="(#INTRODUCTION|textebrut)"]>#TITRE</a>, en particulier [1] sur un site de documentation...
Le filtre |textebrut) expurge l’affichage pour éviter de mauvaises apparitions de caractères spéciaux qui déformeraient le texte montré dans cette bulle d’information (causée par le survol-souris avec l’attribut <a href= title = "..." >.

 prévoir des tris interactifs dans vos listes

La balise et le critère #TRI facilitent une interaction rapide de l’ordre d’affichage d’une boucle au choix de l’utilisateur.
Il faut définir l’affichage d’une série de tris, en indiquant le champ et le libellé correspondant,
et dans la boucle rajouter un critère {tri champ_tri_par_defaut}.

 compteur sur les listes de recherche et d’affichage

Pour indiquer un compteur sur les diverses pages de recherche et d’affichage (surtout les listes paginées ?), il suffit de rajouter dans les boucles, au niveau du titre préalable
[<small>(#GRAND_TOTAL)</small>]
Souvent, une ligne est rajoutée en début de la boucle, avec un style de niveau :
par exemple

<B_articles>
<h2>Consulter les articles suivants :  [<small>(#GRAND_TOTAL)</small>]</h2>
    <BOUCLE_articles(ARTICLES) {id_rubrique} {par num}{inverse} {pagination 10}>

 rajouter une boucle de pagination développable

vous savez déjà rajouter un critère de pagination :

  • positionner une balise #ANCRE_PAGINATION avant la boucle concernée
  • ajouter le critère {pagination 15}> pour afficher par groupes de 15
  • préciser une ligne de déplacement en ajoutant la ligne (avant ou/et après le contenu de la boucle) [<p class="pagination">(#PAGINATION)</p>] ;
    pour pouvoir ’tout afficher’, pas la peine de se casser la tète, c’est déjà prévu : modifiez juste en [<p class="pagination">(#PAGINATION{prive})</p>] [2]

 rajouter la rubrique de l’article aux listes d’articles

Il suffit de rajouter dans les boucles, au niveau du titre préalable
[<small> ((#INFO_TITRE{rubrique,#ID_RUBRIQUE}))</small>]
Et si vous voulez rajouter (discrètement) un lien d’accès à cette rubrique [3], vous complèterez par [<small>((#INFO_TITRE{rubrique,#ID_RUBRIQUE}) _ <a href="#URL_RUBRIQUE{#ID_RUBRIQUE}"> -&gt;</a>)</small>].

 conditionner l’affichage d’un champ

Cela s’exprime en utilisant la syntaxe de condition sur la balise : ce peut être :

  • si le champ est vide : la syntaxe habituelle d’une condition d’existence d’un champ permet d’omettre l’affichage correspondant à sa balise (cf. supra)
  • si le champ n’est pas spécifié dans l’environnement (dans les paramètres d’appel de la boucle, par exemple), on ’échappe’ l’affichage dans une partie conditionnelle testant la présence de ce paramètre dans l’environnement, par [(#ENV{id_rubrique}|non)  ..., ainsi dans le cas d’un critère conditionnel.

afficher seulement l’arborescence des rubriques
Pour limiter la page ?page=plan à afficher l’arborescence des rubriques, car vous trouvez le plan du site trop verbeux, et long à afficher comme à parcourir [4], il suffit de créer une copie du squelette plan.html , que vous renommerez par exemple arbo.html (ou bien page-arbo.html si vous travailliez encore en Zpip ), et d’en retirer, dans le squelette de la boucle article [5], la ligne d’instructions affichant chaque article avec son lien d’appel pour affichage.
On conserve néanmoins la boucle (ARTICLES) pour pouvoir afficher le nombre d’articles trouvés à chaque rubrique (voyez ci-dessus comment y rajouter le champ #GRAND_TOTAL [6] ou simplement #TOTAL_BOUCLE.

Au final, vous pouvez retrouver presque toutes ces astuces dans la noisette suivante...

 Créer une noisette commune d’affichage des listes d’articles

Celle-ci comporte de nombreux sélecteurs possibles, pour pouvoir l’appeler dans toutes vos pages d’affichage (c’est d’ailleurs une évolution également prise par SPIP avec les :

  1. [(#REM)   inclure/inc-liste-articles.html        <B_articles>
  2.             #ANCRE_PAGINATION
  3.               <h2>Consulter les articles suivants :  [<small>(#GRAND_TOTAL)</small>]</h2>
  4.               <p>#TRI{titre,'Trier par titre'} | #TRI{date,'Trier par date'}</p>
  5.               <ul>
  6.                 <BOUCLE_articles(ARTICLES) {id_mot?}{recherche ?}{id_rubrique?}
  7.                                           {tri titre}{par popularite}{inverse} {pagination 10} >
  8.                 <li>
  9.                 <a href="#URL_ARTICLE" [title="(#INTRODUCTION|textebrut)"]>#TITRE</a>
  10.               [(#ENV{id_rubrique}|non) [<small>((#INFO_TITRE{rubrique,#ID_RUBRIQUE}) <a href="#URL_RUBRIQUE{#ID_RUBRIQUE}"> -&gt;</a>)</small>]]
  11. _  [(#REM)
  12.                   <span class="dater">[(#DATE|affdate_jourcourt)][, <:par_auteur:> (#LESAUTEURS)]</span></li>
  13.                 ]
  14.                 </BOUCLE_articles>
  15.             </ul>
  16.             [<p class="pagination">(#PAGINATION{prive})</p>]
  17.         </div>
  18.         </B_articles>

Télécharger

Le cas d’un lien rapide pour lire l’article suivant (comme feuilleter un livre) sera développé dans l’article A la page suivante (ou précédente)...


Merci de nous signaler les coquilles, imprécisions ou erreurs qui figureraient dans cette page.

[1Mais une "tradition d’ergonomie" historique chez SPIP considérait qu’il s’agit d’une ’mauvaise’ pratique, justifiée dans le cas d’usage des tablettes et smartphones...

[2Ce paramètre ajouté, précise le modèle spécifique à utiliser...

[3Noter neanmoins que le lien d’accès à la rubrique parente est normalement déjà présenté dans le fil d’Ariane en haut de la page.

[4Pensez à utilisez Ctrl+F dans votre navigateur pour trouver plus vite votre cible dans une longue page !

[5Dans les deux boucles Articles du premier niveau et de la récurrence...

[6Indispensable en cas de boucle avec pagination, ce champ #GRAND_TOTAL correspond à l’ensemble de la portée de la requête !


Liens A2A visibles seulement pour les inscrits.
Liens visibles seulement pour les inscrits.

Article publié le 22 juin 2018, et actualisé en mars 2020 .

Répondre à cet article