Quelques améliorations aux squelettes

  de petits ajouts faciles qui améliorent l’UI

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...

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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 INITIAL 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)
Cela complète facilement la prise de connaissance des informations
 <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 une bulle d’information (causée par le survol avec l’attribut <a href= title = "..." >.

- prévoir des tris interactifs dans vos listes (au choix de l’utilisateur) : #TRI
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}.

- 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 (tout afficher) :
vous savez déjà rajouter une 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, 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 ( 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.

- se limiter à afficher l’arborescence des rubriques, car vous trouvez le plan du site trop verbeux, et long à afficher comme à parcourir (utilisez Ctrl+F dans votre navigateur) :
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 la boucle article [3], 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 [4] ou simplement #TOTAL_BOUCLE.

Au final, vous pouvez retrouver presque toutes ces astuces dans :
- créer une noisette commune d’affichage des listes d’articles (avec de nombreux sélecteurs possibles, pour pouvoir l’appeler dans toutes vos pages d’affichage)

  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


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

[1Mais une "tradition d’ergonomie" historique chez SPIP considère qu’il s’agit d’une ’mauvaise’ pratique !?

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

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

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


Liens visibles seulement pour les inscrits.

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

Répondre à cet article