Articles

Créer une noisette - 2nde étape

16 mai 2017
Dans cette seconde partie, nous allons ajouter du contenu paramétrable à notre noisette

Envoyer une infolettre ou une newsletter.

11 novembre 2015
Annoncer un évènement particulier sous forme d’info-lettre, envoyer la liste des nouveautés à période régulière à vos visiteurs inscrits, l’envoi automatique de (...)

Choix du thème et accessibilité : quand Google sanctionne.

26 septembre 2015
Google sanctionne les sites non accessibles sur les smartphones. Le choix de votre thème va donc impacter directement votre (...)

Créer un menu - 2nde partie

20 septembre 2015
Créer un menu indépendant de l’architecture des rubriques du site ou comment ajouter des items vers un article, une rubrique particulière, un lien externe, (...)

Importer depuis MS Word

2 juin 2015
Vous n’êtes pas encore adepte des logiciels libres, vous utilisez MS Word, il est possible de composer vos articles sur votre traitement de texte préféré et (...)

Créer un menu - 1re partie

11 mai 2015
Sur la plateforme mutualisée, grâce à l’utilisation du plugin Menus, vous pouvez créer vos propres menus, que ce soit la barre de navigation ou tout autre type (...)

Insérer des images

26 mars 2015
Il n’est pas toujours facile d’y voir clair dans l’utilisation des différentes balises d’insertion d’images. Voici résumées ici les différentes (...)

Configuration générale de SPIP3 : Interactivité

22 mars 2015
SPIP offre la possibilité aux visiteurs d’interagir avec le site. Proposer l’inscription à une « newsletter », des contenus à accès restreints, accepter des (...)

Configuration générale de SPIP3 : Identité et langues

19 mars 2015
L’identité du site, (son nom et son descriptif) sont des expressions sensibles. Elles impactent fortement votre référencement naturel. Il convient donc d’y (...)

Configuration générale de SPIP3 : Contenu du site

15 mars 2015
Bien configurer les paramètres généraux de SPIP3 est nécessaire, avant (et/ou pendant) la construction de l’architecture du site. N’utilisez que ce qui est (...)

Articles

Créer une noisette - 2nde étape

16 mai 2017
Dans cette seconde partie, nous allons ajouter du contenu paramétrable à notre noisette

Envoyer une infolettre ou une newsletter.

11 novembre 2015
Annoncer un évènement particulier sous forme d’info-lettre, envoyer la liste des nouveautés à période régulière à vos visiteurs inscrits, l’envoi automatique de (...)

Choix du thème et accessibilité : quand Google sanctionne.

26 septembre 2015
Google sanctionne les sites non accessibles sur les smartphones. Le choix de votre thème va donc impacter directement votre (...)

Créer un menu - 2nde partie

20 septembre 2015
Créer un menu indépendant de l’architecture des rubriques du site ou comment ajouter des items vers un article, une rubrique particulière, un lien externe, (...)

Importer depuis MS Word

2 juin 2015
Vous n’êtes pas encore adepte des logiciels libres, vous utilisez MS Word, il est possible de composer vos articles sur votre traitement de texte préféré et (...)

Créer un menu - 1re partie

11 mai 2015
Sur la plateforme mutualisée, grâce à l’utilisation du plugin Menus, vous pouvez créer vos propres menus, que ce soit la barre de navigation ou tout autre type (...)

Insérer des images

26 mars 2015
Il n’est pas toujours facile d’y voir clair dans l’utilisation des différentes balises d’insertion d’images. Voici résumées ici les différentes (...)

Configuration générale de SPIP3 : Interactivité

22 mars 2015
SPIP offre la possibilité aux visiteurs d’interagir avec le site. Proposer l’inscription à une « newsletter », des contenus à accès restreints, accepter des (...)

Configuration générale de SPIP3 : Identité et langues

19 mars 2015
L’identité du site, (son nom et son descriptif) sont des expressions sensibles. Elles impactent fortement votre référencement naturel. Il convient donc d’y (...)

Configuration générale de SPIP3 : Contenu du site

15 mars 2015
Bien configurer les paramètres généraux de SPIP3 est nécessaire, avant (et/ou pendant) la construction de l’architecture du site. N’utilisez que ce qui est (...)

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

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