SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 207 visiteurs en ce moment

Accueil > Squelettes > Squelettes par défaut > Un survol des squelettes de la dist SPIP v2

Un survol des squelettes de la dist SPIP v2

6 juin 2013 – par YannX

6 votes

Le jeu de squelettes distribué avec SPIP propose une visualisation et une navigation d’accès aux articles, adaptées à la consultation des nouveaux articles publiés et au suivi des réactions des lecteurs.

Comme il n’est pas toujours facile de s’y orienter, voici un récapitulatif commenté, qui vous introduit aussi à la modification de squelettes...

Nota Bene : La nomenclature des noms de squelettes principaux, est toujours valide en SPIP 3, car elle n’a pas changé depuis les débuts de SPIP.

Cette nomenclature d’appels standard est bien sûr également celle utilisée pour l’appel des squelettes de Zpip, seul change ensuite le mode de composition des squelettes (un squelette principal dans la site, ou un appel d’une batterie de noisettes au sein d’une structure body.html avec les systèmes Z)

Rassurez-vous, il n’est pas besoin de les connaitre en détail ; ce jeu de squelettes est bien organisé, et l’article a plutôt vocation à vous aider à percevoir les liens entre pages de squelettes, pour trouver plus rapidement le squelette à modifier !

Signalons la référence pour trouver Où placer les fichiers de squelettes.

Voici une liste de tous les squelettes de ./squelettes-dist, déjà organisée par groupes :

Squelettes de la dist Spip v2 (PNG)

De plus, la navigation permettant de sauter de l’une à l’autre des pages est déjà prévue automatiquement dans les squelettes, par des liens préparés sur les titres affichés.

Pour en comprendre le code, voir l’usage des Balises #URL_PAGE et #URL_ dédiés présentées ci-dessous, sur le Glossaire de SPIP .

Qu’y trouve-t-on ?

Les squelettes principaux d’affichage éditorial

Il s’agit des squelettes [1] affichant un article, une rubrique et, (à ne pas oublier) l’accueil du site ou plutôt son sommaire.

Les liens d’URL-appel vers ces squelettes sont proposés simplement par SPIP, avec les balises #URL_ARTICLE, #URL_RUBRIQUE et la page d’accueil est automatiquement mise en correspondance avec #URL_SITE_SPIP

Ainsi vous trouverez régulièrement dans vos squelettes des liens écrits de la façon suivante :

  1. <h3 class="entry-title">
  2. <a href="#URL_ARTICLE" rel="bookmark">
  3. [(#TITRE|textebrut)]</a> </h3>

où vous reconnaissez l’appel d’un lien <a href=".."> appliqué au texte (à surligner), généré par la balise #TITRE extraite de l’article courant.
Petite astuce : rajoutez comme ci-dessus un filtre de texte pour protéger un affichage correct, si vos rédacteurs introduisaient des caractères spéciaux...

La page appelée sera fonction du contexte (de l’environnement de boucles), où sera récupéré un id_ clé d’index de l’enregistrement voulu dans la table éponyme..

De même, si le site utilise les objets complémentaires breve, auteur et mot-clé, voire site syndiqué, avec pareillement les balises #URL_BREVE, #URL_AUTEUR #URL_MOT... pour provoquer l’appel du lien d’affichage de la page créée avec le squelette de même nom !

Pour les Documents / Pièces jointes (images ou fichiers divers), il s’agit d’un processus différent.... qui sera expliqué par ailleurs !

D’autres squelettes spécialisés

Les squelettes non encore étudiés se rapportent à des affichages récapitulatifs directs, plus rarement utilisés par vos visiteurs :
-  le plan propose d’afficher tous les titres de tous les articles, dans toutes les rubriques du site : il est construit avec une série de boucles imbriquées (rubriques -> articles ), avec même une récursion pour parcourir les rubriques dans les rubriques... [2]
-  le sitemap génère automatiquement un plan au format XML pour l’indexation par les moteurs de recherche...
-  le backend -et ses fichiers dérivés pour les rubriques- génère automatiquement les fichiers spéciaux au format XML pour les flux RSS de suivi des mises-à-jour du site.
-  le squelette nouveautes est clairement un fond de page standard, pour que SPIP envoie par mail aux utilisateurs une description des dernières informations publiées.
-  enfin la page recherche est appelée en résultat [3] à votre utilisation en espace public du #FORMULAIRE_RECHERCHE (analogue au « rechercher » de l’espace privé !)

Pour appeler ces squelettes, -comprenons bien- générer un lien cliquable dans un squelette (par exemple depuis le sommaire), il faudra utiliser la balise #URL_PAGE{...}, en donnant en paramètre le nom du squelette à appeler(sans son suffixe, qui devra être .html sur le serveur !).

Exemple : vous voudriez rajouter dans votre pied de page, le lien vers la visualisation directe du fichier « sitemap » (pourquoi pas ?) :
vous rajouterez dans... inc-pied.html
Attention ! faites d’abord une copie [4] dans ./squelettes sur laquelle vous travaillerez après la ligne 7 :

        <a rel="contents" href="#URL_PAGE{plan}"><:plan_site:></a> |

la ligne exemple

<a  href="#URL_PAGE{sitemap}" title="Fichier spécifique pour les robots d'indexation">Carte du Site</a> |

...
(pour information le libellé symbolique<:plan_site:> ci-dessus est une « chaine de langue » automatiquement traduite à l’affichage, en francais ou dans une autre langue en usage sur votre site).

Noisettes de base

Jusqu’à présent, on peut croire que chaque page-type HTML du site public est générée par l’application d’un fichier squelette unique [5]. Ce n’est pas tout-à-fait vrai, car dans un but de simplification, la « dist » propose des morceaux de squelettes dédiés [6] pour reprendre l’affichage de l’entete et du pied des pages du site , respectivement depuis inc-entete.html et inc-pied.html : la « magie » de cette introduction (une inclusion en langage de programmation) correspond aux instructions du genre de :

        <INCLURE{fond=inc-entete}>  

Pareillement, la noisette inc-head.html permet de générer à votre guise les indications de mots-clés insérés automatiquement dans le « header » HTML [7] de la page, mais aussi des feuilles de style CSS à insérer automatiquement : vous noterez que ce squelette utilise largement la balise #CHEMIN, celle qui permet de rechercher le fichier ciblé, tant dans votre répertoire ./squelettes que dans le répertoire natif à SPIP ./squelettes-dist (et aussi éventuellement dans les répertoires des plugins..).

Les autres noisettes proposées fournissent un premier niveau de « factorisation paramétrée », en ce sens qu’elles sont adaptées à présenter un élément d’information complémentaire (document, messages de forum, pétition...) qui s’insère dans le squelette de page Article.

Regardons par exemple inc-documents.html qui est appelé par l’instruction ci-dessous (la balise [(#REM)...] contient du commentaire) :

  1. [(#REM) Gestion du portfolio et des documents
  2. Le critere {env} permet de passer d'autres arguments de la page
  3. par exemple l'id_document choisi pour un affichage complet
  4. ]
  5. [(#INCLURE{fond=inc-documents}{id_article}{env})]

Nous retrouvons une balise #INCLURE que nous avons déjà vue [8] qui nécessite un paramètre (mis entre accolades) nommé fond=....., ici suivi de deux autres paramètres, en particulier le code id_article, qui permet de transmettre à la noisette, le numéro identifiant de l’article dont on doit afficher les documents joints.

Plus généralement, la syntaxe SPIP permet de « passer les paramètres » contextuels de l’environnement, très facilement, en rajoutant le {env}, comme celui qui suit l’appel ci-dessus...

Et les Formulaires

SPIP propose automatiquement des Formulaires pour piloter les interactions avec le visiteur ; mais en général vous n’aurez pas à les modifier (au moins dans un premier temps. Vous pourrez sans soucis omettre la lecture de la suite, si vous n’en n’avez pas un besoin critique immédiat !

Pour agir en interaction avec l’utilisateur, on doit accepter la saisie d’informations (en commande dactylographiée, dans l’attente des commandes vocales ;-), saisie effectuée dans les champs de Formulaires proposés.

Plutôt que le formulaire de login, bien connu de tout rédacteur SPIP, on prendra comme exemple le formulaire de recherche, déjà évoqué comme ayant un fonctionnement d’appel du squelette de résultats de recherche : sans rentrer dans les détails des Formulaires CVT, ce squelette de formulaire est défini dans un sous-répertoire ./squelettes/formulaires/ , appelé par la seule présence de la balise #FORMULAIRE_RECHERCHE que vous trouverez dans la plupart des squelettes principaux...

Nous allons regarder plus largement le code correspondant, qui va nous donner l’opportunité d’une introduction à la structuration habituelle aux squelettes de la dist ; voici les lignes proches (on a recopié juste en prenant les balises de fin du contenu/conteneur) :

  1. </div><!--#contenu-->
  2. </div><!--#conteneur-->
  3.  
  4. [(#REM) Menu de navigation laterale ]
  5. <div id="navigation">
  6.  
  7. [(#REM) Menu de navigation par rubriques ]
  8. <INCLURE{fond=inc-rubriques}>
  9.  
  10. #FORMULAIRE_RECHERCHE
  11.  
  12. </div><!--#navigation-->

Télécharger

N.B. Pour ceux qui ne seraient pas habitués aux syntaxes HTML, rappelons que sa syntaxe utilise des « balises » mises entre crochets (ces signes < et >) souvent avec deux balises appariées, la seconde avec le même nom précédé d’un slash, donc commençant par </..
-  ainsi les <div> marquent une division, structurant le squelette
-  et les < !— .. —> marquent un commentaire informatif en HTML, (ici pour préciser visuellement les fins des « div » dans le code.)
-  vous connaissiez déjà les REMarques en SPIP (SPIP les supprime avant d’envoyer le HTML)
-  et vous reconnaissez le <INCLURE{fond=inc-rubriques}>, qui propose une inclusion de source, en l’occurrence un sous-menu.

N.B. ; Vous trouverez ailleurs des articles sur la personnalisation de l’apparence, la charte graphique donné par la dist et comment la colorier...

P.-S.

Vous trouverez en pièces jointes :
-  l’image « carte heuristique » illustrant cet article,
-  un tirage PDF de la même, pour votre documentation personnelle
-  le fichier .mm zippé (qui vous propose le source à relire) pour FreeMind / FreePlane

Et profitons-en pour vous rappeler l’outil ultime pour identifier facilement le squelette courant : le plugin SkelEditor.

Notes

[1Les noms de fichiers de squelettes (d’extension .html implicite) sont indiqués en gras

[2Il est facile de tirer du plan.html un fichier arbo qui n’affiche pas les articles, et il peut même être utile d’y rajouter le critère {tout} aux boucles RUBRIQUES, pour en visualiser la totalité -avec et sans articles publiés..

[3Le mode d’appel de ce fonctionnement sort du cadre de cet article...

[4Copie automatisée par le plugin Skeleditor.

[5Ce squelette HTML permet presque de visualiser directement la présentation d’un clic dans le navigateur, sans même de serveur Web en local : ce n’est pas tout-à-fait vrai !

[6Des noisettes pour notre écureuil favori, dans le vocabulaire de SPIP !

[7Connaissance des META et Balises HTML vivement recommandée.

[8Les deux formes des balises ( #INCLURE{..} et <INCLURE{..}> sont expliquées dans la documentation officielle : des nuances internes à l’exécution, invisibles à votre vue !

Dernière modification de cette page le 12 mars 2014

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Speedsyndic pour SPIP 2 et SPIP 3

    11 octobre 2010 – 26 commentaires

    Ce plugin est une version compatible spip 2.0.x / 2.1 / 3.1 du plugin Speedsyndic Note : Une bonne partie du texte ci-dessous a été pompé de cet article, expliquant la version précédente du plugin. je n’ai fait qu’adapter le code pour spip 2, (...)

  • HTML Purifier

    5 janvier 2011 – commentaires

    Pour sécuriser l’affichage de certains textes (ceux qui proviennent potentiellement non pas des rédacteurs, mais de visiteurs non enregistrés ou de contributeurs externes, comme les forums ou les contenus des sites syndiqués), SPIP utilise en interne (...)

  • Réservation d’événements

    16 mars 2015 – 341 commentaires

    Ce plugin permet d’offrir aux visiteurs de s’inscrire pour un évènement du plugin Agenda et de gérer les réservations enregistrées. Installation Le plugin s’installe comme n’importe quel plugin. il nécessite : Agenda API de vérification (...)

  • Facteur

    21 janvier 2010 – 394 commentaires

    Un plugin pour regrouper toutes les fonctions avancées autour de l’envoi de courriels. Introduction SPIP propose une fonction générique envoyer_mail() pour envoyer un courriel. Elle est assez simple d’utilisation mais peut paraître limitée (...)

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2231 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

Ça spipe par là