1 / 32

Prendre en compte les éléments

Boucles et Balises SPIP 2.0.6. TRAVAUX PRATIQUES. Arborescence des balises HTML. Fichier HTML. Boucles et Balises SPIP. Règles CSS. Boîtes imbriquées. <BOUCLE n (TYPE){critère1}...{critèrex} >. Code HTML + Balises SPIP. </BOUCLE n >.

werner
Download Presentation

Prendre en compte les éléments

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. BouclesetBalisesSPIP2.0.6 TRAVAUX PRATIQUES Arborescence des balises HTML Fichier HTML Boucles et Balises SPIP Règles CSS Boîtes imbriquées <BOUCLEn(TYPE){critère1}...{critèrex}> Code HTML + Balises SPIP </BOUCLEn> Cours « Squelettes SPIP » - Mardi 21 avril et Mardi 5 mai 2009, 8h00-18h00 François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 5 rue des Gazomètres, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch -http://icp.ge.ch/sem/cms-spip/ Prendre en compte les éléments Maîtriser la syntaxe et Exploiter les générateurs de Boucles et Balises et relations

  2. Plan de travail proposé Dans le temps imparti pour les Travaux Pratiques (TP) vous choisirez en fonction de vos objectifs et ambitions, l’un des trois axes d’activité suivants (ordre croissant de difficulté) : 1. Procéder selon le tutoriel SPIP original tel qu’il est proposé sur le site spip.net et reproduit-complété dans ce document pour la présentation, en y apportant vos touches personnelles 2. Reprendre l’un des 10 fichiers types du squelette SPIP et procéder à diverses modifications/compléments des boucles et balises SPIP 3. Utiliser l’un des trois templates présentés dans « CSS : Quelques exemples de mise en page fluide en n colonnes »(http://icp.ge.ch/sem/cms-spip/article.php3?id_article=166) et y « insérer » l’un des 10 fichiers types du squelette SPIP, puis procéder à diverses modifications des « Boucles & Balises SPIP »

  3. Rappel (1/1) • <B_nom> • Code HTML optionnel avant • <BOUCLE_nom(TYPE){critère1}{critère2}...{critèrex}> • Code HTML • [ texte optionnel avant (#BALISE|filtre|filtre...) texte optionnel après ] • <BOUCLE_recursive(BOUCLE_nom)> • </BOUCLE_recursive> • </BOUCLE_nom> • Code HTML optionnel après • </B_nom> • Code HTML alternatif • <//B_nom>

  4. En début de chaque squelette (1/1) En début de chaque squelette placez systématiquement la balise : #CACHE{0} Ainsi la page sera systématiquement recalculée Une fois le squelette terminé, une valeur courante est : #CACHE{24*3600}

  5. Mon premier squelette (1/4) Afficher le Titre de l’article 1 Dans le répertoire squelettes, déposez un fichier « tutoriel.html », qui contient ce qui suit : <BOUCLE_article(ARTICLES){id_article=1}> #TITRE </BOUCLE_article> Fichier « tutoriel.html » Le critère id_article est utilisé pour sélectionner un article, en l'occurrence ici l’article 1. Maintenant rechargez la page http://localhost/mon-site/spip.php?page=tutoriel Cette fois SPIP cherche le titre (balise #TITRE) de l’article n°1 de la base, et l’inscrit à la place de #TITRE.

  6. Ajoutez ensuite les champs manquants pour parfaire l’affichage de l’article : #SURTITRE, #LESAUTEURS, #SOUSTITRE, #NOTES, #PS, etc. Rechargez la page http://localhost/mon-site/spip.php?page=tutoriel, vous obtenez alors toutes les composantes de l'article n° 1. Remarque : Pour afficher l'article 5, il suffit de modifier la ligne qui définit la boucle article : <BOUCLE_article(ARTICLES){id_article=5}> Mon premier squelette (2/4) Afficher le Titre, le Chapo et le Texte de l’article 1 Ajoutez du HTML et d’autres appels de « champs » SPIP au fichier tutoriel.html, en l'occurrence le chapeau (#CHAPO) et le texte principal (#TEXTE) : En principe il faudrait faire appel aux CSS mais cela risque de freiner la démarche, car ici, dans cette partie pratique, on ne vise que la maîtrise des Boucles & Balises SPIP. Le design est traité ailleurs. <BOUCLE_article(ARTICLES){id_article=1}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div> </BOUCLE_article> Rechargez la page http://localhost/mon-site/spip.php?page=tutoriel, ce qui donne l'essentiel de l'article n° 1.

  7. Mon premier squelette (3/4) Les balises calculées #NOTES #INTRODUCTION #LESAUTEURS #PETITION #URL_ARTICLE #FORMULAIRE_FORUM #FORMULAIRE_SIGNATURE #PARAMETRES_FORUM Toutes les balises d'un article sont récupérables dans un squelette : Les balises #ID_ARTICLE #SURTITRE #TITRE #SOUSTITRE #DESCRIPTIF #CHAPO #TEXTE #PS Les balises #DATE #DATE_REDAC #DATE_MODIF #ID_RUBRIQUE #ID_SECTEUR #NOM_SITE #URL_SITE #VISITES #POPULARITE #LANG Les logos #LOGO_ARTICLE #LOGO_ARTICLE_RUBRIQUE #LOGO_RUBRIQUE #LOGO_ARTICLE_NORMAL #LOGO_ARTICLE_SURVOL

  8. Mon premier squelette (4/4) • <BOUCLE_article(ARTICLES) {id_article=5} • <html> • <head> • <titre>#TITRE</titre> • </head> • <body> • [(#LOGO_ARTICLE||image_reduire{200,200})] • <h2>#SURTITRE></h2> • <h1>#TITRE></h1> • <h2>#SOUSTITRE></h2> • <strong>#CHAPO</strong> • <div align="justify">#TEXTE</div> • [<h2>Notes :</h2>(#NOTES)] • <p><small> [(#DATE|nom_jour) ][(#DATE|affdate)] • [, Auteurs : (#LESAUTEURS)]</small></p> • <blockquote>Post-scriptum : #PS </blockquote> • </body> • </html> • </BOUCLE_article> Exemple • Afficher : • Surtitre • Titre • Soustitre • Chapo • Texte • Notes • Date • Auteurs • PS • de l’article 5

  9. Modifions dans le squelette « tutoriel html » la ligne qui définit la « boucle article » : <BOUCLE_article(ARTICLES){id_article}> Comme vous le voyez, on remplace simplement {id_article=1} par {id_article} tout court. Voilà : en rechargeant la page avec l'URL http://localhost/mon-site/spip.php?page=tutoriel&id_article=2 vous obtenez maintenant l’article 2. Un squelette, plusieurs articles (1/2) Afficher des éléments en fonction du contexte Afficher n’importe quel article : <BOUCLE_article(ARTICLES){id_article=1}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div> </BOUCLE_article> Pour cela nous allons appeler notre page Web avec le paramètre id_article=2 pour appeler l'article 2 : http://localhost/mon-site/spip.php?page=tutoriel&id_article=2 Echec : c'est toujours l’article 1 (et pas le 2) qui s'affiche.

  10. Tapez maintenant : • http://localhost/mon-site/spip.php?page=tutoriel&id_article=1 • http://localhost/mon-site/spip.php?page=tutoriel&id_article=2 et • http://localhost/mon-site/spip.php?page=tutoriel Voyez-vous la différence ? Les deux premières pages vous donnent les articles n°1 et 2, la troisième n’a pas d’id_article dans son contexte, et génère une erreur. Bravo ! Votre squelette est maintenant « contextuel ». Un squelette, plusieurs articles (2/2) <BOUCLE_article(ARTICLES){id_article}> <h1>#TITRE</h1> <strong>#CHAPO</strong> <div align="justify">#TEXTE</div> </BOUCLE_article> La BOUCLE_article s’exécute dans un «contexte» où id_article est égal à 2 (c’est la valeur qui est passée dans l’URL). • Si on lui précise {id_article=1} elle va chercher l’article n° 1; • mais si on lui demande juste {id_article}, elle va chercher l’article dont le numéro est indiqué par le contexte (ici l’URL).

  11. Une rubrique: les articles du site (1/4) Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Tous les articles du site Modifions notre squelette « tutoriel.html » de la manière suivante : <BOUCLE_article(ARTICLES)> #TITRE<BR> </BOUCLE_article> Là, on supprime carrément la condition {id_article}, la boucle va donc « courir » sur tous les articles. Attention : cette BOUCLE peut générer une page énorme si la base de données contient déjà de nombreux d’articles, ce qui est le cas de celle du site « CMS-SPIP » qui est chargée pour votre SPIP...

  12. Une rubrique: 10 prem. articles du site (2/4) Un contexte qui varie au fur et à mesure des BOUCLES rencontrées. Les dix premiers articles du site ...mieux vaut prendre vos précautions et ajouter tout de suite par exemple le critère de limitation {0,10} pour limiter aux 10 premiers articles : <BOUCLE_article(ARTICLES) {0,10}> #TITRE<BR> </BOUCLE_article> Résultat : en appelant simplement http://localhost/mon-site/spip.php?page=tutoriel (plus besoin d’id_article désormais, puisque cette condition a été supprimée) les titres des 10 premiers articles publiés s’affichent (sous la forme de liens hypertextes), séparés chacun par un saut de ligne.

  13. Afficher les 10 articles les plus récents d’une rubrique Ajoutons les critère de classement {par date} et {inverse} ainsi que le critère de limitation au 10 premiers articles {0,10}, on obtient ainsi les liens hypertextes avec le titre des 10 derniers articles publiés (classement anti-chronologique) : <BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> Une rubrique: ses 10 premier articles (3/4) Sommaire d’une rubrique En ajoutant le critère de sélection id_rubrique, on produit le sommaire d’une rubrique : <BOUCLE_article(ARTICLES){id_rubrique}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article>

  14. Une rubrique (4/4) Prenons dans l’ordre : • id_rubrique : ne prend que les articles appartenant à la rubrique id_rubrique (cf. ci-dessous pour que cette variable soit définie dans le contexte de notre BOUCLE_article). • {par date}{inverse} : trie par date dans l’ordre décroissant. • {0,10} : ... et prend les 10 premiers résultats. • Enfin, <a href="#URL_ARTICLE">#TITRE</a> va afficher non seulement le titre de l’article mais en plus créer un lien vers cet article. • Reste à invoquer le squelette, en lui passant le contexte id_rubrique=1 : • http://localhost/mon-site/spip.php?page=tutoriel&id_rubrique=1 La magie de SPIP tient dans la combinaison de ce type de fonctionnalités. Si vous êtes arrivé jusqu’ici, c’est gagné !

  15. Les articles du site: anti-chronologique (1/2) On veut afficher les derniers articles publiés, sur le modèle : • <html> • <body> • <h2>"#TITRE" du dernier article publié</h2> • <h2>"#TITRE" de l'avant-dernier article publié</h2> • ……. • </body> • <html> • Pour dire à SPIP d'afficher ces articles, il faut : • Une boucle ARTICLES • Un critère pour récupérer tous les articles publiés • Un critère pour classer par ordre inverse de date de publication

  16. Les articles du site: anti-chronologique (2/2) • Donc, créez le fichier "sommaire1.html » : • <html> • <body> • <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}> • <h2>#TITRE</h2> • <a href="#URL_ARTICLE">Lire l'article</a> • </BOUCLE_sommaire> • … • </body> • <html> • Critères de sélection pour afficher les articles par ordre anti-chronologique : • {tout} : tous les articles • {par date} : trier par ordre chronologique • {inverse} : inverse l'ordre de tri, afin d'aller du plus récent au plus ancien • La boucle est affichée autant de fois qu'il y a d'articles (d'où le terme de "boucle")

  17. Sommaire : les dix derniers articles (1/2) • Créez le fichier "sommaire2.html » : • <html> • <body> • <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}{0,10}> • <h2>#TITRE</h2> • <a href="#URL_ARTICLE">Lire l'article</a> • </BOUCLE_sommaire> • … • </body> • <html> Limiter le nombre de résultats avec le critère{début, nombre} début : résultat à partir duquel commence l’affichage (la numérotation commence à 0) nombre : nombre de résultats à afficher Exemple : {0, 10} affiche dix articles à partir du premier (qui porte le numéro zéro) {3, 5} : affiche cinq articles à partir du quatrième (qui porte le numéro 3) Limiter le nombre de résultats avec le critère{a/b} a/b représente la portion à afficher. Par exemple, 1/3 demande l’affichage du 1er tiers des résultats, alors que 3/4 demande l’affichage du 3ème quart des résultats.

  18. Sommaire : les dix derniers articles (2/2) Exploiter la syntaxe complète des boucles et les listes • <html> • <body> • <B_sommaire> • <h3>Les dix derniers articles publiés sur le site sont :</h3> • <ul> • <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}{0,10}> • <li> • <h2>#TITRE</h2> • <a href="#URL_ARTICLE">Lire l'article</a> • </li> • </BOUCLE_sommaire> • </ul> • <h3>Fin de la liste des articles</h3> • </B_sommaire> • <h3>Désolé, ce site ne contient pas d'articles !</h3> • <//B_sommaire> • </body> • <html>

  19. Boucles en boucles : auteurs d’articles (1/3) Boucles imbriquées pour afficher les auteurs de chaque article : utiliser une boucle "AUTEURS" à l'intérieur d’une boucle "ARTICLES". • <html> • <body> • <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}> • <h2>#TITRE</h2> • <a href="#URL_ARTICLE">Lire l'article</a> • <p>Article écrit par : • <BOUCLE_auteurs(AUTEURS)> • #NOM • </BOUCLE_auteurs> • </p> • </BOUCLE_sommaire> • … • </body> • <html> Problème : sans critère de sélection, la boucle auteur affiche tous les auteurs du site

  20. Boucles en boucles : auteurs d’articles (2/3) Boucles imbriquées pour afficher les auteurs de chaque article : utiliser une boucle "AUTEURS" à l'intérieur d’une boucle "ARTICLES". • <html> • <body> • <BOUCLE_sommaire(ARTICLE) {tout} {par date} {inverse}> • <h2>#TITRE</h2> • <a href="#URL_ARTICLE">Lire l'article</a> • <p>Article écrit par : • <BOUCLE_auteurs(AUTEURS) {id_article} > • #NOM • </BOUCLE_auteurs> • </p> • </BOUCLE_sommaire> • … • </body> • <html> En ajoutant le critère {id_article}à la boucle AUTEURS, on n'affiche que les auteurs de l'article.

  21. Boucles en boucles : auteurs d’articles (3/3) Toutes les balises d'un auteur sont récupérables dans un squelette : Les balises #ID_AUTEUR #NOM #BIO #EMAIL #NOM_SITE #URL_SITE #PGP #LANG #FORMULAIRE_ECRIRE_AUTEUR Les balises calculées #NOTES #URL_AUTEUR Les logos #LOGO_AUTEUR

  22. Boucles en boucles : rubrique-articles (1/3) Affichons sur la même page, les éléments de la rubrique elle-même : son titre, son texte de présentation, etc. <BOUCLE_rubrique(RUBRIQUES){id_rubrique}> <h1>#TITRE</h1> <BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> [(#TEXTE|justifier)] </BOUCLE_rubrique> On appelle la page avec l’URL : http://localhost/mon-site/spip.php?page=tutoriel&id_rubrique=1. La boucle ARTICLES est intégrée dans une boucle RUBRIQUES. Le contexte de la boucle ARTICLES est l’id_rubrique donné par la boucle RUBRIQUES, qui elle même va chercher le contexte donné par l’URL (id_rubrique=1). Donc nous sommes bien, au niveau des ARTICLES, avec l’id_rubrique demandé. De ce point de vue rien ne change.

  23. [(#TEXTE|justifier)] Dernière remarque : on a introduit le filtre |justifiersur le champ #TEXTE. Ce filtre modifie le contenu du texte avant de l’installer dans la page finale. Boucles en boucles : rubrique-articles (2/3) <BOUCLE_rubrique(RUBRIQUES){id_rubrique}> <h1>#TITRE</h1> <BOUCLE_article(ARTICLES){id_rubrique}{par date}{inverse}{0,10}> <a href="#URL_ARTICLE">#TITRE</a><br> </BOUCLE_article> [(#TEXTE|justifier)] </BOUCLE_rubrique> En revanche, la boucle RUBRIQUES a permit à SPIP de sélectionner les valeurs des champs de la rubrique en question : on peut donc afficher le #TITRE et le #TEXTE de cette rubrique. Notez bien que ce #TEXTE serait celui de la rubrique même si on appelait aussi #TEXTE dans la boucle ARTICLES. Le fonctionnement arborescent de SPIP garantit que le #TEXTE d’un article ne déborde pas de la boucle ARTICLES.

  24. Boucles en boucles : rubrique-articles (3/3) Toutes les balises d'une rubrique sont récupérables dans un squelette : Les balises calculées #NOTES #INTRODUCTION #URL_RUBRIQUE #DATE #FORMULAIRE_FORUM #PARAMETRES_FORUM #FORMULAIRE_SITE Les balises #ID_RUBRIQUE #TITRE #DESCRIPTIF #TEXTE #ID_SECTEUR #LANG Les logos #LOGO_RUBRIQUE #LOGO_RUBRIQUE_NORMAL #LOGO_RUBRIQUE_SURVOL

  25. Afficher les dix dernières brèves publiées sur tout le site : <BOUCLE_breves(BREVES) {par date} {inverse} {0,10}> Afficher les dix dernières brèves publiées dans une rubrique particulière : <BOUCLE_breves(BREVES){id_rubrique} {par date} {inverse} {0,10}> Afficher la brève dont l’id_breve = 5 : <BOUCLE_breves(BREVES){id_breve=5}> Afficher la brève dont l’id_breve est défini dans l ’URL : <BOUCLE_breves(BREVES){id_breve}> Brèves (1/3)

  26. Brèves (2/3) Toutes les balises d'une brève sont récupérables dans un squelette : Les balises calculées #NOTES #INTRODUCTION #URL_BREVE #FORMULAIRE_FORUM #PARAMETRES_FORUM Les balises #ID_BREVE #TITRE #DATE #TEXTE #NOM_SITE #URL_SITE #ID_RUBRIQUE #LANG Les logos #LOGO_BREVE #LOGO_BREVE_RUBRIQUE

  27. Brèves (3/3) Un squelette breves.html simple : • <BOUCLE_principale(BREVES) {id_breve}> • <html> • <head><titre>#TITRE</titre></head> • <body> • [(#LOGO_BREVE||image_reduire{200,200})] • <p><small>[(#DATE|nom_jour)][(#DATE|affdate)]</small></p> • <h1>#TITRE</h1> • <div align="justify">#TEXTE</div> • [<div align="right">Voir en ligne : • <a href="#URL_SITE">#NOM_SITE</a></div>] • [<div class="notes"><h2>Notes: </h2>(#NOTES)</div>] • </body> • </html> • </BOUCLE_principale>

  28. Boucles récursives: rubriques arboresc. (1/2) L’arborescence des rubriques d’une rubrique Les Boucles récursives s'appellent elles mêmes jusqu'à ne plus rencontrer d'occurrence. Elles sont souvent utilisées pour dérouler des structures arborescentes. • <BOUCLE_rubrique(RUBRIQUES){id_parent}{par titre}> • #TITRE • <BOUCLE_ssRubriques(BOUCLE_rubrique)> • </BOUCLE_ssRubriques> • </BOUCLE_Rubriques>

  29. ... [(#REM) Si aucun article, affiche un plan de la rubrique ] <B_sous_rubriques> <div class="menu rubriques"> <h2><:sous_rubriques:></h2> <ul> <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}> <li> <a href="#URL_RUBRIQUE">[(#TITRE)]</a> [(#REM) Une boucle recursive pour le mini plan] <B_miniplan> <ul> <BOUCLE_miniplan(RUBRIQUES) {id_parent} {par num titre, titre}> <li> <a href="#URL_RUBRIQUE">[(#TITRE)]</a> <BOUCLE_m2(BOUCLE_miniplan)></BOUCLE_m2> </li> </BOUCLE_miniplan> </ul> </B_miniplan> </li> </BOUCLE_sous_rubriques> </ul> </div> </B_sous_rubriques> Boucles récursives : rubriques arboresc. (2/2) Extrait du squelette rubrique.html dans le répertoire /squelettes-dist/ de SPIP 2.0.6

  30. Des filtres (1/3) Si les BOUCLES & les BALISES permettent de structurer la page de manière logique, reste à présenter les données de manière esthétique. Question design SPIP ne peut rien pour vous, mais sachez user de ses filtres... les filtres les plus utilisés (ils sont appelés automatiquement) sont |typo et |propre : |typo : correcteur typographique, dont la mission principale est d’ajouter des espaces insécables où il en faut (cf. l’aide en ligne de SPIP) |propre : s’intéresse aux paragraphes, aux raccourcis SPIP (italiques, gras, intertitres, etc.) - il n’est appliqué par défaut qu’aux textes longs (#TEXTE, #CHAPO, etc.)

  31. Des filtres (2/3) d’autres filtres sont très utiles, citons : |majuscules à la fonctionnalité évidente |justifierou |aligner_droite qui définissent l’alignement du texte par rapport aux bords verticaux |saison qui affiche « été » si la variable est une date comprise entre le 21 juin et le 20 septembre...

  32. Des filtres (3/3) Comment utiliser un filtre ? • Pour utiliser un filtre il faut entourer la variable de parenthèses et de crochets : • Pour utiliser un filtre il faut entourer la variable de parenthèses et de crochets : [blah blah (#VARIABLE|filtre) bloh bloh] [blah blah(#VARIABLE|filtre) bloh bloh] • On peut enchaîner les filtres les uns à la suite des autres : ainsi : [(#DATE|saison|majuscules)]affichera-t-il « HIVER » [(#DATE|saison|majuscules)]affichera-t-il « HIVER »

More Related