SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 250 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > noiZetier > Noisetier (abandonné) > La Compilation des pages par le Noisetier (doc de dév)

La Compilation des pages par le Noisetier (doc de dév)

17 juin 2007 – par Joseph

Ceci est une archive périmée mais qui reste intéressante, parfois autant pour l’article que les commentaires associés.

Attention, cette contribution est EN CHANTIER : elle n’est peut-être pas fonctionnelle.

Nota : une contrib au développement arrêté par son créateur, pour laisser la place au noiZetier.

Cette page vise à décrire comment le Noisetier génère les pages finales d’un site et précise ce qu’est un thème.

Attention :

Cette page est un début de documentation du projet « Noisetier » en cours de développement. Les éléments ci-dessous ne sont pas figés et peuvent être amenés à évoluer au cours du développement du projet.

Nous rappelons que ce projet étant en cours de développement, certaines fonctions n’ont pas encore été codées. Il faut éviter d’installer le Noisetier sur un site en production tant qu’une première version ne sera pas finalisée.

La construction des pages du site, dans le cadre du projet Noisetier, résulte d’une communication entre le thème et le Noisetier. Chaque page est découpée en plusieurs zones. C’est le thème qui gère le positionnement des différentes zones, ainsi que l’habillage CSS des pages. Le noisetier, quant à lui, remplit chaque zone avec les noisettes et les textes qui lui ont été déclarés et passe les variables d’environnement et les paramètres nécessaires au fonctionnement de chaque noisette.

Les pages gérées par le Noisetier

Première étape, définir les pages qui seront gérées par le Noisetier. Ces pages appelleront les fichiers noisetier-body et noisetier-head situé dans le thème.

Le squelette des pages gérées par le Noisetier ont une forme générique. Par exemple, pour la page sommaire :

  1. #CACHE{86400}
  2. [(#REM) Déclaration du type de document, indispensable pour le navigateur web ]
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html dir="#LANG_DIR" lang="#LANG">
  5. <head>
  6. [(#REM) Appel du modèle d'en-tête du plugin de thème]
  7. <INCLURE{fond=noisetier-head}{env}{page=sommaire}>
  8. </head>
  9. <body id="sommaire" class="page_sommaire">
  10. [(#REM) Appel du modèle de corps du plugin de thème ]
  11. <INCLURE{fond=noisetier-body}{env}{page=sommaire}>
  12. [(#REM) Balises html de fermeture de la page]
  13. </body>
  14. </html>

Télécharger

Vous noterez que la variable page doit être passée manuellement car en fonction du type d’URL utilisé sur le site, elle ne se trouve pas toujours dans le contexte courant.

Certaines pages, telles que la page article, n’ont pas le même affichage selon qu’un id correct leur soit passé en paramètre ou non. Pour ces dernières, nous allons créer des pages virtuelles. Par exemple, voici le squelette de la page article :

  1. #CACHE{86400}
  2. <BOUCLE_article_principal(ARTICLES){id_article}>
  3. [(#REM) Page affichée en cas d'id correct ]
  4. [(#REM) Déclaration du type de document, indispensable pour le navigateur web ]
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html dir="#LANG_DIR" lang="#LANG">
  7. <head>
  8. [(#REM) Appel du modèle d'en-tête du plugin de thème]
  9. <INCLURE{fond=noisetier-head}{env}{page=article}>
  10. </head>
  11. <body id="article" class="page_article">
  12. [(#REM) Appel du modèle de corps du plugin de thème ]
  13. <INCLURE{fond=noisetier-body}{env}{page=article}>
  14. [(#REM) Balises html de fermeture de la page]
  15. </body>
  16. </html>
  17. </BOUCLE_article_principal>
  18. [(#REM) Page affichée en cas d'id incorrect ]
  19. [(#REM) Déclaration du type de document, indispensable pour le navigateur web ]
  20. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  21. <html dir="#LANG_DIR" lang="#LANG">
  22. <head>
  23. [(#REM) Appel du modèle d'en-tête du plugin de thème]
  24. <INCLURE{fond=noisetier-head}{env}{page=articles}>
  25. </head>
  26. <body id="articles" class="page_articles">
  27. [(#REM) Appel du modèle de corps du plugin de thème ]
  28. <INCLURE{fond=noisetier-body}{env}{page=articles}>
  29. [(#REM) Balises html de fermeture de la page]
  30. </body>
  31. </html>
  32. <//B_article_principal>

Télécharger

Si un id_article correct est passé, alors le Noisetier est appelé en lui demandant de construire la page article. En l’absence d’id_article ou en cas d’id_article incorrect, le noisetier est appelé en lui demandant de construire la page articles (notez le s). La page articles ne dispose pas d’un squelette de page en propre. Il s’agit donc d’une page virtuelle. Simplement, noisetier-body et noisetier-head sont appelés en forçant la valeur de la variable page à articles.

Pages livrées avec le Noisetier

Le plugin Noisetier est livré avec les pages suivantes :

  • 404
  • accueil
  • article
  • auteur
  • breve
  • forum
  • login
  • mot
  • plan
  • recherche
  • rubrique
  • site
  • sommaire

Créer de nouvelles pages

De nouvelles pages peuvent être créées pour interagir avec le Noisetier. Pour cela, il suffit de se baser sur les squelettes génériques ci-dessus dans son répertoire squelettes ou bien à la racine d’un plugin.

Cependant, il est nécessaire de déclarer ces pages pour que l’interface de gestion du Noisetier puisse les prendre en compte. La déclaration est la même qu’il s’agisse d’une page virtuelle ou non. Elle se fait dans le fichier mes_options.php du site ou du plugin considéré.

Cette déclaration sera de la forme :

  1. //Définition des pages gérées par le noisetier
  2. global $noisetier_pages, $noisetier_description_pages;
  3. if (!isset($noisetier_pages)) $noisetier_pages = array();
  4. $noisetier_pages[]='article';
  5. $noisetier_pages[]='articles';
  6. $noisetier_description_pages['articles']="<multi>[fr]Cette page est renvoy&eacute;e lorsque le squelette {article} est appel&eacute; sans id_article ou avec un id_article incorrect.[en]This page...</multi>";
  7. $noisetier_pages[]='rubrique';
  8. $noisetier_pages[]='rubriques';
  9. $noisetier_description_pages['rubriques']="<multi>[fr]Cette page est renvoy&eacute;e lorsque le squelette {rubrique} est appel&eacute; sans id_rubrique ou avec un id_rubrique incorrect.[en]This page...</multi>";
  10. $noisetier_pages[]='breve';
  11. $noisetier_pages[]='breves';
  12. $noisetier_description_pages['breves']="<multi>[fr]Cette page est renvoy&eacute;e lorsque le squelette {breve} est appel&eacute; sans id_breve ou avec un id_breve incorrect.[en]This page...</multi>";
  13. $noisetier_pages[]='sommaire';
  14. $noisetier_pages[]='accueil';

Télécharger

$noisetier_pages est un tableau listant simplement les pages interagissant avec le noisetier. La déclaration des pages dans ce tableau est obligatoire.

$noisetier_description_pages permet d’attribuer à chaque page un descriptif. Ce dernier est optionnel.

Le fichier noisetier-head

Comme nous l’avons vu ci-dessus, le squelette de page appelle les fichiers noisetier-body et noisetier-head qui sont situés à la racine du plugin de thème.

Le fichier noisetier-head se présente sous une forme comme celle-ci :

  1. #CACHE{86400}
  2. <INCLURE{fond=noisetier-compilateur-tete}{env}>
  3. [(#REM)
  4. Entete standard de toutes les pages ; les elements specifiques
  5. (title, description) sont inseres vias une noisette
  6. ]
  7.  
  8. [(#REM) Lien vers l'icone destinee a la barre de bookmarks ]
  9. [<link rel="shortcut icon" href="(#CHEMIN{favicon.ico})" />]
  10.  
  11. [(#REM) Lien vers le flux RSS du site ]
  12. [<link rel="alternate" type="application/rss+xml" title="<:syndiquer_site:>" href="(#URL_PAGE{backend})" />]
  13.  
  14. [(#REM) Feuille de style par defaut pour le code genere par SPIP ]
  15. [<link rel="stylesheet" href="(#CHEMIN{spip_style.css}|direction_css)" type="text/css" media="all" />]

Télécharger

Le fichier noisetier-head doit tout d’abord appeler le noisetier-compilateur-page situé à la racine du plugin Noisetier, puis il peut faire ses propres déclarations à placer dans le <head>.

Si un thème gère un switcher de CSS, c’est dans ce fichier que sera placé le code permettant de charger la bonne CSS.

Le fichier noisetier-body

En voici un exemple :

  1. #CACHE{86400}
  2. [
  3. (#ENV{page}|!={'login'}|?{' ',''})
  4. <div id='page'>
  5.  
  6. <div id='entete'>
  7. <INCLURE{fond=noisetier-compilateur-page}{env}{zone=entete}>
  8. </div>
  9.  
  10. <div id='hierarchie'>
  11. <INCLURE{fond=noisetier-compilateur-page}{env}{zone=soustete}>
  12. </div>
  13.  
  14. <div id='conteneur'>
  15.  
  16. <div id='contenu'>
  17. <INCLURE{fond=noisetier-compilateur-page}{env}{zone=contenu}>
  18.  
  19. <div class='contre-encart'>
  20. <INCLURE{fond=noisetier-compilateur-page}{env}{zone=infosgauche}>
  21. </div>
  22.  
  23. <div class='encart'>
  24. <INCLURE{fond=noisetier-compilateur-page}{env}{zone=infosdroite}>
  25. </div>
  26.  
  27. <INCLURE{fond=noisetier-compilateur-page}{env}{zone=souscontenu}>
  28.  
  29. </div>
  30.  
  31. </div>
  32.  
  33. <div id='pied'>
  34. <INCLURE{fond=noisetier-compilateur-page}{env}{zone=pied}>
  35. </div>
  36.  
  37. </div>
  38. ]
  39. [
  40. (#ENV{page}|=={'login'}|?{' ',''})
  41. <div id='mini_pres'>
  42. <INCLURE{fond=noisetier-compilateur-page}{env}{zone=contenu}>
  43. </div>
  44. ]

Télécharger

Ce fichier définit la structure des pages. Il appelle Définir les particularités d’un thème : le fichier options_noisetier.php

Pour que l’interface de gestion du Noisetier puisse s’adapter aux différents thèmes, il est nécessaire que le thème déclare les zones qu’il gère et sur quelle page celles-ci apparaissent. Cette déclaration se fera dans un fichier options_noisetier.php situé à la racine du plugin de thème.

Ce fichier sera de la forme suivante :

  1. <?php
  2.  
  3. global $theme_titre, $theme_descriptif, $theme_zones;
  4.  
  5. $theme_titre = 'Fraichdist';
  6. $theme_descriptif = '<multi>[fr]Th&egrave;me bas&eacute; sur les squelettes fournis en standard avec SPIP.</multi>';
  7. $theme_zones = array();
  8.  
  9. $theme_zones['entete']['nom'] = "entete";
  10. $theme_zones['entete']['titre'] = "<multi>[fr]En-t&ecirc;te de la page</multi>";
  11. $theme_zones['entete']['pages_exclues'] = "login";
  12.  
  13. $theme_zones['soustete']['nom'] = "soustete";
  14. $theme_zones['soustete']['titre'] = "<multi>[fr]Sous l'en-t&ecirc;te</multi>";
  15. $theme_zones['soustete']['descriptif'] = "<multi>[fr]Situ&eacute;e sous l'en-t&ecirc;te de page, cette zone peut servir &agrave; afficher l'arborescence des pages ou bien un menu horizontal.</multi>";
  16. $theme_zones['soustete']['pages_exclues'] = "login";
  17.  
  18. $theme_zones['navigation']['nom'] = "navigation";
  19. $theme_zones['navigation']['titre'] = "<multi>[fr]Navigation</multi>";
  20. $theme_zones['navigation']['descriptif'] = "<multi>[fr]Colonne de navigation dans le site. Elle est, selon le style s&eacute;lectionn&eacute;, affich&eacute;e sur la droite ou sur la gauche de la zone contenu.</multi>";
  21. $theme_zones['navigation']['pages_exclues'] = "login";
  22.  
  23. $theme_zones['contenu']['nom'] = "contenu";
  24. $theme_zones['contenu']['titre'] = "<multi>[fr]Contenu de la page</multi>";
  25. $theme_zones['contenu']['descriptif'] = "<multi>[fr]Cette zone est destin&eacute;e &agrave; l'affichage du contenu principal de la page.</multi>";
  26.  
  27. $theme_zones['infosgauche']['nom'] = "infosgauche";
  28. $theme_zones['infosgauche']['titre'] = "<multi>[fr]Infos &agrave; gauche</multi>";
  29. $theme_zones['infosgauche']['descriptif'] = "<multi>[fr]Informations compl&eacute;mentaires dans une colonne &agrave; gauche.</multi>";
  30. $theme_zones['infosgauche']['pages_exclues'] = "login";
  31. $theme_zones['infosgauche']['insere_avant'] = "<div style='width:245px; float:left;'>";
  32. $theme_zones['infosgauche']['insere_apres'] = "</div>";
  33.  
  34. $theme_zones['infosdroite']['nom'] = "infosdroite";
  35. $theme_zones['infosdroite']['titre'] = "<multi>[fr]Infos &agrave; droite</multi>";
  36. $theme_zones['infosdroite']['descriptif'] = "<multi>[fr]Informations compl&eacute;mentaires dans une colonne &agrave; droite.</multi>";
  37. $theme_zones['infosdroite']['pages_exclues'] = "login";
  38. $theme_zones['infosdroite']['insere_avant'] = "<div style='width:245px; float:right;'>";
  39. $theme_zones['infosdroite']['insere_apres'] = "</div>";
  40.  
  41. $theme_zones['souscontenu']['nom'] = "souscontenu";
  42. $theme_zones['souscontenu']['titre'] = "<multi>[fr]Sous-contenu</multi>";
  43. $theme_zones['souscontenu']['descriptif'] = "<multi>[fr]Informations compl&eacute;mentaires affich&eacute;es sous le contenu principal et sous les bo&icirc;tes d'infos.</multi>";
  44. $theme_zones['souscontenu']['pages_exclues'] = "login";
  45. $theme_zones['souscontenu']['insere_avant'] = "<div style='width:100%; float:left;'>";
  46. $theme_zones['souscontenu']['insere_apres'] = "</div></div>";
  47.  
  48. $theme_zones['pied']['nom'] = "pied";
  49. $theme_zones['pied']['titre'] = "<multi>[fr]Pied de page</multi>";
  50. $theme_zones['pied']['pages_exclues'] = "login";
  51. $theme_zones['pied']['insere_avant'] = "<div style='width:100%; float:left;'>";
  52. $theme_zones['pied']['insere_apres'] = "</div></div>";
  53.  
  54. ?>

Télécharger

ATTENTION : un nom de zone ne doit pas contenir le caractère - (tiret), ni d’accent. De plus, head est un nom de zone réservée puisque le noisetier gère une zone pour les en-têtes HTML de la page.

$theme_titre permet de définir le nom du thème. On peut utiliser les raccourcis SPIP en particulier la balise <multi></multi>.

$theme_descriptif permet de donner un descriptif au thème. Les raccourcis de SPIP sont utilisables.

$theme_zones définit les différentes zones utilisées dans le plugin. Elles doivent correspondre à celle du fichier noisetier-body.html. Elles seront affichées dans l’espace privé dans l’ordre où elles auront été ici définies.

  • nom correspond au nom stocké dans la base et utilisé par noisetier-body.html. Cette entrée du tableau est obligatoire.
  • titre peut utiliser les raccourcis typographiques de SPIP. Il permet de nommer de manière plus explicite la zone, tandis que nom est d’un usage technique. Si titre n’est pas présent, nom sera affiché à la place.
  • descriptif est optionnel. Il est permet de décrire la zone.
  • pages est optionnel. Il prend la valeur toutes ou bien une liste de nom de pages séparés par une virgule. Cela permet de spécifier qu’une zone n’est affichée que par certaines pages. Ce paramètre ne sert que pour l’espace privé. Le fichier noisetier-body.html doit être cohérent avec ce qui est déclaré ici.
  • pages_exclues permet de spécifier qu’une zone ne doit pas être affichée sur certaines pages. De la même manière que pages, il s’agit du nom d’une page ou d’une suite de noms séparés par des virgules (sans espaces). En règle général, pour une même zone, on utilisera ou pages ou pages_exclues.
  • insere_avant permet de spécifier, dans l’espace privé, les balises HTML à insérer avant le formulaire de zone afin de personnaliser l’affichage. Il est possible de spécifier une balise spécifique pour l’affichage de cette zone sur la page truc avec insere_avant:truc. Si insere_avant:truc est présent, c’est insere_avant:truc qui sera utilisé, sinon c’est insere_avant. Si rien n’est déclaré, aucune balise HTML ne sera insérée.
  • insere_apres fonctionne de la même manière que insere_avant sauf qu’il s’agit des balises HTML à insérer après la zone.

Le compilateur d’en-tête : noisetier-compilateur-tete.html

Voici son code :

  1. #CACHE{86400}
  2. [(#REM) Preciser le charset ]
  3. <meta http-equiv="Content-Type" content="text/html; charset=#CHARSET" />
  4. [(#REM) Fierement fabrique avec SPIP ]
  5. <meta name="generator" content="SPIP[ (#SPIP_VERSION)]" />
  6. [(#REM) Inclusion dans le head pour les noisettes le nécessitant]
  7. <BOUCLE_noisettes_avec_entete(NOISETTES){page IN #ENV{page},'toutes'}{exclue != #ENV{page}}{actif=oui}{par position}>
  8. <BOUCLE_entetes_noisettes(PARAMS_NOISETTES){type=head}{id_noisette}>
  9. [(#DESCRIPTIF)
  10. ]
  11. </BOUCLE_entetes_noisettes>
  12. </BOUCLE_noisettes_avec_entete>
  13. [(#REM) Inclusion des noisettes d'en-têtes]
  14. #SET{selection_page,#ENV{page}|noisetier_selection_page}
  15. #SET{selection_exclue,#ENV{page}|noisetier_selection_exclue}
  16. <BOUCLE_noisettes(NOISETTES){page==#GET{selection_page}}{exclue!==#GET{selection_exclue}}
  17. {zone=head}{actif=oui}{par position}>
  18. [(#TYPE|=={'noisette'}|?{' ',''})
  19. <INCLURE{fond=noisette}{id_noisette=#ID_NOISETTE}{env}>
  20. ]
  21. [(#TYPE|=={'texte'}|?{' ',''})
  22. [(#DESCRIPTIF**)]
  23. ]
  24. </BOUCLE_noisettes>
  25. [(#REM) Balise permettant aux plugins d'inserer des appels javascript ou css ]
  26. #INSERT_HEAD

Télécharger

Il insère d’une part les noisettes de la zone head [1], puis il insère les déclarations spécifiques des noisettes ayant besoin d’une entrée dans l’en-tête HTML. Ceci ne sera plus nécessaire si les balises #DEBUT_TEXTE_HEAD et #FIN_TEXTE_HEAD intègrent le core.

Le compilateur de page : noisetier-compilateur-page.html

Voici son code :

  1. #CACHE{86400}
  2. #SET{selection_page,#ENV{page}|noisetier_selection_page}
  3. #SET{selection_exclue,#ENV{page}|noisetier_selection_exclue}
  4. <BOUCLE_noisettes(NOISETTES){page==#GET{selection_page}}{exclue!==#GET{selection_exclue}}
  5. {zone=#ENV{zone}}{actif=oui}{par position}>
  6. [(#TYPE|=={'noisette'}|?{' ',''})
  7. <INCLURE{fond=noisette}{id_noisette=#ID_NOISETTE}{env}>
  8. ]
  9. [(#TYPE|=={'texte'}|?{' ',''})
  10. [(#DESCRIPTIF)]
  11. [(#NOTES)]
  12. ]
  13. </BOUCLE_noisettes>

Télécharger

On sélectionne les noisettes et les textes actifs et on les inclue dans le bon ordre. Afin de passer les bonnes variables d’environnement et les paramètres adéquat, les noisettes sont inclues dynamiquement via le fond noisette auquel on passe le bon id_noisette.

Le code de noisette est le suivant :

  1. <BOUCLE_noisette(NOISETTES){id_noisette}>
  2. <?php
  3. $contexte_noisette = array();
  4. $contexte_noisette['fond'] = 'noisettes/#FOND';
  5. $contexte_noisette['id_noisette'] = '#ID_NOISETTE';
  6. <BOUCLE_env(PARAMS_NOISETTES){id_noisette}{type=env}>
  7. $contexte_noisette['#TITRE'] = $contexte_inclus['#TITRE'];
  8. </BOUCLE_env>
  9. <BOUCLE_param(PARAMS_NOISETTES){id_noisette}{type=param}>
  10. $contexte_noisette['#TITRE'] = '[(#VALEUR|addslashes)]';
  11. </BOUCLE_param>
  12. $contexte_inclus = $contexte_noisette;
  13. include (_DIR_RESTREINT_ABS.'public.php');
  14. ?>
  15. </BOUCLE_noisette>

Télécharger

Et le tour est joué !!

Notes

[1Note : cette zone n’a pas à être déclarée par le thème car il s’agit d’une zone générique directement gérée par le Noisetier.

Dernière modification de cette page le 14 avril 2010

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

  • Adaptive Images

    15 novembre 2013 – 66 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, (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 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, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

Ça spipe par là