Créer une noisette - 1ère étape

, par Webmestre DANE.

Pour créer une noisette, il sera nécessaire d’utiliser le plugin skeleditor. Vous pourrez ainsi créer des fichiers dans le dossier squelettes spécifique à notre site.
Ouvrez la page d’édition du squelette ( Menu Squelettes => Éditer le squelette )
La page d’édition des squelettes permet soit de créer un nouveau fichier, soit de téléverser un fichier dans le dossier squelettes depuis votre machine. Par défaut, nous arrivons sur le page de création d’un nouveau fichier.

Une noisette se compose de deux fichiers de même nom, seules les extensions étant différentes, html pour l’un, yaml pour l’autre.
Exemple : ma_noisette.html, ma_noisette.yaml

Créez un nouveau fichier dans le dossier noisettes en saisissant noisettes/ma_noisette.html dans le champ « Nouveau fichier ». Enregistrez.
Laissez ce fichier vide pour l’instant.

Créer un nouveau fichier portant l’extension yaml de la même manière (noisettes/ma_noisette.yaml). Les deux fichiers sont maintenant visibles dans la colonne de gauche.

Dans ce fichier, saisissez les lignes suivantes, indispensables dans toute noisette. Attention, pas d’espace superflus, le format y est très sensible.

  1. nom: 'Ma noisette'
  2. description: 'La plus belle noisette au monde'
  3. icon: 'images/ma-noisette-24.jpg'

Télécharger

nom : c’est le nom affiché de votre noisette
descriptif : Le descriptif court qui n’est affiché que dans la page d’édition de la noisette
icon : l’icône de la noisette affichée à gauche du nom

Pour l’icône, il va falloir importer cette image. Sur votre ordinateur, choisissez une image et redimensionnez la à 24px x 24px.
Cliquer ensuite sur Envoyer un fichier, puis choisissez l’image sélectionnée sur votre ordinateur et téléversez. (ici, nous avons choisi l’image ma-noisette-24.jpg)
Par défaut, le fichier téléchargé est placé à la racine du dossier squelettes. Nous allons le placer dans le dossier squelettes/images/ tout simplement en le renommant images/ma-noisette-24.jpg

À partir de ce moment, notre noisette est disponible dans la page de gestion des noisettes, et ce, quelque soit la page choisie.
Pour le vérifier, rendez-vous sur la page de gestion des noisettes, après être passé par la page de gestion des plugins [1]. Cette manipulation est nécessaire pour vider le cache des noisettes.

Vous pouvez dès à présent l’afficher dans une page. Choisissons, pour l’exemple de l’afficher dans le bloc extra de la page d’accueil du site, et ouvrons le formulaire d’édition.

On retrouve le nom et le descriptif de la noisette, mais, en l’état, aucune configuration n’est possible, seul un champ Classe CSS est disponible ( ce champ est présent par défaut dans toutes les noisettes, nous reviendrons sur son utilisation).

Cependant, notre noisette n’affiche rien dans l’espace public, puisque le fichier ma_noisette.html est vide. Nous allons donc ajouter du contenu dans ce fichier. Par habitude, nous englobons tout le contenu dans une div, à laquelle on attribue une classe de style du nom de la noisette, (toujours par habitude et parce que ça ne nuit pas).

  1. <!-- fichier ma_noisette.html -->
  2. <div class="ma-noisette">
  3. ...
  4. </div>

Télécharger

Ajoutons maintenant un titre et du texte. Pour le titre, nous utilisons la balise <h2>, la balise <h1> étant réservée au titre de la page. Le texte est quand à lui, englobé dans une balise <p>.

  1. <!-- fichier ma_noisette.html -->
  2. <div class="ma-noisette">
  3. <h2>Ma noisette</h2>
  4. <p>Duplexque isdem diebus acciderat malum, quod et Theophilum insontem atrox interceperat casus, et Serenianus dignus exsecratione cunctorum, innoxius, modo non reclamante publico vigore, discessit.</p>
  5. </div>

Télécharger

Un tour sur l’espace public et, après recalcul de la page, la noisette est bien affichée à sa place.

Voilà, fin de la première étape. Nous avons là la noisette "de base". Reste que celle-ci n’est pas paramétrable, et que le contenu est statique. Le prochain exercice sera donc de passer des paramètres à la noisette.

Notes

[1ou en saisissant var_mode=recalcul à la suite de l’url de la page de gestion des noisettes. Exemple : ecrire/?exec=noizetier_pages&page=sommaire&var_mode=recalcul pour la page d’accueil du site