SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 290 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 ?

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

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)

Ça spipe par là