Introduction

Le vocable de noisette est aussi largement répandu que controversé dans la littérature SPIP. A la base, une noisette est une inclusion au sens programmatique du terme, à savoir, un bout de programme réutilisable. Cependant, toute inclusion n’est pas noisette !

En effet, dans le cadre du squelette, une noisette se matérialise par un bloc standard affiché dans une des zones principales du site. Aujourd’hui seul les zones « Navigation » et « Extra », c’est-à-dire les colonnes, possèdent des noisettes dont la structure est présentée ci-après [1].

La version actuelle du squelette possède un répertoire noisettes/ qui contient en fait toutes les inclusions dont certaines représentent effectivement des noisettes. La prochaine évolution du squelette permettra de mieux distinguer les « vraies » noisettes.

Conteneur standard des noisettes

Toute noisette de Sarka-SPIP est incluse dans bloc standard de type <div class="noisette"> dont les caractéristiques principales sont :

• la largeur correspond à celle de la zone parente « Navigation » ou « Extra », soit 180 pixels
• la marge basse, à savoir, le margin-bottom, est de 15 pixels, toutes les autres marges étant à zéro. Cela permet de positionner les noisettes les unes sous les autres en s’assurant qu’elles soient correctement espacées.

  

Le conteneur englobant la noisette possède donc toujours la classe CSS « noisette ». Mais afin de distinguer une noisette d’une autre et éventuellement les styler différemment, on rajoute systématiquement :

• soit un id, comme « noisette_statistiques » pour la noisette des statistiques
• soit une classe dérivée comme « menu_rub1 » pour le menu des rubriques en version déroulante.

Tous les styles CSS associés aux noisettes de Sarka-SPIP sont regroupés dans le fichier css/noisettes.css.html.

Contenu standard des noisettes

Si le conteneur de toute noisette est identique, le contenu, lui, peut varier. Cependant, il existe quelques structures standardisées pour afficher du texte, des listes, des titres, des liens...

Le contenu d’une noisette est en général constitué :

• d’un titre, comme Statistiques ou Agenda
• d’une liste de blocs de contenu dont chacun peut contenir un sous-titre et un bloc de texte.

Cette structure est parfaitement illustrée par la noisette « Statistiques » comme le montre l’illustration ci-dessous :

Le titre de la noisette

Comme illustré ci-dessus, le titre de la noisette est un bloc de classe CSS « intitule ». Ce bloc est matérialisé par une balise <h1>. Cependant, suivant que ce titre est un lien vers une page du site ou pas le code du titre varie, à savoir :

<!-- Un titre qui n'est pas un lien
	-> la classe est associée à la balise <h1> -->
<h1 class="intitule"><:sarkaspip:statistiques:></h1>

<!-- Un titre qui est un lien
	-> la classe est associée à la balise <a> -->
<h1>
  <a class="intitule" href="#URL_PAGE{album,id_article=#ID_ARTICLE}">
    <:sarkaspip:album_une:>
  </a>
</h1>

Le sous-titre du contenu de la noisette

De même, le sous-titre du contenu de la noisette est un bloc de classe CSS « titre_bloc ». Ce bloc est matérialisé par une balise <h2>. Cependant, suivant que ce titre est un lien ou pas le code du titre varie, à savoir :

<!-- Un sous-titre qui n'est pas un lien
	-> la classe est associée à la balise <h2> -->
<h2 class="titre_bloc"><:sarkaspip:maj:></h2>

<!-- Un sous-titre qui est un lien
	-> la classe est associée à la balise <a> -->
<h2>
  [<a class="titre_bloc" href="#URL_SYNDIC" title="<:sarkaspip:go_syndication:>">
    (#NOM_SITE)
  </a>]
</h2>

Le texte du contenu de la noisette

Cette portion du contenu de la noisette est en général un bloc de classe « texte » qui peut contenir la plupart des éléments HTML classiques. On obtient un code HTML résultant tel que :

<div class="texte">
  <p>
    le texte de la noisette avec les balises HTML nécessaires...
  </p>
</div>

En outre, il est possible aussi de de trouver des blocs de classe « liste » pour des noisettes particulières comme les listes d’articles ou d’autres objets.
C’est le cas, par exemple, de la noisette de navigation dans les articles de la même rubrique, dont le code résultant est du type :

<div class="liste">
  <ul>
    <li><a title="bulle info" href="url du lien" class="titre">nom du lien</a></li>
    <li><a title="bulle info" href="url du lien" class="titre">nom du lien</a></li>
    <li><a title="bulle info" href="url du lien" class="titre">nom du lien</a></li>
  </ul>
</div>

Cependant, il est souvent nécessaire de définir des blocs un peu moins standard. C’est le cas de beaucoup de noisettes de Sarka-SPIP. Aussi, pour reproduire une noisette donnée, en plus de lire cet article, il est donc conseillé de consulter la structure exacte de la noisette modèle.

Composition des blocs

Tous les blocs décrits précédemment ne sont pas obligatoires. Il est possible de les composer à loisir à partir du moment où l’on respecte leur inclusion dans le conteneur « noisette ». C’est, par exemple, le cas de la noisette « Sites favoris » qui ne contient pas de sous-titre ou des menus qui ne possèdent pas de titre.