Guide du Webdesigner 2 partie Liste des Widgets

Transcription

Guide du Webdesigner
2ème partie
Liste des Widgets
Kiubi a été mise à jour le 19/02/2013 et propose maintenant des thèmes graphiques en HTML5
Responsive. Si la philosophie de la plateforme ne change pas, vous rencontrerez cependant des
différences avec ce qui vous est présenté dans le guide du Webdesigner, le temps pour nous
d'actualiser cette documentation. Merci pour votre compréhension.
www.kiubi.com
1
Guide du Webdesigner .......................................................................................................................................... 1 2
ème
1 partie, Liste des Widgets ............................................................................................................................... 1 Les widgets du service Site web ................................................................................................................... 6 1.1 Menu horizontal .......................................................................................................................................... 6 1.1.1 Paramètres .......................................................................................................................................... 6 1.1.3 Répertoire............................................................................................................................................ 6 1.1.2 1.1.4 1.1.5 1.2 Exemple du code source ..................................................................................................................... 6 Balises disponibles.............................................................................................................................. 6 Menu vertical .............................................................................................................................................. 8 1.2.1 Paramètres .......................................................................................................................................... 8 1.2.3 Répertoire............................................................................................................................................ 8 1.2.2 1.2.4 1.2.5 1.3 Configuration ....................................................................................................................................... 8 Exemple du code source ..................................................................................................................... 8 Balises disponibles.............................................................................................................................. 9 Contenu d’une page libre.......................................................................................................................... 10 1.3.1 Paramètres ........................................................................................................................................ 11 1.3.3 Répertoire.......................................................................................................................................... 11 1.3.2 1.3.4 1.3.5 1.4 Configuration ..................................................................................................................................... 11 Exemple du code source ................................................................................................................... 11 Balises disponibles............................................................................................................................ 11 Bloc d’extraits ........................................................................................................................................... 11 1.4.1 Paramètres ........................................................................................................................................ 12 1.4.3 Répertoire.......................................................................................................................................... 12 1.4.2 1.4.4 2 Configuration ....................................................................................................................................... 6 1.4.5 Configuration ..................................................................................................................................... 12 Exemple du code source ................................................................................................................... 12 Balises disponibles ............................................................................................................................ 13 Les widgets du service Blog ........................................................................................................................ 15 2.1 Catégories ................................................................................................................................................ 15 2.1.1 Paramètres ........................................................................................................................................ 15 2.1.3 Répertoire.......................................................................................................................................... 15 2.1.2 2.1.4 2.1.5 2.2 Configuration ..................................................................................................................................... 15 Exemple du code source ................................................................................................................... 15 Balises disponibles............................................................................................................................ 16 Archives .................................................................................................................................................... 17 2.2.1 Paramètres ........................................................................................................................................ 17 2.2.3 Répertoire.......................................................................................................................................... 17 2.2.2 2.2.4 2.2.5 2.3 Configuration ..................................................................................................................................... 17 Exemple du code source ................................................................................................................... 17 Balises disponibles............................................................................................................................ 17 Liste des billets ......................................................................................................................................... 18 2.3.1 Paramètres ........................................................................................................................................ 18 2.3.3 Répertoire.......................................................................................................................................... 18 2.3.2 2.3.4 2.3.5 2.4 Configuration ..................................................................................................................................... 18 Exemple du code source ................................................................................................................... 18 Balises disponibles............................................................................................................................ 19 Détail d’un billet ........................................................................................................................................ 23 2.4.1 Paramètres ........................................................................................................................................ 23 www.kiubi.com
2
2.4.2 Configuration ..................................................................................................................................... 24 2.4.4 Exemple du code source ................................................................................................................... 24 2.4.3 2.4.5 2.5 Balises disponibles............................................................................................................................ 25 Liste des commentaires ............................................................................................................................ 28 2.5.1 Paramètres ........................................................................................................................................ 28 2.5.3 Répertoire.......................................................................................................................................... 28 2.5.2 2.5.4 2.5.5 2.6 Configuration ..................................................................................................................................... 28 Exemple du code source ................................................................................................................... 28 Balises disponibles............................................................................................................................ 29 Ajout de commentaires ............................................................................................................................. 32 2.6.1 Paramètres ........................................................................................................................................ 32 2.6.3 Répertoire.......................................................................................................................................... 32 2.6.2 2.6.4 2.6.5 2.7 Configuration ..................................................................................................................................... 32 Exemple du code source ................................................................................................................... 32 Balises disponibles............................................................................................................................ 34 Derniers billets postés .............................................................................................................................. 36 2.7.1 Paramètres ........................................................................................................................................ 36 2.7.3 Répertoire.......................................................................................................................................... 36 2.7.2 2.7.4 2.7.5 2.8 Configuration ..................................................................................................................................... 36 Exemple du code source ................................................................................................................... 36 Balises disponibles............................................................................................................................ 36 Billets les plus commentés ....................................................................................................................... 39 2.8.1 Paramètres ........................................................................................................................................ 39 2.8.3 Répertoire.......................................................................................................................................... 40 2.8.2 2.8.4 2.8.5 2.9 Configuration ..................................................................................................................................... 40 Exemple du code source ................................................................................................................... 40 Balises disponibles............................................................................................................................ 40 Derniers commentaires postés ................................................................................................................. 43 2.9.1 Paramètres ........................................................................................................................................ 43 2.9.3 Répertoire.......................................................................................................................................... 44 2.9.2 2.9.4 2.9.5 2.10 Configuration ..................................................................................................................................... 43 Exemple du code source ................................................................................................................... 44 Balises disponibles............................................................................................................................ 44 Liens sympas .......................................................................................................................................... 46 2.10.1 Paramètres ...................................................................................................................................... 46 2.10.3 Répertoire........................................................................................................................................ 46 2.10.2 2.10.4 3 Répertoire.......................................................................................................................................... 24 2.10.5 Configuration ................................................................................................................................... 46 Exemple du code source ................................................................................................................. 46 Balises disponibles.......................................................................................................................... 47 Les widgets du service Communication ..................................................................................................... 48 3.1 Formulaire de contact ............................................................................................................................... 48 3.1.1 Informations sur les fichiers .............................................................................................................. 48 3.1.3 Configuration ..................................................................................................................................... 48 3.1.2 3.1.4 3.1.5 3.1.6 3.1.7 Paramètres ........................................................................................................................................ 48 Répertoire.......................................................................................................................................... 48 Exemple du code source pour le fichier « index.html » ..................................................................... 48 Balises disponibles pour le fichier « index.html » .............................................................................. 50 Exemple du code source pour le fichier « mail.html » ....................................................................... 51 www.kiubi.com
3
3.1.8 Balises disponibles pour le fichier « mail.html » ................................................................................ 52 3.2.1 Paramètres ........................................................................................................................................ 52 3.2.3 Répertoire.......................................................................................................................................... 52 3.2 Syndication (du Blog)................................................................................................................................ 52 3.2.2 3.2.4 3.2.5 3.3 Balises disponibles............................................................................................................................ 53 Inscription à la newsletter ......................................................................................................................... 53 Paramètres ........................................................................................................................................ 54 3.3.3 Répertoire.......................................................................................................................................... 54 3.3.4 3.3.5 Configuration ..................................................................................................................................... 54 Exemple du code source ................................................................................................................... 54 Balises disponibles............................................................................................................................ 55 Les widgets du service Recherche .............................................................................................................. 55 4.1 Recherche simple ..................................................................................................................................... 55 4.1.1 Informations sur les fichiers .............................................................................................................. 56 4.1.3 Configuration ..................................................................................................................................... 56 4.1.2 4.1.4 4.1.5 4.1.6 4.1.7 4.1.8 4.1.9 4.1.10 4.1.11 5 Exemple du code source ................................................................................................................... 52 3.3.1 3.3.2 4 Configuration ..................................................................................................................................... 52 4.1.12 Paramètres ........................................................................................................................................ 56 Répertoire.......................................................................................................................................... 56 Exemple du code source pour le fichier « index.html » ..................................................................... 56 Balises disponibles pour le fichier « index.html » .............................................................................. 57 Exemple du code source pour le fichier « cms.html » ....................................................................... 57 Balises disponibles pour le fichier « cms.html » ................................................................................ 57 Exemple du code source pour le fichier « blog.html » ....................................................................... 60 Balises disponibles pour le fichier « blog.html » ............................................................................. 60 Exemple du code source pour le fichier « catalogue.html » ............................................................ 63 Balises disponibles pour le fichier « catalogue.html » ..................................................................... 66 Les widgets du service Gestion de compte ................................................................................................ 74 5.1 Identification rapide .................................................................................................................................. 74 5.1.1 Paramètres ........................................................................................................................................ 74 5.1.3 Répertoire.......................................................................................................................................... 75 5.1.2 5.1.4 5.1.5 5.2 Configuration ..................................................................................................................................... 74 Exemple du code source ................................................................................................................... 75 Balises disponibles ............................................................................................................................ 76 Identification ............................................................................................................................................. 76 5.2.1 Paramètres ........................................................................................................................................ 77 5.2.3 Répertoire.......................................................................................................................................... 77 5.2.2 5.2.4 5.2.5 5.3 Configuration ..................................................................................................................................... 77 Exemple du code source ................................................................................................................... 77 Balises disponibles............................................................................................................................ 78 Formulaire d'inscription ............................................................................................................................. 78 5.3.1 Informations sur les fichiers .............................................................................................................. 79 5.3.3 Configuration ..................................................................................................................................... 79 5.3.2 5.3.4 5.3.5 5.3.6 5.3.7 5.3.8 Paramètres ........................................................................................................................................ 79 Répertoire.......................................................................................................................................... 79 Exemple du code source pour le fichier « index.html » ..................................................................... 79 Balises disponibles pour le fichier « index.html » .............................................................................. 82 Exemple du code source pour le fichier « mail.html » ....................................................................... 83 Balises disponibles pour le fichier « mail.html » ................................................................................ 84 www.kiubi.com
4
5.4 Tableau de bord ....................................................................................................................................... 84 5.4.1 Informations sur les fichiers .............................................................................................................. 84 5.4.3 Configuration ..................................................................................................................................... 85 5.4.2 5.4.4 5.4.5 5.4.6 5.4.7 5.4.8 5.4.9 5.4.10 5.4.11 5.4.12 5.4.13 5.4.14 5.4.15 5.4.16 5.4.17 5.4.18 5.4.19 5.4.20 Paramètres ........................................................................................................................................ 84 Répertoire.......................................................................................................................................... 85 Exemple du code source pour le fichier « index.html » ..................................................................... 85 Balises disponibles pour le fichier « index.html » .............................................................................. 86 Exemple du code source pour le fichier « abonnements.html » ........................................................ 88 Balises disponibles pour le fichier « abonnements.html » ................................................................ 89 Exemple du code source pour le fichier « avatar.html » ................................................................... 89 Balises disponibles pour le fichier « avatar.html » .......................................................................... 90 Exemple du code source pour le fichier « id_web.html » ................................................................ 90 Balises disponibles pour le fichier « id_web.html » ......................................................................... 91 Exemple du code source pour le fichier « infos_perso.html » ......................................................... 91 Balises disponibles pour le fichier « infos_perso.html » .................................................................. 92 Exemple du code source pour le fichier « motdepasse.html » ........................................................ 93 Balises disponibles pour le fichier « motdepasse.html » ................................................................. 94 Exemple du code source pour le fichier « motdepasse_perdu.html » ............................................. 94 Balises disponibles pour le fichier « motdepasse_perdu.html » ..................................................... 95 Exemple du code source pour le fichier « mail_motdepasse_perdu.html » .................................... 95 Balises disponibles pour le fichier « mail_motdepasse_perdu.html » ............................................. 96 www.kiubi.com
5
1 Les widgets du service Site web
1.1 Menu horizontal
Affiche un menu de navigation du Site web de manière horizontale.
1.1.1
o
Paramètres
Modèle graphique : permet de choisir entre les différents modèles graphiques disponibles. Chaque
modèle graphique détermine une apparence différente du widget.
1.1.2
Configuration
o
Menu : choix du menu du Site web qui doit être affiché.
o
Afficher le 1er / 2ème / 3ème / 4ème niveau de l’arborescence : une arborescence d’un menu du Site
web peut être composée de 4 niveaux de pages et de sous-pages. Cette configuration permet de choisir
quel niveau doit être affiché. Un seul niveau d’arborescence peu être affiché par ce widget.
1.1.3
Répertoire
theme/fr/widgets/site_web/menu_h
1.1.4
Exemple du code source

<ul class="menu_h">

<li>

<a href="{lien}" class="{actif}" title="{page}" target="{cible}">{page}</a>


<span class="{type}">{page}</span>

</li>

</ul>



1.1.5
Balises disponibles
 
Le contenu du bloc s'affiche s'il y a des pages à afficher dans ce menu.
www.kiubi.com
6
 
Le contenu du bloc s'affiche s'il n'y a aucune page à afficher dans ce menu.
 
Le contenu du bloc s'affiche pour chaque page du menu.
Doit être contenu entre  et 
{actif}
Affiche actif si la page est active, c’est-à-dire si l'internaute s'y trouve. Sinon n'affiche rien.
Doit être contenu entre  et 
{cible}
Cible du lien (attribut target).
{lien}
URL du lien vers la page correspondante.
{menu_niv}
Niveau de profondeur de la page du menu.
Affiche 01 pour une page de niveau 1, 02 pour une page de niveau 2, 03 pour une page de niveau 3 et 04 pour
une page de niveau 4.
{page}
Intitulé de la page.
{type}
Type de la page.
Affiche page pour une page libre, lien_ext pour un lien externe, lien_int pour un lien interne et ne renvoie
aucune valeur pour un séparateur.
 
Le contenu du bloc s'affiche si l'élément à afficher est une page (tout sauf un séparateur). C'est dans ce bloc
qu'on utilise généralement les balises de ce widget.
 
www.kiubi.com
7
Le contenu du bloc s'affiche si l'élément à afficher est un séparateur. C'est dans ce bloc qu'on utilise
généralement les balises de ce widget.
1.2 Menu vertical
Affiche un menu de navigation du Site web de manière verticale.
1.2.1
o
Paramètres
o
1.2.2
Intitulé : afficher un intitulé, un titre, au widget.
Configuration
o
Menu : choix du menu du Site web qui doit être affiché.
o
Déployer les pages : affiche l’intégralité de l’arborescence disponible (pages et sous-pages
simultanément).
o
Afficher le 1er / 2ème / 3ème / 4ème niveau de l’arborescence : une arborescence d’un menu du Site
web peut être composée de 4 niveaux de pages et de sous-pages. Cette configuration permet de choisir
quel niveau doit être affiché. Plusieurs niveaux d’arborescence peuvent être affichés simultanément.
1.2.3
Répertoire
theme/fr/widgets/site_web/menu_v
1.2.4

<div class="block">
<div class="menu_v">

<h2>{intitule}</h2>

<div class="content">

<ul class="menu_niv_{page_niv}">


<li class="{type}"><a href="{lien}" title="{page}" class="{actif}"
target="{cible}">{page}</a></li>


<li class="{type}">{page}</li>

www.kiubi.com
8
<li>{sspage}</li>

</ul>

</div>
</div>
</div>



1.2.5
Balises disponibles
 
Le contenu du bloc s'affiche s'il y a des pages à afficher dans ce menu.
 
Le contenu du bloc s'affiche s'il n'y a aucune page à afficher dans ce menu.
 
Le contenu du bloc est recopié pour chaque niveau d'arborescence
Doit être contenu entre  et 
 
Le contenu du bloc s'affiche pour chaque page du menu.
Doit être contenu entre  et 
{actif}
Affiche actif si la page est active. Sinon n'affiche rien.
{cible}
Cible du lien (attribut target).
{lien}
URL du lien vers la page correspondante.
{menu_niv}
Niveau de profondeur de la page du menu.
Affiche 01 pour une page de niveau 1, 02 pour une page de niveau 2, 03 pour une page de niveau 3 et 04 pour
une page de niveau 4.
www.kiubi.com
9
{page_niv}
Niveau de profondeur de la page du menu en fonction du niveau d’arborescence affiché.
Affiche 01 pour le premier niveau d’arborescence affiché, 02 pour le deuxième niveau d’arborescence affiché, 03
pour le troisième niveau d’arborescence affiché et 04 pour le quatrième niveau d’arborescence affiché.
{page}
Nom de la page.
{sspage}
Balise spéciale à mettre impérativement dans le bloc "pagetype" mais après les blocs "spacer" et "page". Elle
permet d'afficher les différents niveaux d'arborescence les uns dans les autres.
{type}
Type de la page.
Affiche page pour une page libre, lien_ext pour un lien externe, lien_int pour un lien interne et ne renvoi
aucune valeur pour un séparateur.
 
Le contenu du bloc s'affiche si l'élément à afficher est une page (tout sauf un séparateur). C'est dans ce bloc
qu'on utilise généralement les balises de ce widget.
 
Le contenu du bloc s'affiche si l'élément à afficher est un séparateur. C'est dans ce bloc qu'on utilise
généralement les balises de ce widget.
1.3 Contenu d’une page libre
Ce widget très important affiche le contenu d'une page libre du Site web ; il affiche les billets d’une page libre
tout en conservant le modèle de mise en page propre à chaque billet.
Pour plus d’information sur les modèles de mise en page des billets, voir « Guide du desginer, 1
ère
partie, Les
types de billets ».
Avertissement : l’apparence du widget « Contenu de la page libre » sera donc détermée par les différents
modèles de mise en page des différents types de billets affichés.
www.kiubi.com
10
1.3.1
Paramètres
Aucun
1.3.2
o
Configuration
Afficher le contenu : choix de la page dont le contenu doit être affiché ; page en cours, toutes les pages
du Site web, page au choix.
o
Inclure les sous-pages : permet d’inclure le contenu des sous-pages de la page choisie au point
précédent.
o
Afficher les billets : restreindre l’affichage aux seuls billets faisant partie d’un groupe ; tous les groupes
de billet ou un groupe au choix. Choisir "Aucun" restreint l’affichage aux billets ne faisant partis d’aucun
groupe.
o
Trier par : choix du critère de tri ; position, alphabétique ou aléatoire.
o
Limiter l’affichage aux X premiers billets : limite l’affiche aux X premiers billets disponibles en fonction de
la configuration du widget ; la valeur de X peut être choisie.
o
Afficher la navigation : afficher la navigation de page en page (page précédente / page suivante) si le
nombre de billets à afficher est supérieur à la valeur de X du point précédent.
1.3.3
Répertoire
theme/fr/widgets/site_web/contenu_page_libre
1.3.4
{liste_billets}
Cette page n’a pas de contenu
1.3.5
Balises disponibles
{liste_billets}
Affiche la liste des billets, c'est à dire le contenu d'une page libre du Site web.
 
Le contenu du bloc s'affiche s'il n'y a aucun billet à afficher.
1.4 Bloc d’extraits
Ce widget très important affiche un extrait du contenu d'une page libre du Site web ; il affiche les billets d’une
page libre en ne conservant PAS le modèle de mise en page propre à chaque billet mais en appliquant un
unique modèle de mise en page à tous les billets affichés.
Par défaut Kiubi propose 3 modèles graphiques différents pour ce widget :
o
Le modèle par défaut, qui intègre tous les éléments des billets.
o
Un second modèle, avec_lien_vers_page, qui intègre un lien vers la page d’origine des billets.
o
Un troisième modèle, sans_image, qui n’affiche pas les images des billets.
www.kiubi.com
11
Avertissement : l’apparence des billets affichés par le widget « Bloc d’extrait » sera donc détermée par le
modèle graphique du widget et non pas par les modèles graphiques des différents types de billets
affichés.
1.4.1
o
Paramètres
o
1.4.2
o
Configuration
Afficher le contenu : choix de la page dont le contenu doit être affiché ; page en cours, toutes les pages
du Site web, page au choix.
o
Inclure les sous-pages : permet d’inclure le contenu des sous-pages de la page choisie au point
précédent.
o
Afficher les billets : restreindre l’affichage aux seuls billets faisant partie d’un groupe ; tous les groupes
de billet ou un groupe au choix. Choisir "Aucun" restreint l’affichage aux billets ne faisant partis d’aucun
groupe.
o
Trier par : choix du critère de tri ; position, alphabétique ou aléatoire.
o
o
Afficher seulement les Y premiers caractères du contenu des billets : affiche les Y premiers caractères
du contenu des balises {resume_texte1} et {resume_texte2} ; la valeur de Y peut être choisie. Si Y
est égale à 0, le contenu ne sera pas affiché. Si Y est non renseignée, tout le contenu sera affiché.
o
1.4.3
Répertoire
theme/fr/widgets/site_web/bloc_extrait
1.4.4
<div class="block">

<h2>{intitule}</h2>


<div class="post_extrait">

<img src="{racine}/media/miniature/{texte10}" alt="{titre}" class="illustration" />


<h3>{titre}</h3>


www.kiubi.com
12
<h4>{sstitre}</h4>


<p>{resume_texte1}</p>

</div>
<div class="post_extrait_footer"></div>

</div>
</div>
1.4.5
Balises disponibles
 
Le contenu du bloc s'affiche pour chaque billet.
Le contenu du bloc s'affiche s'il n'y a aucun billet à afficher.
{accueil}
Affiche 1 si la page libre du billet est la page d'accueil, sinon affiche 0.
Doit être contenu entre  et 
{auteur}
Nom de l'auteur du billet.
{auteur_modif}
Nom de l'utilisateur qui a modifié le billet en dernier.
{billet_id}
Id du billet.
{groupe_billet}
Groupe du billet.
{intitule_page}
Intitulé de la page libre du billet.
www.kiubi.com
13
{lien_page}
URL vers la page libre du billet.
{lien_billet}
URL spéciale vers la page libre du billet. Les widgets "Contenu de la page libre" de la page libre du billet qui
peuvent afficher ce billet n'afficherons que ce billet là, et tous les autres widgets fonctionneront normalement.
{lg}
Langue du billet.
Affiche toujours fr pour l’instant.
{nom_optim}
Nom optimisé de la page libre du billet.
{resume_texte1}
Version tronquée du contenu du champ texte1. Configurable dans le widget.
{resume_texte2}
Version tronquée du contenu du champ texte2. Configurable dans le widget.
{titre}
Titre du billet.
{sstitre}
Sous-titre du billet.
{texte1} à {texte15}
Affiche le contenu des champs texte1 à texte15.
{type_billet}
Type du billet.
Affiche le nom du répertoire du billet sur l’espace FTP.
www.kiubi.com
14
 
Le contenu du bloc ne s'affiche que si le titre du billet n'est pas vide.
 
Le contenu du bloc ne s'affiche que si le sous-titre du billet n'est pas vide.
  à  
Les contenus des blocs ne s'affichent que si les contenus des champs textes correspondants ne sont pas vides.
2 Les widgets du service Blog
2.1 Catégories
Affiche la liste des catégories du Blog. Chaque catégorie permet de restreindre l’affichage des billets à ceux qui
ont été postés dans cette catégorie.
2.1.1
Paramètres
o
o
2.1.2
Configuration
Aucune.
2.1.3
Répertoire
theme/fr/widgets/blog/categories
2.1.4
<div class="block">
<h2>{intitule}</h2>
<ul>

<li><a href="{baseLangue}/blog/" class="{actif}"
title="{intitule_accueil}">{intitule_accueil}</a></li>


<li><a href="{baseLangue}/blog/{nom_optim}/" class="{actif}"
title="{intitule_categorie}">{intitule_categorie} ({nb_billets})</a></li>
www.kiubi.com
15

</ul>

<p class="vide">Pas de billet posté</p>

</div>
</div>
2.1.5
Balises disponibles
{intitule_accueil}
Intitulé de la page d'accueil du Blog.
 
Le bloc sert à afficher ou non un lien vers la page d'accueil du blog dans la liste des catégories. Le contenu du
bloc s'affiche si dans la console d’administration l'option "Afficher la page" dans "Mon Site / Blog / Page d'Accueil"
est à "Oui".
 
Le contenu du bloc s'affiche pour chaque catégorie.
{auteur}
Nom du créateur de la catégorie.
Doit être contenu entre  et 
{categorie_id}
Id de la catégorie.
{intitule_categorie}
Intitulé de la catégorie.
{nb_billets}
Nombre de billet dans la catégorie.
{nom_optim}
Nom optimisé de la catégorie tel qu'il est défini dans la console d’administration dans la page d'édition d'une
catégorie du "Blog" dans le champ "Nom de la page".
www.kiubi.com
16
2.2 Archives
Affiche les archives du Blog sous la forme d'une liste de mois. Chaque mois permet de restreindre l’affichage des
billets à ceux qui ont été postés ce mois-ci.
2.2.1
Paramètres
o
o
2.2.2
Configuration
Aucune.
2.2.3
Répertoire
theme/fr/widgets/blog/archives
2.2.4
<div class="block">
<h2>{intitule}</h2>
<ul>

<li><a href="{baseLangue}/blog/{annee_archive}/{num_mois_archive}/" class="{actif}"
title="{mois_archive|ucfirst} {annee_archive}">{mois_archive|ucfirst} {annee_archive}</a></li>

</ul>

<p class="vide">Pas de billet posté</p>

</div>
</div>
2.2.5
Balises disponibles
 
Le contenu du bloc s'affiche pour chaque mois d'archive.
 
Le contenu du bloc s'affiche s'il n'y a aucune archive à afficher.
{annee_archive}
www.kiubi.com
17
Année de l'archive
Doit être contenu entre  et 
{mois_archive}
Mois de l'archive en toutes lettres.
{num_mois_archive}
Numéro du mois de l'archive (01-12).
2.3 Liste des billets
Ce widget très important affiche les billets du Blog.
2.3.1
o
Paramètres
2.3.2
o
Configuration
Afficher les billets : choix de la catégorie dont le contenu doit être affiché ; catégorie en cours, toutes les
catégories du Blog, catégorie au choix.
o
Trier par : choix du critère de tri ; date de publication, alphabétique ou aléatoire.
o
o
du contenu de la balise {accroche} ; la valeur de Y peut être choisie. Si Y est égale à 0, le contenu ne
sera pas affiché. Si Y est non renseignée, tout le contenu sera affiché.
o
2.3.3
Répertoire
theme/fr/widgets/blog/liste_billets
2.3.4
<div class="post_blog">
<div class="post_header">
<h2><a href="{lien_billet}" title="Lire le détail du billet">{titre}</a></h2>
{num_jour_publication} {mois_abrev_publication} {annee_publication} à
{heure_publication}h{minute_publication} par <span class="auteur">{auteur}</span> </div>
<div class="post_content">
{accroche}
www.kiubi.com
18
</div>

<div class="post_detail"><a href="{lien_billet}" title="Lire le détail du
billet">Lire la suite...</a></div>


<div class="bookmarqueurs">Ajouter à :<span>

<a href="{bk_url}" title="{bk_code}" target="_blank" style="background:
url({racine}/{theme}/fr/images/bookmarqueurs/{bk_img}) no-repeat left center">{bk_code}</a> |

</span>

<a href="javascript:void(0);" onclick="Element.toggle('lb{billet_id}');" title="Afficher
plus de bookmarqueurs">plus de bookmarqueurs</a>
<ul id="lb{billet_id}" style="display:none;">
<li><a href="{bk_url}" title="{bk_code}" target="_blank"><img
src="{racine}/{theme}/fr/images/bookmarqueurs/{bk_img}" alt="{bk_code}:{titre|htmlentities}"
/></a></li>
</ul>

</div>

<div class="post_footer">Posté dans <a href="{lien_categorie}" title="Voir les autres
billets de la catégorie">{intitule_categorie}</a> | <a
href="{lien_billet}#commentaires" title="Lire ou poster un commentaire">{nb_commentaires}
commentaire{pluriel_commentaire}</a></div>
</div>


Pas de billet posté

2.3.5
Balises disponibles
Le contenu du bloc s'affiche s'il n'y a aucun billet dans le blog.
{accroche}
Accroche du billet. Affiche le chapô du billet ou son contenu si son chapô est vide.
www.kiubi.com
19
{annee_publication}
Année de publication du billet.
{auteur}
Auteur du billet.
{billet_id}
Id du billet.
{categorie_id}
Id de la catégorie du billet.
{categorie_optim}
Nom optimisé de la catégorie tel qu'il est dans la page d'édition d'une catégorie du Blog dans le champ "Nom de
la page".
{chapo}
Chapô du billet.
{commentaires_ouverts}
Affiche 1 quand les commentaires du billet sont ouverts, sinon 0.
{contenu}
Contenu du billet.
{heure_publication}
Heure de publication du billet.
Intitulé de la catégorie du billet.
{jour_semaine_publication}
www.kiubi.com
20
Jour de la semaine de la date de publication (lundi - dimanche).
{lien_billet}
URL vers le billet.
{lien_categorie}
URL vers la catégorie du billet.
{lienperma_billet}
URL complète (avec le nom de domaine) vers le billet.
{minute_publication}
Minute de la date de publication.
{mois_abrev_publication}
Nom du mois de la date de publication abrégé (jan - déc).
{mois_publication}
Mois de la date de publication (janvier - décembre).
{nb_commentaires}
Nombre de commentaires.
{nom_optim}
Nom optimisé du billet tel qu'il est dans la page d'édition du billet dans le champ "Nom de la page".
{num_jour_publication}
Numéro du jour de la date de publication (01 - 31).
{num_mois_publication}
Numéro du mois de la date de publication (01 - 12).
www.kiubi.com
21
{pluriel_commentaire}
Affiche s s'il y'a plus d'un commentaire au billet.
{seconde_publication}
Secondes de la date de publication.
{titre}
Titre du billet.
 
Le contenu du bloc s'affiche si l'accroche du billet n'est pas vide.
 
Le contenu du bloc s'affiche si le chapô du billet n'est pas vide.
 
Le contenu du bloc s'affiche si le contenu du billet n'est pas vide.
 
Le contenu du bloc s'affiche si ni le chapô ni le contenu du billet ne sont vide.
 
Le contenu du bloc s'affiche quand les bookmarqueurs sont activés dans la liste des billets. Cette option est
configurable dans "Mon site / Blog / Configuration et Préférences".
 
Le contenu du bloc s'affiche pour chaque bookmarqueur mis en avant. Ce choix est configurable dans "Mon site /
Blog / Configuration et Préférences".
Doit être contenu entre  et 
{bk_code}
Nom du bookmarqueur.
Doit être contenu entre  et 
www.kiubi.com
22
{bk_img}
Icône du bookmarqueur.
{bk_url}
URL préformatée pour marquer ce billet chez le bookmarqueur.
 
Le contenu du bloc s'affiche s'il y a des bookmarqueurs qui ne sont pas mis en avant. Ce choix est configurable
dans "Mon site / Blog / Configuration et Préférences".
Le contenu du bloc s'affiche pour chaque bookmarqueur qui n'est pas mis en avant. Ce choix est configurable
Doit être contenu entre  et 
{bk_code}
{bk_img}
{bk_url}
2.4 Détail d’un billet
Ce widget très important affiche le détail d’un billet du Blog.
Avertissement : ce widget ne peut être utilisé que sur la page type "Détail du billet" du service "Blog".
2.4.1
o
Paramètres
www.kiubi.com
23
2.4.2
Configuration
Aucune
2.4.3
Répertoire
theme/fr/widgets/blog/detail_billet
2.4.4
<div class="post_blog">
<h2><a href="#" title="Lire le détail du billet">{titre}</a></h2>
{num_jour_publication} {mois_abrev_publication} {annee_publication} à
{heure_publication}h{minute_publication} par <span class="auteur">{auteur}</span> </div>

<div class="post_chapo">
{chapo}
</div>


<div class="post_content">
{contenu}
</div>


<div class="bookmarqueurs">Ajouter à :<span>
<a href="{bk_url}" title="{bk_code}" target="_blank" style="background:
url({racine}/{theme}/fr/images/bookmarqueurs/{bk_img}) no-repeat left center">{bk_code}</a> |
</span>

<a href="javascript:void(0);" onclick="Element.toggle('lb{billet_id}');" title="Afficher
plus de bookmarqueurs">plus de bookmarqueurs</a>
<ul id="lb{billet_id}" style="display:none;">
<li><a href="{bk_url}" title="{bk_code}" target="_blank"><img
src="{racine}/{theme}/fr/images/bookmarqueurs/{bk_img}" alt="{bk_code}:{titre|htmlentities}"
/></a></li>
</ul>

</div>

<div class="post_footer">Posté dans <a href="{lien_categorie}" title="Voir les autres
billets de la catégorie">{intitule_categorie}</a> | <a
www.kiubi.com
24
href="{lien_billet}#commentaires" title="Lire ou poster un commentaire">{nb_commentaires}
commentaire{pluriel_commentaire}</a></div>
</div>
2.4.5
Balises disponibles
{accroche}
{annee_publication}
{auteur}
Auteur du billet.
{billet_id}
Id du billet.
{categorie_id}
{categorie_optim}
la page".
{chapo}
Chapô du billet.
{contenu}
Contenu du billet.
{heure_publication}
www.kiubi.com
25
{lien_billet}
URL vers le billet.
{lien_categorie}
{lienperma_billet}
{mois_publication}
{nb_commentaires}
{nom_optim}
{titre}
Titre du billet.
www.kiubi.com
26
 
Le contenu du bloc s'affiche quand les bookmarqueurs sont activés dans le détail d'un billet. Cette option est
Le contenu du bloc s'affiche pour chaque bookmarqueur mis en avant. Ce choix est configurable dans "Mon site /
Blog / Configuration et Préférences".
{bk_code}
{bk_img}
{bk_url}
 
Le contenu du bloc s'affiche pour s'il y a des bookmarqueurs qui ne sont pas mis en avant. Ce choix est
Le contenu du bloc s'affiche pour chaque bookmarqueur qui n'est pas mis en avant. Ce choix est configurable
Doit être contenu entre  et 
{bk_code}
www.kiubi.com
27
{bk_img}
{bk_url}
2.5 Liste des commentaires
Affiche les commentaires d'un billet du Blog.
2.5.1
Paramètres
o
o
2.5.2
Configuration
Aucune
2.5.3
Répertoire
theme/fr/widgets/blog/liste_commentaires
2.5.4
<div class="blog_commentaires"> <a name="commentaires"></a>
<h2>{intitule}</h2>

<div class="post_commentaires">
<div class="post_header"><a href="#commentaire_{compteur}" title="Aller au commentaire"
id="commentaire_{compteur}">{compteur}.</a> Par

<span class="auteur"><a href="{site_auteur}">{auteur}</a></span>,


<span class="auteur">{auteur}</span>,

le {num_jour_publication} {mois_abrev_publication}
www.kiubi.com
28
{annee_publication} à {heure_publication}h{minute_publication} </div>
<div class="post_content post_admin"> <img
src="{avatar_miniature}" alt="{auteur}" class="avatar" />
<p>{commentaire}</p>
<div class="post_footer_commentaire"></div>
</div>
<div class="post_footer"></div>
</div>


<div class="post_commentaires">Soyez le premier à poster un commentaire !
</div>

</div>
2.5.5
Balises disponibles
 
Le contenu du bloc s'affiche pour chaque commentaire.
 
Le contenu du bloc s'affiche s'il n'y a aucun commentaire.
{avatar}
URL complète de l’avatar du membre, taille réelle 120px par 120px.
{avatar_miniature}
URL complète de l’avatar du membre, taille miniature 40px par 40px.
{annee_publication}
Doit être contenu entre  et 
{auteur}
Auteur du commentaire. Affiche le pseudo de l’auteur si l’auteur est anonyme. Affiche le pseudo de l’auteur ou
son nom si l’auteur est identifié quand le commentaire a été posté.
{nom_client}
www.kiubi.com
29
Auteur du commentaire. Affiche le pseudo de l’auteur si l’auteur est anonyme. Affiche le nom de l’auteur ou son
pseudo si l’auteur est identifié quand le commentaire a été posté.
{billet_id}
Id du billet auquel le commentaire est rattaché.
{categorie_id}
{categorie_optim}
la page".
{commentaire}
Texte du commentaire.
{commentaire_id}
Id du commentaire.
{email}
E-mail de l'auteur du commentaire.
{heure_publication}
{IP}
Adresse IP de l'auteur du commentaire.
www.kiubi.com
30
{mois_publication}
Mois de la date de publication ( janvier - décembre ).
{reverse_host}
Résolution DNS inverse de l'IP de l'auteur du commentaire.
{site_auteur}
Site de l'auteur du commentaire.
{titre}
Titre du commentaire.
{titre_billet}
Titre du billet.
www.kiubi.com
31
 
Le contenu du bloc s'affiche si le commentaire a été écrit dans la console d'administration du site par un
utilisateur ayant accès au Blog.
 
Le contenu du bloc s'affiche si l'auteur du site a indiqué l'adresse de son site.
 
Le contenu du bloc s'affiche si l'auteur du site n'a pas indiqué l'adresse de son site.
2.6 Ajout de commentaires
Affiche le formulaire d’ajout de commentaires à un billet du Blog.
2.6.1
Paramètres
o
o
2.6.2
Configuration
Aucune
2.6.3
Répertoire
theme/fr/widgets/blog/poster_commentaire
2.6.4
<div class="new_commentaire">
<h2>{intitule}</h2>


<div class="erreur">Veuillez compléter les champs :
<ul>

<li>{erreur}</li>
www.kiubi.com
32

</ul>
</div>

<form method="post" action="">
<table border="0" cellspacing="0" cellpadding="0">



<tr>
<td style="width: 30%;"><label for="auteur">Pseudo :</label></td>
<td><input name="auteur" id="auteur" type="text" class="textfield" value="{auteur}" />
</td>
</tr>
<tr>
<td><label for="email">E-mail
:</label></td>
<td><input name="email" id="email" type="text" class="textfield"
value="{email}" />
<span class="factultatif">facultatif</span></td>
</tr>
<tr>
<td><label for="site_web">Site Web
:</label></td>
<td><input name="site_web" id="site_web" type="text" class="textfield"
value="{site_web}" />
<span class="factultatif">facultatif</span></td>
</tr>

<tr>
<td><label for="commentaire">Votre commentaire :</label></td>
<td> </td>
</tr>
<tr>
<td colspan="2"><textarea name="commentaire" id="commentaire" rows="10"
class="textarea" cols="">{commentaire}</textarea></td>
</tr>

<tr>
<td colspan="2">Anti-spam : </td>
</tr>
<tr>
<td colspan="2">{captcha_question}
<input name="captcha[{captcha_id}]" type="text" class="textfield" style="width:
100px" />
</td>
</tr>
www.kiubi.com
33

<tr>
<td colspan="2" align="right"><input type="submit" name="Submit" value="Poster"
class="bt_post" title="Poster le commentaire" />
</td>
</tr>
</table>
<div>
<input type="hidden" name="act" value="post" />
<input type="hidden" name="ctl" value="{ctl}" />
</div>
</form>


<a href="{baseLangue}/compte/login.html?o=o">Identifiez vous</a> pour poster un commentaire.


Les commentaires de ce billet sont fermés


Votre commentaire a bien été enregistré, il doit d'abord être validé par
l'éditeur de ce blog avant d'apparaître dans la liste des commentaires.

</div>
2.6.5
Balises disponibles
 
Le contenu du bloc s'affiche quand les commentaires sont fermés.
 
Le contenu du bloc s'affiche s’il est nécessaire de s’identifier pour poster des commentaires.
 
Le contenu du bloc s'affiche une fois un commentaire publié si les commentaires sont modérés.
 
Le contenu du bloc s'affiche quand les commentaires sont ouverts.
{auteur}
Cette balise sert à réafficher le nom de l'auteur saisi dans le formulaire en cas d'erreur.
Doit être contenu entre  et 
www.kiubi.com
34
{commentaire}
Cette balise sert à réafficher le commentaire de l'auteur saisi dans le formulaire en cas d'erreur.
{email}
Cette balise sert à réafficher l'email de l'auteur saisi dans le formulaire en cas d'erreur.
{site_web}
Cette balise sert à réafficher le site web de l'auteur saisi dans le formulaire en cas d'erreur.
 
Le contenu du bloc s'affiche si le captcha (dispositif anti-spam) est activé. Cette option est configurable "Mon site
/ Blog / Configuration et Préférences".
{captcha_id}
Id du captcha.
Doit être contenu entre  et 
{captcha_question}
Question du captcha.
 
Le contenu du bloc s'affiche s'il y a des erreurs à la soumission du commentaire.
 
Le contenu du bloc s'affiche pour chaque erreur.
Doit être contenu entre  et 
{erreur}
Erreur indiquant qu'un champ est manquant ou mal rempli.
Doit être contenu entre  et 
 
Le contenu du bloc s'affiche si l’internaute est identifié sur le site.
 
www.kiubi.com
35
Le contenu du bloc s'affiche si l’internaute n’est pas identifié sur le site.
2.7 Derniers billets postés
Affiche les derniers billets postés dans le Blog.
2.7.1
Paramètres
o
o
o
2.7.2
Configuration
Aucune
2.7.3
Répertoire
theme/fr/widgets/blog/derniers_billets_postes
2.7.4
<div class="block">
<h2>{intitule}</h2>
<ul>
<li><a href="{lien_billet}" title="{titre}">{titre}</a></li>

</ul>
</div>
</div>
2.7.5
Balises disponibles
www.kiubi.com
36
{accroche}
{annee_publication}
{auteur}
Auteur du billet.
{billet_id}
Id du billet.
{categorie_id}
{categorie_optim}
la page".
{chapo}
Chapô du billet.
{contenu}
Contenu du billet.
{heure_publication}
www.kiubi.com
37
{lien_billet}
URL vers le billet.
{lien_categorie}
{lienperma_billet}
{mois_publication}
{nb_commentaires}
{nom_optim}
www.kiubi.com
38
{titre}
Titre du billet.
Le contenu du bloc s'affiche si ni le chapô ni le contenu du billet ne sont vides.
2.8 Billets les plus commentés
Affiche les derniers billets les plus commentés du Blog.
2.8.1
o
Paramètres
www.kiubi.com
39
o
o
2.8.2
Configuration
Aucune
2.8.3
Répertoire
theme/fr/widgets/blog/les_plus_commentes
2.8.4
<div class="block">
<h2>{intitule}</h2>
<ul>

<li><a href="{lien_billet}" title="{titre}">{titre} ({nb_commentaires})</a></li>

</ul>
</div>
</div>
2.8.5
Balises disponibles
{accroche}
{annee_publication}
www.kiubi.com
40
{auteur}
Auteur du billet.
{billet_id}
Id du billet.
{categorie_id}
{categorie_optim}
la page".
{chapo}
Chapô du billet.
{contenu}
Contenu du billet.
{heure_publication}
{lien_billet}
www.kiubi.com
41
URL vers le billet.
{lien_categorie}
{lienperma_billet}
{mois_publication}
{nb_commentaires}
{nom_optim}
www.kiubi.com
42
{titre}
Titre du billet.
Le contenu du bloc s'affiche si ni le chapô ni le contenu du billet ne sont vide.
2.9 Derniers commentaires postés
Affiche les derniers commentaires postés dans le Blog
2.9.1
o
Paramètres
o
o
Limiter l’affichage aux X derniers commentaires : limite l’affiche aux X derniers commentaires postés en
fonction de la configuration du widget ; la valeur de X peut être choisie.
o
Afficher seulement les Y premiers caractères du contenu des commentaires : affiche les Y premiers
caractères du contenu de la balise {resume_commentaire} ; la valeur de Y peut être choisie. Si Y est
égale à 0, le contenu ne sera pas affiché. Si Y est non renseignée, tout le contenu sera affiché.
2.9.2
Configuration
Aucune
www.kiubi.com
43
2.9.3
Répertoire
theme/fr/widgets/blog/derniers_commentaires_postes
2.9.4
<div class="block">
<h2>{intitule}</h2>
<ul>

<li><a href="{lien_billet}#commentaires" title="Aller au commentaire"
id="commentaire_{compteur}"><strong>{auteur} :</strong> {resume_commentaire}</a></li>

</ul>

<p class="vide">Soyez le premier à poster un commentaire !</p>

</div>
</div>
2.9.5
Balises disponibles
Le contenu du bloc s'affiche pour chaque commentaire.
 
Le contenu du bloc s'affiche s'il n'y a aucun commentaire.
{avatar}
{avatar_miniature}
{auteur}
Auteur du commentaire. Affiche le pseudo de l’auteur si l’auteur est anonyme. Affiche le pseudo de l’auteur ou
son nom si l’auteur est identifié quand le commentaire a été posté.
www.kiubi.com
44
{billet_id}
Id du billet auquel le commentaire est rattaché.
{categorie_id}
{categorie_optim}
la page".
{commentaire}
Texte du commentaire.
{commentaire_id}
Id du commentaire.
{email}
E-mail de l'auteur du commentaire.
{IP}
Adresse IP de l'auteur du commentaire.
{reverse_host}
Résolution DNS inverse de l'IP de l'auteur du commentaire.
{site_auteur}
Site de l'auteur du commentaire.
{titre_billet}
Titre du billet.
www.kiubi.com
45
{resume_commentaire}
Affiche les Y premier caractères du commentaire.
{lien_billet}
Affiche le lien du billet du commentaire.
 
Le contenu du bloc s'affiche si le commentaire a été écrit dans la console d'administration du site par un
utilisateur ayant accès au Blog.
 
Le contenu du bloc s'affiche si l'auteur du site a indiqué l'adresse de son site.
 
Le contenu du bloc s'affiche si l'auteur du site n'a pas indiqué l'adresse de son site.
2.10 Liens sympas
Affiche les Liens sympas du Blog (« Blogroll »).
2.10.1 Paramètres
o
o
2.10.2 Configuration
Aucune
2.10.3 Répertoire
theme/fr/widgets/blog/liens
2.10.4 Exemple du code source
<div class="block">
www.kiubi.com
46
<h2>{intitule}</h2>
<ul>

<li><a href="{adresse_lien}" target="_blank"
title="{desc_lien}">{intitule_lien}</a></li>

</ul>

<p class="vide">Pas de lien disponible</p>

</div>
</div>
2.10.5 Balises disponibles
 
Le contenu du bloc s'affiche pour chaque lien.
 
Le contenu du bloc s'affiche s'il n'y a aucun lien.
{adresse_lien}
URL du lien.
Doit être contenu entre  et 
{auteur}
Nom du créateur du lien.
{desc_lien}
Description du lien.
{intitule_lien}
Intitulé du lien.
{lien_id}
Id du lien.
www.kiubi.com
47
3 Les widgets du service Communication
3.1 Formulaire de contact
Afficher le formulaire de contact.
Si l'utilisateur ne rempli pas correctement tous les champs, le formulaire se réaffichera avec un message d'erreur
indiquant quels champs sont manquants ou incorrects. Le formulaire sera pré-rempli avec les informations
précédemment saisies.
Si toutes les informations obligatoires ont été saisies, un email sera envoyé au destinataire et la page se
rechargera et n'affichera plus le formulaire, mais seulement le message de confirmation.
3.1.1
Informations sur les fichiers
Contrairement aux autres widgets, le Formulaire de contact est composé de 2 fichiers :
o
Index.html : correspond au formulaire de contact à proprement dit.
o
mail.html: correspond à l’email (au format texte) envoyé.
3.1.2
Paramètres
o
o
3.1.3
Configuration
Aucune
3.1.4
Répertoire
theme/fr/widgets/communication/contact
3.1.5
Exemple du code source pour le fichier « index.html »
<div class="contact_form">
<h2>{intitule_form}</h2>

<form class="form" method="post" action="">
<div class="erreur">{erreurs}</div>

<tr>
<td class="label contact_{type}" style="width: 20%;"><label for="form_contact{id}"
class="{obligatoire}">{intitule}
www.kiubi.com
48

*

 :</label>
</td>
<td>
<input type="text" name="{name}" id="form_contact{id}" class="textfield"
value="{valeur}" />


<textarea name="{name}" rows="10" id="form_contact{id}" class="textarea" cols=""
>{valeur}</textarea>


<label for="form_contact_m{id}">
<input name="{name}" type="radio" id="form_contact_m{id}" value="M" class="radio"
{checked_m} />
M</label>
<label for="form_contact_mme{id}">
<input name="{name}" type="radio" id="form_contact_mme{id}" value="Mme"
class="radio" {checked_mme} />
Mme</label>
<label for="form_contact_mlle{id}">
<input name="{name}" type="radio" id="form_contact_mlle{id}" value="Mlle"
class="radio" {checked_mlle} />
Mlle</label>
<span id="form_contact{id}"></span>

</td>
</tr>

<tr>
<td colspan="2" align="right" class="label"><input type="submit" name="Submit"
value="Envoyer" class="bt_envoyer" /></td>
</tr>
<tr>
<td colspan="2">* champs obligatoires </td>
</tr>
</table>
<div>
<input type="hidden" name="act" value="send" />
<input type="hidden" name="ctl" value="{ctl}" />
</div>
</form>

www.kiubi.com
49

{message}

</div>
3.1.6
Balises disponibles pour le fichier « index.html »
 
Le bloc contient le formulaire de contact. Il s'affiche tant que le formulaire n'est pas validé.
 
Le contenu du bloc s'affiche s'il y a des erreurs à la soumission du formulaire.
Doit être contenu entre  et 
{erreurs}
Affiche toutes les erreurs en une fois.
 
Le contenu du bloc s'affiche pour chaque champ du formulaire de contact.
Doit être contenu entre  et 
{type}
Type du champ. Les valeurs possibles sont : "text", "textarea", "chiffres", "lettres", "email" et "civilite".
Doit être contenu entre  et 
{id}
Id du champ.
{obligatoire}
Affiche obligatoire si le champ est désigné comme tel. Sinon n'affiche rien.
{intitule}
Intitulé du champ.
{valeur}
Cette balise sert à réafficher la valeur précédemment saisie dans le formulaire en cas d'erreur.
www.kiubi.com
50
{name}
Nom du champ dans le formulaire (attribut name de la balise input)
 
Le contenu du bloc s'affiche si le champ est de type "civilite"
{checked_m}
Affiche checked="checked" si la civilité "M" avait été choisie. Sinon n'affiche rien.
{checked_mme}
Affiche checked="checked" si la civilité "Mme" avait été choisie. Sinon n'affiche rien.
{checked_mlle}
Affiche checked="checked" si la civilité "Mlle" avait été choisie. Sinon n'affiche rien.
 
Le contenu du bloc s'affiche si le champ est obligatoire.
 
Le contenu du bloc s'affiche si le champ est de type "texte", "que des chiffres", "que des lettres", "email"
 
Le contenu du bloc s'affiche si le champ est de type "texte multiligne"
 
Le contenu du bloc s'affiche à la place du formulaire de contact (bloc "contact") si tous les éléments obligatoires
ont bien été fournis et que la demande de contact a été envoyée.
{message}
Message de confirmation d'envoi de la demande de contact. Ce message est personnalisable dans "Mon site /
Communication / Formulaire de contact".
Doit être contenu entre  et 
3.1.7
Exemple du code source pour le fichier « mail.html »

{intitule} : {valeur}


www.kiubi.com
51
Informations supplementaires : {infos_connection}

3.1.8
Balises disponibles pour le fichier « mail.html »
 
Le contenu du bloc s'affiche pour chaque champ du formulaire de contact.
 
Le contenu du bloc s'affiche si des informations supplémentaires doivent être intégrées à l’email.
{intitule}
Intitulé du champ.
{infos_connection}
Affiche l’adresse IP et l’hôte de l’expéditeur de l’email.
Doit être contenu entre  et 
{valeur}
Affiche la valeur du champ saisi dans le formulaire de contact.
3.2 Syndication (du Blog)
Affiche les liens vers les derniers billets du Blog sous forme de flux (RSS ou ATOM) et les intègre dans la page
pour être reconnus automatiquement par les navigateurs. Par défaut, seuls les liens du flux de la catégorie
courante du Blog sont affichés.
3.2.1
o
Paramètres
o
o
Formats : permet de choisir entre les 2 formats proposés : RSS ou ATOM.
3.2.2
Configuration
Aucune
3.2.3
Répertoire
theme/fr/widgets/communication/syndication_blog
3.2.4
<div class="block">
www.kiubi.com
52
<h2>{intitule}</h2>
<ul>

<li><a href="{lien_flux}" title="{intitule_flux}">{intitule_flux}</a></li>

</ul>

<p class="vide">Pas de flux disponible</p>

</div>
</div>
3.2.5
Balises disponibles
 
Le contenu du bloc s'affiche pour chaque flux.
 
Le contenu du bloc s'affiche s'il n'y a aucun flux.
 
Le contenu du bloc s'affiche pour chaque flux.
{lien_flux}
URL vers le flux de syndication.
Doit être contenu entre  et 
{intitule_flux}
Intitulé du flux qui reprends le format du flux ("ATOM" ou "RSS 2.0").
Doit être contenu entre  et 
3.3 Inscription à la newsletter
Affiche le formulaire d'inscription/désinscription à la newsletter.
Seul l’email peut être demandé. Si l'utilisateur ne remplit par correctement ce champ, le formulaire se réaffichera
avec un message. Le formulaire sera aussi rempli avec les informations précédemment saisies.
Si toutes les informations obligatoires ont été saisies, la page se rechargera et n'affichera plus le formulaire, mais
seulement un message de confirmation.
Note : Kiubi ne permet pas d’envoyer des newsletters. Seule l’inscription (ou la désinscription) est possible
ainsi que l’export des abonnés au format .xls.
www.kiubi.com
53
3.3.1
Paramètres
o
o
3.3.2
Configuration
Aucune
3.3.3
Répertoire
theme/fr/widgets/communication/newsletter
3.3.4
<div class="block">
<div class="post_newsletter">
<h2>{intitule}</h2>

<div class="erreur">{erreur}</div>

<form action="" method="post">
<input type="text" name="email" value="{email}" class="textfield"/>
<input type="submit" value="ok" class="bouton"/>
<br />
<input type="radio" class="radio" name="opt" value="in" id="opt_in" {checked_in}/>
<label for="opt_in">S'inscrire</label>
<br />
<input type="radio" class="radio" name="opt" value="out" id="opt_out" {checked_out}/>
<label for="opt_out">Se désinscrire</label>
<input type="hidden" name="ctl" value="{ctl}"/>
</form>


{message}

</div>
</div>
</div>
www.kiubi.com
54
3.3.5
Balises disponibles
 
Le bloc contient le formulaire.
{checked_in}
Affiche checked="checked" si l'utilisateur voulait s'inscrire. Sinon n'affiche rien.
Doit être contenu entre  et 
{checked_out}
Affiche checked="checked" si l'utilisateur voulait se désinscrire. Sinon n'affiche rien.
{email}
Cette balise sert à réafficher la valeur précédemment saisie dans le formulaire en cas d'erreur.
 
Le contenu du bloc s'affiche en cas d'erreur dans l'inscription ou la désinscription. L'email de la personne peut
être invalide ou bien la personne cherche à s'inscrire alors qu'elle est déjà inscrite.
{erreur}
Message d'erreur. Ce message est personnalisable dans "Mon site / Communication / Abonnés à la Newsletter"
(voir champs "Si déjà inscrit", "Si pas encore inscrit").
 
Le contenu du bloc s'affiche à la place du formulaire (bloc "form") si le champ email a été rempli et que
l'inscription ou la désinscription s'est bien passée.
{message}
Message de confirmation. Ce message est personnalisable dans "Mon site / Communication / Abonnés à la
Newsletter" (voir champs "Si inscription validée", "Si désinscription validée").
Doit être contenu entre  et 
4 Les widgets du service Recherche
4.1 Recherche simple
Affiche la liste des résultats du moteur de recherche (et pas le moteur de recherche qui est généralement intégré
à un template principal). Le widget repose sur un fichier général qui est complété par un fichier spécifique par
www.kiubi.com
55
service. On présentera ainsi à l'aide de modèle graphiques différents les résultats d'une recherche dans les
services "Site Web", "Blog" et "Catalogue".
Avertissement : ce widget ne peut être utilisé que sur la page type "Recherche" de n’importe quel
service.
4.1.1
Contrairement aux autres widgets, la Recherche simple est composé de 4 fichiers :
o
index.html : correspond aux éléments communs du moteur de recherche.
o
cms.html : correspond aux résultats d’une recherche sur le Site web.
o
blog.html : correspond aux résultats d’une recherche sur le Blog.
o
catalogue.html : correspond aux résultats d’une recherche sur le Catalogue. Ce fichier inclut un moteur
de recherche avancé pour le catalogue.
4.1.2
o
Paramètres
4.1.3
o
Configuration
Limiter l’affichage aux X premiers billets : limite l’affichage aux X premiers billets disponibles en fonction
de la configuration du widget ; la valeur de X peut être choisie.
o
du contenu des balises {resume} et {accroche} ; la valeur de Y peut être choisie. Si Y est égale à 0, le
contenu ne sera pas affiché. Si Y est non renseignée, tout le contenu sera affiché.
o
4.1.4
Répertoire
theme/fr/widgets/recherche/simple
4.1.5
<div id="search_result">
<h2>Résultat(s) pour "{recherche}" </h2>
<div class="search_result_content"> {resultats}
<div class="search_result_nav"> 

Plus de résultat :

<a href="{lien_precedent}" title="page précedente">page précedente</a> |


<a href="{lien_page}" class="{selected}">{page}</a>


www.kiubi.com
56
| <a href="{lien_suivant}" title="page suivante">page suivante</a>


</div>
</div>
</div>
4.1.6
{recherche}
Expression recherchée.
{resultats}
Affiche les résultats de la recherche dans le service concerné.
4.1.7
Exemple du code source pour le fichier « cms.html »
<div class="search_result_header">
<h3>{nb_resultats} résultat(s) dans le Site web </h3>
<div class="content">Trier par : <a href="{lien_tri}=d" title="Trier par Date">Date</a> | <a
href="{lien_tri}=p" title="Trier par Page">Page</a></div>
</div>

<div class="post">
<h4><a href="{lien}" title="Aller à la page">{intitule_page}</a></h4>
<div class="post_header"> {titre_billet}</div>
<p>{resume}</p>
</div>


<div class="post">
<div class="post_header">Aucun résultat n'a été trouvé dans le
Site web. Rechercher <a href="/recherche/blog/?r={recherche}" title="Rechercher dans le
Blog">dans le Blog</a> ou <a href="/recherche/catalogue/?r={recherche}" title="Rechercher dans
le Catalogue">dans le Catalogue</a>.</div>
</div>

4.1.8
Balises disponibles pour le fichier « cms.html »
{nb_resultats}
Nombre de résultats trouvés.
{lien_tri}
URL permettant de classer les résultats selon un critère passé en paramètre.
www.kiubi.com
57
{lien_tri}=d pour trier par Date, {lien_tri}=p pour trier par Page
 
Le contenu du bloc s'affiche pour chaque résultat.
 
Le contenu du bloc s'affiche s'il n'y a aucun résultat.
{accueil}
Affiche 1 si la page libre du billet est la page d'accueil, sinon affiche 0.
Doit être contenu entre  et 
{auteur}
Nom de l'auteur du billet.
{auteur_modif}
Nom de l'utilisateur qui a modifié le billet en dernier.
{billet_id}
Id du billet.
{titre}
Titre du billet.
{titre_billet}
Affiche le titre du billet ou le sous-titre si le titre est vide.
{sstitre}
Sous-titre du billet.
Affiche les champs texte1 à texte15.
{resume}
Version coupée du champ texte1 ou texte2 si le texte1 est vide. La longueur est configurable dans le widget.
www.kiubi.com
58
{resume_texte1}
Version coupée du champ texte1. La longueur est configurable dans le widget.
{resume_texte2}
Version coupée du champ texte2. La longueur est configurable dans le widget.
{type_billet}
Type du billet.
Affiche le nom du répertoire du billet sur l’espace FTP.
{groupe_billet}
Groupe du billet.
{intitule_page}
Intitulé de la page libre du billet.
{nom_optim}
Nom optimisé de la page libre du billet (c'est à dire la dernière partie de l'URL de la page), tel qu'il est défini dans
les options avancées de la page d'édition de la page libre.
{lien_billet}
URL spéciale vers la page libre du billet. Les widgets "Contenu de la page libre" de la page libre du billet qui
peuvent afficher ce billet n'afficherons que ce billet là, et tous les autres widgets fonctionneront normalement.
{lien_page}
URL vers la page libre du billet.
{lg}
Langue du billet.
Affiche toujours fr pour l’instant.
www.kiubi.com
59
Les blocs ne s’affichent que si les contenus des champs textes correspondants ne sont pas vides.
4.1.9
Exemple du code source pour le fichier « blog.html »
<div class="search_result_header">
<h3>{nb_resultats} résultat(s) dans le Blog </h3>
<div class="content">Trier par : <a href="{lien_tri}=d" title="Trier par Date">Date</a> | <a
href="{lien_tri}=t" title="Trier par Titre">Titre</a> | <a href="{lien_tri}=c" title="Trier
par Catégorie">Catégorie</a> | <a href="{lien_tri}=a" title="Trier par
Auteur">Auteur</a></div>
</div>
<div class="post">
<h4><a href="{lien_billet}" title="Aller à la page ou au billet ou au sujet"> {titre}
</a></h4>
<div class="post_header">Par <span class="auteur">{auteur}</span>, le {num_jour_publication}
{annee_publication} dans <a href="{lien_categorie}" title="Voir les autres billets de la
catégorie">{intitule_categorie}</a> | <a href="{lien_billet}#commentaires" title="Lire
ou poster un commentaire">{nb_commentaires} commentaire{pluriel_commentaire}</a> </div>
<p>{accroche}</p>
</div>
<div class="post">
Blog. Rechercher <a href="/recherche/cms/?r={recherche}" title="Rechercher dans le Site
web">dans le Site web</a> ou <a href="/recherche/catalogue/?r={recherche}" title="Rechercher
dans le Catalogue">dans le Catalogue</a>.</div>
</div>
4.1.10 Balises disponibles pour le fichier « blog.html »
{nb_resultats}
{lien_tri}
URL permettant de classer les résultats selon un critère passé en paramètre.
{lien_tri}=d pour trier par Date, {lien_tri}=t pour trier par Titre, {lien_tri}=c pour trier par Catégorie,
{lien_tri}=a pour trier par Auteur,
www.kiubi.com
60
{accroche}
{annee_publication}
{auteur}
Auteur du billet.
{billet_id}
Id du billet.
{categorie_id}
{categorie_optim}
Nom optimisé de la catégorie tel qu'il est dans la page d'édition d'une catégorie du "Blog" dans le champ "Nom de
la page".
{chapo}
Chapô du billet.
{contenu}
Contenu du billet.
{heure_publication}
www.kiubi.com
61
{lien_billet}
URL vers le billet.
{lien_categorie}
{lienperma_billet}
{mois_publication}
{nb_commentaires}
{nom_optim}
www.kiubi.com
62
Affiche "s" s'il y'a plus d'un commentaire au billet.
{titre}
Titre du billet.
4.1.11 Exemple du code source pour le fichier « catalogue.html »
<div class="search_result_header"> <a href="javascript:void(0);"
onclick="Element.show('adsearch_{serial}'); " title="Effectuer une recherche avancée"
class="bt_adsearch">Recherche avancée</a>
<form method="get" id="form_{serial}">
<h3>{nb_resultats} résultat(s) dans le Catalogue</h3>
<table border="0" cellspacing="0" cellpadding="0" class="search_result_options">
<tr>
<td style="width:50%; text-align:left;"><label for="categ">Afficher la catégorie
:</label>
<select name="c" id="categ" onchange="if(!Element.visible('adsearch_{serial}'))
{Ssubmit('form_{serial}');$('ra_{serial}').value=''}">
<option value="">Toutes les catégories</option>

www.kiubi.com
63
<option value="{categorie_id}" {selected}>{intitule_categorie}</option>

</select></td>
<td style="widows:50%; text-align:right;">Trier par : <a href="{lien_tri}=po"
title="Trier par Produit">Produit</a> | <a href="{lien_tri}=pi" title="Trier par
Prix">Prix</a> | <a href="{lien_tri}=n" title="Trier par Note">Note</a> | <a
href="{lien_tri}=d" title="Trier par Date de disponibilité">Date de
disponibilité</a></td>
</tr>
</table>
</div>
<div id="adsearch_{serial}" class="adsearch" style="display:none;<!-END:simple -->">
<tr>
<td nowrap="nowrap" class="label"><label for="r{serial}">Intitulé du produit
: </label></td>
<td style="width:100%"><input type="text" name="r" id="r{serial}" class="textfield"
style="width: 400px" value="{rtexte}" /></td>
</tr>
<tr>
<td class="label" style="padding-bottom:5px;"><label for="t{serial}">Tags :
</label></td>
<td style="padding-bottom:5px;"><input type="text" name="t" id="t{serial}"
class="textfield" style="width: 400px" value="{rtags}" /></td>
</tr>
<tr>
<td> </td>
<td>Tags proposés :

<a href="javascript:void(0);" onclick="TP.addTag('{tag}');" title="Ajouter le mot
clé">{tag}</a>


Aucun mots clés dans cette catégorie
</td>
</tr>
<tr>
<td nowrap="nowrap" class="label">Date de sortie : </td>
<td> entre
<select name="md">
<option value="">Choisissez un mois</option>

<option value="{num_mois}" {selected}>{mois}</option>

</select>
et
www.kiubi.com
64
<select name="ma">
<option value="">Choisissez un mois</option>

<option value="{num_mois}" {selected}>{mois}</option>

</select></td>
</tr>
<tr>
<td class="label">Prix : </td>
<td>entre
<input type="text" name="pmin" class="textfield" style="width: 100px"
value="{pmin}" />
€ et
<input type="text" name="pmax" class="textfield" style="width: 100px"
value="{pmax}"/>
€</td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" name="Submit"
value="Rechercher"/></td>
</tr>
</table>
</div>
<input type="hidden" id="ra_{serial}" name="ra" value="av" />
</form>
</div>
<script type="text/javascript">
var TP = new KC.TagsPile('t{serial}');
</script>
<div class="post">

<a href="{lien_produit}" title="Plus de détail" class="illustration"><img
src="{racine}/media/miniature/{illustration}" alt="{intitule_produit|htmlentities}" /></a>


<a href="{lien_produit}" title="Plus de détail" class="illustration"><img
src="{racine}/{theme}/fr/images/produit_mini.gif" alt="{intitule_produit|htmlentities}"
style="width: {miniature_l}px; height: {miniature_h}px;" /></a>

<div class="post_produit" style="margin-left: {miniature_h}px;">
<p class="prix"><span class="promo
<s>{prix_barre}</s>

www.kiubi.com
65
</p>
<h4><a href="{lien_produit}" title="Plus de détail">{intitule_produit}</a></h4>

<p class="tags">Tags : {tags}</p>


<p class="alerte">Disponible à partir du
{num_jour_disponibilite}/{num_mois_disponibilite}/{annee_disponibilite}</p>


<p class="alerte">Toutes les variantes ne sont plus disponibles</p>


<p class="alerte">Produit en rupture de stock</p>

</div>

<p>{accroche}</p>

</div>
</div>
<div class="post">
Catalogue. Rechercher <a href="/recherche/cms/?r={rtexte}" title="Rechercher dans le Site
web">dans le Site web</a> ou <a href="/recherche/blog/?r={rtexte}" title="Rechercher dans le
Blog">dans le Blog</a>.</div>
</div>

4.1.12 Balises disponibles pour le fichier « catalogue.html »
{nb_resultats}
{lien_tri}
URL permettant de classer les résultats différemment. Par exemple, le code “{lien_tri}=alphaDESC“ retournera
l’URL de tri par ordre alphabétique inversé des produits.
Fonction de tri et paramètres associables à la balise {lien_tri}
•
Par ordre alphabétique :
o
alpha
o
alphaDESC
www.kiubi.com
66
•
•
•
•
Par prix :
o
Prix
o
prixDESC
Par date de disponibilité :
o
date
o
dateDESC
Par note moyenne :
o
Note
o
noteDESC
Classement aléatoire :
o
Rand
Il est a noter que les produits vedettes affichés le seront toujours en premier, tout en respectant entre eux le
paramètre de tri choisi.
{produit_id}
Id du produit.
{type_produit}
Type du produit
Affiche le nom du répertoire du produit sur l’espace FTP.
{en_avant}
Affiche 1 si le produit est un produit vedette, sinon affiche 0.
{nb_commentaires}
{note_moyenne}
Note moyenne ; 0 à 10.
{num_jour_disponibilite}
Affiche le numéro du jour courant (01 - 31).
www.kiubi.com
67
{jour_semaine_disponibilite}
Affiche le jour de la semaine courant (lundi - dimanche).
{num_mois_disponibilite}
Affiche le numéro du mois courant (01 - 12).
{mois_disponibilite}
Affiche le mois courant (janvier - décembre).
{mois_abrev_disponibilite}
Affiche le mois courant abrégé (jan - déc). Il vaut mieux utiliser {mois_abrev_disponibilite} que {mois_
disponibilite|left|3} car la découpe se fait plus intelligemment pour les mois en quatre lettres.
{annee_disponibilite}
Affiche l'année courante (2007).
{heure_disponibilite}
Affiche l'heure courante (00-23).
{minute_disponibilite}
Affiche les minutes courantes (00-59).
{seconde_disponibilite}
Affiche les secondes courantes (00-59).
{timestamp_disponibilite}
Affiche le timestamp de la date de disponibilité.
{date_crea}
Date de création du produit au format anglo-saxon.
www.kiubi.com
68
{date_modif}
Date de modification du produit au format anglo-saxon.
{auteur}
Auteur du produit.
{intitule_produit}
Intitulé du produit.
{categorie_id}
Id de la catégorie principale du produit.
Intitulé de la catégorie principale du produit.
{categorie_optim}
Nom optimisé de la catégorie principale du produit.
{illustration}
Numéro de fichier dans la médiathèque de l’illustration principale du produit.
{lien_produit}
Lien vers la page de détail du produit.
{lien_categorie}
Lien vers la catégorie principale du produit.
{accroche}
Accroche du produit. Affiche le chapô du produit ou son contenu si son chapô est vide.
{chapo}
Chapô du produit.
www.kiubi.com
69
{description}
Description du produit.
{tags}
Affiche la liste des tags du produit. Le lien renvoi vers le moteur de recherche restreint au tag cliqué.
{prix_min}
Affiche le prix minimum toutes variantes confondues.
{prix_max}
Affiche le prix maximum toutes variantes confondues.
{prix_barre}
Affiche le prix normal si toutes les variantes ont un prix promo renseigné identique, sinon n’affiche rien.
{prix}
Comportement standard du prix.
o
Si une variante à un prix : affiche le prix
o
Si une variante à un prix promo : affiche le prix promo
o
Si plusieurs variantes ont un prix identique : affiche le prix
o
Si plusieurs variantes ont un prix promo identique : affiche le prix promo
o
Si plusieurs variantes ont un prix (promo) différent : affiche « prix minium (promo comprise) - prix
maximum (promo comprise) »
{prix_HT_min}
Affiche le prix minimum (promo comprise) HT toutes variantes confondues.
{prix_TTC_min}
Affiche le prix minimum (promo comprise) TTC toutes variantes confondues.
{prix_HT_max}
Affiche le prix maximum (promo comprise) HT toutes variantes confondues.
www.kiubi.com
70
{prix_TTC_max}
Affiche le prix maximum (promo comprise) TTC toutes variantes confondues.
Affiche les champs texte1 à texte15.
{nb_achats}
Quantité de produits vendus, toutes variantes confondues.
{nb_vus}
Nombre de consultations de la page de détail du produit.


Le contenu du bloc s'affiche si le produit a au moins une illustration


Le contenu du bloc s'affiche si le produit n’a pas d’illustration.


Le contenu du bloc s'affiche si le produit est un produit vedette.


Le contenu du bloc s'affiche si l’accroche du produit a une valeur.


Le contenu du bloc s'affiche si le chapô du produit a une valeur.


Le contenu du bloc s'affiche si la description du produit a une valeur.

www.kiubi.com

71
Le contenu du bloc s'affiche si le produit a un ou plusieurs tags.


Le contenu du bloc s'affiche si le produit a au moins une variante en promo.


Le contenu du bloc s'affiche si le produit a toutes ces variantes avec le même prix et le même prix promo.
Les contenus des blocs ne s'affichent que si les contenus des champs textes correspondants ne sont pas vides.


Le contenu du bloc s'affiche si le produit n’est pas encore disponible (date de disponibilité supérieure à la date
courante).


Le contenu du bloc s'affiche si toutes les variantes du produit sont en rupture de stock.


Le contenu du bloc s'affiche si une variante du produit est en rupture de stock.


Le contenu du bloc s'affiche pour chaque catégorie du catalogue. Utilisé pour définir une recherche sur les
catégories des produits.
{categorie_id}
Id de la catégorie.
{selected}
www.kiubi.com
72
Affiche selected="selected" pour la catégorie recherchée en cours dans le moteur de recherche avancée.
Utilisé pour les listes déroulantes.


Le contenu du bloc s'affiche pour chaque mois de l’année. Utilisé pour définir une recherche sur les dates de
disponibilité des produits.
{num_mois}
Affiche le numéro du mois (01 - 12).
Doit être contenu entre  et 
{mois}
Affiche le mois (janvier - décembre).
{selected}
Affiche selected="selected" pour le mois recherché en cours dans le moteur de recherche avancée. Utilisé
pour les listes déroulantes.


Le contenu du bloc s'affiche pour chaque mois de l’année. Utilisé pour définir une recherche sur les dates de
disponibilité des produits.
{num_mois}
Affiche le numéro du mois (01 - 12).
Doit être contenu entre  et 
{mois}
Affiche le mois (janvier - décembre).
{selected}
Affiche selected="selected" pour le mois recherché en cours dans le moteur de recherche avancée. Utilisé
pour les listes déroulantes.


Le contenu du bloc s'affiche s’il y a des tags de produit disponibles. Utilisé pour définir une recherche sur les tags
des produits.
www.kiubi.com
73


Le contenu du bloc s'affiche s’il n’y a pas de tag de produit disponible.
{tags}
Affiche la liste des tags de produit disponibles.
Doit être contenu entre  et 
{serial}
Identifiant du widget dans la page. Sert surtout pour du DHTML afin d'identifier de manière unique des éléments
HTML dans la page. Exemple : <div id="element{serial}">
5 Les widgets du service Gestion de compte
5.1 Identification rapide
Affiche le formulaire d’identification rapide.
Ce formulaire permet à un internaute de s’identifier sur le site, s’il est membre du site. L’identification se fait par
son email et un mot de passe. Après s’être identifié, il sera redirigé vers une page du site en fonction de la
configuration du widget.
Par défaut Kiubi propose deux modèles graphiques différents pour ce widget :
o
Le modèle par défaut, qui intègre le formulaire d’identification ainsi qu’un lien vers la page d’inscription.
o
Un modèle secondaire, identification_rapide_simple, qui intègre un lien vers la page d’inscription ainsi
qu’un lien vers la page d’accueil de l’espace Membre.
Dans les deux cas, une fois le membre identifié, seul son nom/prénom, un lien vers la page d’accueil de l’espace
Membre, ainsi qu’un lien pour se déconnecter sont affichés.
Il est donc possible avec ce widget d’afficher des informations si le membre est identifié et d’autres
informations s’il ne l’est pas.
5.1.1
o
Paramètres
o
5.1.2
o
Configuration
Rediriger vers : permet de rediriger le membre après identification :
o
Rester sur la même page : le membre reste sur la même page.
o
Page d’accueil du groupe Extranet : le membre est redirigé vers la page d’accueil du groupe
Extranet dont il fait parti.
o
Page d’accueil de l’espace Membre : le membre est redirigé vers la page d’accueil de l’espace
Membre.
www.kiubi.com
74
5.1.3
Répertoire
theme/fr/widgets/compte/identification_rapide
5.1.4
<div class="block">
<div class="post_identification_rapide">

<h2>{intitule}</h2>
<h3>Vous avez déjà un compte ?</h3>
<form action="{form_action}" method="post">
<label for="email_ident_rapide">Adresse email :</label>
<br />
<input type="text" name="email" id="email_ident_rapide" value="{email}"
class="textfield"/>
<br />
<label for="mdp_ident_rapide">Mot de passe :</label>
<br />
<input type="password" name="mdp" id="mdp_ident_rapide" value="" class="textfield"
style="margin:0;"/>
<br />
<a href="{baseLangue}/compte/motdepasse_perdu.html" title="Retrouvez votre mot de
passe">Mot de passe perdu ?</a><br />
<input type="submit" value="S'identifier" class="bouton"/>
</form>
</div>
<div class="content new">
<h3>Vous êtes nouveau sur le site ?</h3>
<a href="{baseLangue}/compte/ouverture.html" title="Créez un nouveau
compte">Cliquez ici pour vous créez un compte et accéder à nos
services.</a></div>


<div class="content"> Bonjour, <strong>{prenom} {nom}</strong><br />
<a href="{baseLangue}/compte/" title="Votre compte">Votre compte</a> | <a
href="{baseLangue}/compte/logout.html" title="Déconnexion">Déconnexion</a></div>

</div>
</div>
www.kiubi.com
75
5.1.5
Balises disponibles
{form_action}
Valeur de l'attribut action du formulaire.
 
Le contenu du bloc s'affiche si le membre est identifié.
 
Le contenu du bloc s'affiche si le membre n’est pas identifié.
{client_id}
Id du membre.
Doit être contenu entre  et 
{nom}
Nom du membre.
{prenom}
Prénom du membre.
{genre}
Genre du membre.
Affiche H si c’est un homme, F si c’est une femme.
{email}
Email du membre.
Avertissement : la balise globale {intitule} n’est active que dans le bloc 
 et pas dans le bloc  

<div class="erreur"><strong>L'identification est momentanément
interrompue.</strong></div>
www.kiubi.com
77

<div>
<label for="email_ident">Adresse email :</label>
<input type="text" name="email" id="email_ident" value="{email}" class="textfield"/>
</div>
<div>
<label for="mdp_ident">Mot de passe :</label>
<input type="password" name="mdp" id="mdp_ident" value="" class="textfield"/>
</div>
<p><a href="{baseLangue}/compte/motdepasse_perdu.html" title="Retrouvez votre mot de
passe">Mot de passe perdu ?</a></p>
<input type="submit" value="S'identifier" class="bouton" title="S'identifier"/>
</form>
</div>
</div>
5.2.5
Balises disponibles
{email}
Valeur de l'attribut value du champ input du formulaire correspondant à l’email.
{lien_inscription}
URL du formulaire d'inscription.
 
Le contenu du bloc s'affiche s’il y a une erreur lors de l’identification (email ou mot de passe invalide).
 
Le contenu du bloc s'affiche si l’identification est fermée.
5.3 Formulaire d'inscription
Affiche un formulaire d'inscription au site. Ce widget permet à un internaute de devenir membre du site pour
passer une commande, poster un commentaire, accéder à une page protégée, … Une confirmation d’inscription
est obligatoire soit via un email de demande de confirmation soit via un captcha (anti-spam) directement à
l’inscription, l’email étant plus sûr que le captcha mais plus intrusif. Ce choix ne se fait pas au niveau du widget
mais dans la rubrique « Membres / Configuration et préférences » de la console d’administration.
La totalité des informations nécessaires à l’inscription sont obligatoires et ne peuvent pas être
modifiées. La personnalisation de ce widget est donc limitée.
www.kiubi.com
78
Avertissement : ce widget ne peut être utilisé que sur la page type "Inscription" du service "Gestion de
comptes".
5.3.1
Contrairement aux autres widgets, le Formulaire d’inscription est composé de 2 fichiers :
o
index.html : correspond au formulaire d’inscription à proprement dit.
o
mail.html: correspond à l’email (au format texte) de demande de confirmation d’inscription.
5.3.2
Paramètres
o
o
5.3.3
Configuration
Aucune
5.3.4
Répertoire
theme/fr/widgets/compte/inscription
5.3.5
<div class="inscription">
<h2>{intitule}</h2>

<p style="margin: 0 0 10px 0;">En créant un compte sur
<strong>"{site_nom}"</strong> vous pourrez accéder à l'ensemble de nos
services.</p>
<p style="margin: 0 0 20px 0;">Si vous avez déjà un compte, veuillez vous
connecter à <a href="{baseLangue}/compte/login.html">la page de connexion</a>.</p>
<div class="erreur">
{erreur}<br />

</div>
<fieldset>
<legend>Vos informations personnelles</legend>
<div>
<label for="">Vous êtes :</label>
www.kiubi.com
79
<input type="radio" name="genre" id="insc_genreH" value="H" class="radio"
{checked_H}/>
un homme
<input type="radio" name="genre" id="insc_genreF" value="F" class="radio"
{checked_F}/>
une femme </div>
<div>
<label for="insc_nom">Votre nom :</label>
<input type="text" name="nom" id="insc_nom" value="{nom}" class="textfield"/>
</div>
<div>
<label for="insc_prenom">Votre prénom :</label>
<input type="text" name="prenom" id="insc_prenom" value="{prenom}" class="textfield"/>
</div>
<div>
<label for="insc_email">Votre adresse email :</label>
<input type="text" name="email" id="insc_email" value="{email}" class="textfield"/>
</div>
</div>
</fieldset>
<fieldset>
<legend>Votre mot de passe</legend>
<div>
<label for="insc_mdp">Mot de passe :</label>
<input type="password" name="mdp" id="insc_mdp" value="{mdp}" class="textfield"/>
<em>(6 à 32 caractères)</em></div>
<div>
<label for="insc_mdp_confirm">Confirmation :</label>
<input type="password" name="mdp_confirm" id="insc_mdp_confirm" value="{mdp_confirm}"
class="textfield"/>
</div>
</div>
</fieldset>
<fieldset>
<legend>Newsletter</legend>
<div>
<input name="newsletter" id="insc_newsletter" type="checkbox" value="1"
{check_newsletter}/>
<label for="insc_newsletter" class="label">S'abonner à la newsletter </label>
</div>
</div>
</fieldset>
www.kiubi.com
80
<fieldset>
<legend>Conditions d'utilisation</legend>
<textarea name="insc_legal" cols="" rows="" class="textarea legal"
id="insc_legal">{CGU}</textarea>
<div>
<input name="legal_ok" id="insc_legal_ok" type="checkbox" value="1" {check_legal} />
<label for="insc_legal_ok" class="label">J'accepte les conditions
d'utilisation</label>
</div>
</div>
</fieldset>

<fieldset>
<legend>Anti-spam</legend>
<div>
<label for="captcha{captcha_id}" class="label">{captcha_question}</label>
<input type="text" name="captcha[{captcha_id}]" id="captcha{captcha_id}"
class="textfield" value="" style="width: 100px" />
</div>
</div>
</fieldset>

<input type="submit" value="Continuer" class="bt_ok" title="Continuer"/>
<input type="button" value="Annuler" class="bt_annuler" title="Annuler"
onclick="document.location.href='{baseLangue}/compte/'"/>
<input type="hidden" name="act" value="inscription" />
<div style="clear:both"></div>
</form>

<p>Bonjour <strong>{prenom} {nom}</strong>,<br />
<br />
Vous allez recevoir d'ici quelques instants un email à l'adresse {email}. Si vous utilisez
un filtre anti-spam pour votre messagerie, merci de vérifier la configuration du
filtre.<br />
<br />
Ouvrez cet email et cliquez sur le lien qui vous permettra de continuer et de valider
votre inscription.<br />
A tout de suite ! </p>

<p>L'inscription au site {site_nom} est momentanément fermé.</p>

www.kiubi.com
81
</div>
5.3.6
 
Le contenu du bloc s'affiche avant la validation du formulaire d’inscription.
{nom}
Valeur du champ Nom.
{prenom}
Valeur du champ Prénom.
{mdp}
Valeur du champ Mot de passe.
{mdp_confirm}
Valeur du champ Confirmation du mot de passe.
{checked_F}
Renvoi checked="checked" si c'est une femme.
{checked_H}
Renvoi checked="checked" si c'est un homme.
{email}
Valeur du champ Email.
{check_legal}
Renvoi checked="checked" pour accepter les conditions d'utilisation.
{check_newsletter}
Renvoi checked="checked" pour s’abonner à la newsletter.
www.kiubi.com
82
{CGU}
Conditions d'utilisation.
 
Le contenu du bloc s'affiche si le captcha (dispositif anti-spam) est activé.
{captcha_id}
Id du captcha.
{captcha_question}
Question du captcha.
 
Le contenu du bloc s'affiche s’il y a des erreurs à l’inscription.
{erreur}
Affiche le message d’erreur correspond à l’erreur.
 
Le contenu du bloc s'affiche après la validation du formulaire d’inscription.
 
Le contenu du bloc s'affiche si l’inscription est fermée.
5.3.7
Exemple du code source pour le fichier « mail.html »
Félicitations,
Vous êtes inscrit sur {site_nom} !
Veuillez copier et coller l'adresse suivante dans votre navigateur :
{urlInscription}
www.kiubi.com
83
Nous vous remercions d'utiliser {site_nom}.
Cordialement,
L'équipe de {site_nom}
5.3.8
Balises disponibles pour le fichier « mail.html »
{urlInscription}
URL de confirmation d’inscription.
5.4 Tableau de bord
Affiche le tableau de bord de la gestion de compte des membres. Ce widget correspond à l’accueil de l’espace
Membre et permet aux membres du site de :
o
modifier leurs informations personnelles,
o
modifier leur mot de passe,
o
modifier leur identité web,
o
modifier leur avatar,
o
modifier leur abonnement (seulement à la Newsletter pour l’instant),
o
consulter leur(s) commande(s).
Pour accéder à son tableau de bord, il est obligatoire qu’un membre soit identifié sur le site (sauf pour
accéder à la page « Mot de passe perdu ») !
Avertissement : ce widget ne peut être utilisé que sur la page type "Compte" du service "Gestion de
comptes".
5.4.1
Contrairement aux autres widgets, le Tableau de bord est composé de 8 fichiers :
o
index.html : correspond au tableau de bord à proprement dit.
o
abonnements.html : correspond à l’édition des abonnements du membre.
o
avatar.html : correspond à l’édition de l’avatar du membre.
o
id_web.html : correspond à l’édition de l’identité web du membre.
o
infos_perso.html : correspond à l’édition des informations personnelles du membre.
o
motdepasse.html : correspond à l’édition du mot de passe du membre.
o
motdepasse_perdu..html : correspond à la page pour retourner le mot de passe perdu du membre.
o
mail_motdepasse_perdu.html : correspond à l’email (au format texte) contenant le mot de passe perdu
envoyé au membre.
5.4.2
o
Paramètres
o
www.kiubi.com
84
5.4.3
Configuration
Aucune
5.4.4
Répertoire
theme/fr/widgets/compte/tableau_bord
5.4.5
<div class="gestion_compte">
<h2>{intitule}</h2>
<div class="block">
<h2>Informations personnelles</h2>
<ul>
<li><a href="infos_perso.html" title="Mes informations personnelles">Mes informations
personnelles</a></li>
<li><a href="motdepasse.html" title="Modifier mon mot de passe">Modifier mon mot de
passe</a></li>
</ul>
</div>
</div>
<div class="block">
<h2>Identité web</h2>
<ul>
<li><a href="id_web.html" title="Mon identité web">Mon identité
web</a></li>
<li><a href="avatar.html" title="Mon avatar">Mon avatar</a></li>
</ul>
</div>
</div>
<div class="block">
<h2>Paramètres</h2>
<ul>

<li><a href="abonnements.html" title="Abonnements">Abonnements</a></li>
</ul>
</div>
</div>

www.kiubi.com
85
<div class="block">
<h2>Commandes effectuées </h2>

<table border="0" cellspacing="0" cellpadding="0" class="table_commande">
<tr>
<th scope="col" style="width: 19%">Numéro</th>
<th scope="col" style="width: 19%">Date</th>
<th scope="col" style="width: 19%">État</th>
<th scope="col" style="width: 19%">Statut</th>
<th scope="col" style="text-align: right; width: 9%">Total</th>
<th scope="col" style="width: 15%"> </th>
</tr>

<tr>
<td class="color{alterne}">{numero_facture}</td>
<td
class="color{alterne}">{num_jour_creation}/{num_mois_creation}/{annee_creation}</td>
<td class="color{alterne}">{etat}</td>
<td class="color{alterne}">{paiement}</td>
<td class="color{alterne}" style="text-align: right;">{total_TTC}</td>
<td class="color{alterne}" style="text-align: right;"><a href="{lien_commande}"
title="Télécharger la commande">Détail</a></td>
</tr>

</table>


Aucune commande

</div>
</div>

</div>
5.4.6
 
Le contenu du bloc s'affiche si les fonctionnalités e-commerce sont activées.
 
Le contenu du bloc s'affiche si le membre a déjà passé des commandes.
Doit être contenu entre  et 
www.kiubi.com
86
 
Le contenu du bloc s'affiche si le membre n’a déjà pas passé de commandes.
Doit être contenu entre  et 
 
Le contenu du bloc pour chaque commande passée par le membre.
Doit être contenu entre  et 
{etat}
Etat de la commande.
Affiche en fonction de l’état : A traité, En cours, Traitée, Expédiée, Annulée
Doit être contenu entre  et 
{numero_facture}
Numéro de la commande
{paiement}
Statut de la commande.
Affiche en fonction de l’état : Payée ou A payer
{total_TTC}
Total TTC de la commande
{total_HT}
Total HT de la commande
{lien_commande}
Lien vers le fichier PDF du détail de la commande
{num_jour_creation}
Affiche le numéro du jour de création de la commande (01 - 31).
{jour_semaine_creation}
Affiche le jour de la semaine de création de la commande (lundi - dimanche).
{num_mois_creation}
Affiche le numéro du mois de création de la commande (01 - 12).
www.kiubi.com
87
{mois_creation}
Affiche le mois de création de la commande (janvier - décembre).
{mois_abrev_creation}
Affiche le mois de création de la commande abrégé (jan - déc). Il vaut mieux utiliser {mois_abrev_creation} que
{mois_creation|left|3} car la découpe se fait plus intelligemment pour les mois en quatre lettres.
{annee_creation}
Affiche l'année de création de la commande (2007).
{heure_creation}
Affiche l'heure de création de la commande (00-23).
{minute_creation}
Affiche les minutes de création de la commande (00-59).
{seconde_creation}
Affiche les secondes de création de la commande (00-59).
5.4.7
Exemple du code source pour le fichier « abonnements.html »
<h2>{intitule}</h2>
<fieldset>
<legend>Mes abonnements</legend>
<div> Inscrit à la Newsletter :
<input type="radio" name="newsletter" id="newsletter_oui" value="1"
{check_newsletter_oui} />
<label for="newsletter_oui" class="label">Oui</label>
<input type="radio" name="newsletter" id="newsletter_non" value="0"
{check_newsletter_non} />
<label for="newsletter_non" class="label">Non</label>
</div>
</div>
</fieldset>
<input type="submit" value="Valider" class="bt_ok" title="Valider"/>
www.kiubi.com
88
<input type="hidden" name="act" value="update" />
</form>
</div>
5.4.8
Balises disponibles pour le fichier « abonnements.html »
{check_newsletter_oui}
Renvoi checked="checked" si l’abonnement à la newsletter est à Oui.
{check_newsletter_non}
Renvoi checked="checked" si l’abonnement à la newsletter est à Non.
5.4.9
Exemple du code source pour le fichier « avatar.html »
<h2>{intitule}</h2>
{erreur} <br />

</div>
<form method="post" action="" enctype="multipart/form-data">
<fieldset>
<legend>Mon avatar</legend>
<div class="content"> <img src="{avatar}" alt="Avatar" class="gestion_compte_avatar" />
<div>Nous vous conseillons une image (gif, jpeg, png) <strong> d'au moins </strong> 120
pixels de large et 120 pixels de hauteur. Elle sera redimensionnée au besoin.</div>
<div>
<input type="file" name="file_avatar" id="file_avatar" title="Uploader une image de
votre ordinateur" />
</div>
<div>Vous pouvez aussi choisir d'utiliser une image déjà en ligne à
l'adresse web ci-dessous :</div>
<div>
<input type="text" name="url_avatar" id="url_avatar" value="" title="Copier une image
sur Internet" class="textfield" style="width: 250px;"/>
<em>(http://www.monsiteweb.com/avatar.gif)</em></div>
<div style="clear:both"></div>
</div>
</fieldset>
www.kiubi.com
89
</form>
</div>
5.4.10 Balises disponibles pour le fichier « avatar.html »
{avatar}
{avatar_miniature}
Le contenu du bloc s'affiche s’il y a des erreurs à la validation du formulaire.
{erreur}
5.4.11 Exemple du code source pour le fichier « id_web.html »
<h2>{intitule}</h2>
<fieldset>
<legend>Mon identité web</legend>
<div>
<label for="pseudo">Mon pseudo :</label>
<input type="text" name="pseudo" id="pseudo" value="{pseudo}" class="textfield"/>
</div>
<div>
<label for="web">Mon site web :</label>
<input type="text" name="web" id="web" value="{web}" class="textfield"/>
www.kiubi.com
90
<em>(http://www.monsiteweb.com/)</em></div>
</div>
</fieldset>
</form>
</div>
5.4.12 Balises disponibles pour le fichier « id_web.html »
{pseudo}
Valeur du champ Pseudo.
{web}
Valeur du champ Site web.
5.4.13 Exemple du code source pour le fichier « infos_perso.html »
<h2>{intitule}</h2>
{erreur} <br />

</div>
<fieldset>
<legend>Mes informations personnelles</legend>
<div>
<label>Votre êtes :</label>
<input type="radio" name="genre" id="insc_genreH" value="H" class="radio"
{checked_H}/>
<label for="insc_genreH" class="label">un homme</label>
<input type="radio" name="genre" id="insc_genreF" value="F" class="radio"
{checked_F}/>
<label for="insc_genreF" class="label">une femme</label>
</div>
www.kiubi.com
91
<div>
<label for="insc_nom">Votre nom :</label>
<input type="text" name="nom" id="insc_nom" value="{nom}" class="textfield"/>
</div>
<div>
<label for="insc_prenom">Votre prénom :</label>
<input type="text" name="prenom" id="insc_prenom" value="{prenom}" class="textfield"/>
</div>
<div>
<label for="insc_email">Votre adresse email :</label>
<input type="text" name="email" id="insc_email" value="{email}" class="textfield"/>
</div>
</div>
</fieldset>
</form>
</div>
5.4.14 Balises disponibles pour le fichier « infos_perso.html »
{client_id}
Identifiant du membre
{nom}
Valeur du champ Nom.
{prenom}
Valeur du champ Prénom.
{genre}
Genre du membre. Affiche H si c’est un homme, F si c’est une femme
{email}
{checked_F}
Renvoi checked="checked" si c'est une femme.
www.kiubi.com
92
{checked_H}
Renvoi checked="checked" si c'est un homme.
{erreur}
5.4.15 Exemple du code source pour le fichier « motdepasse.html »
<h2>{intitule}</h2>
{erreur} <br />

</div>
<fieldset>
<legend>Modifier mon
mot de passe</legend>
<div>
<label for="insc_mdp">Mot de passe actuel :</label>
<input type="password" name="actu" id="insc_mdp" value="" class="textfield"/>
</div>
<div>
<label for="insc_mdp2">Nouveau mot de passe :</label>
<input type="password" name="mdp" id="insc_mdp2" value="" class="textfield"/>
<em>(6 à 32 caractères)</em></div>
<div>
<label for="insc_mdp_confirm">Confirmation :</label>
<input type="password" name="mdp_confirm" id="insc_mdp_confirm" value=""
class="textfield"/>
www.kiubi.com
93
</div>
</div>
</fieldset>
</form>
</div>
5.4.16 Balises disponibles pour le fichier « motdepasse.html »
{erreur}
Affiche le message d’erreur correspondant à l’erreur.
5.4.17 Exemple du code source pour le fichier « motdepasse_perdu.html »

{erreur} <br />

</div>
<fieldset>
<legend>Mot de passe perdu ?</legend>
<div>
<label for="email">Votre e-mail :</label>
<input type="text" name="email" id="email" value="{email}" class="textfield"/>
</div>
</div>
www.kiubi.com
94
</fieldset>
onclick="document.location.href='{baseLangue}/'"/>
</form>

<p>Vous allez recevoir dans quelques instants un email contenant vos identifiants de
connection à l'adresse indiquée.</p>
</div>
5.4.18 Balises disponibles pour le fichier « motdepasse_perdu.html »
 
Le contenu du bloc s'affiche avant la validation du formulaire.
{email}
 
Le contenu du bloc s'affiche après la validation du formulaire.
{erreur}
Affiche le message d’erreur correspondant à l’erreur.
5.4.19 Exemple du code source pour le fichier « mail_motdepasse_perdu.html »
Les informations nécessaires pour vous identifier sur le site de {site_nom} :
- email : {email}
- mot de passe : {motdepasse}
www.kiubi.com
95
5.4.20 Balises disponibles pour le fichier « mail_motdepasse_perdu.html »
{email}
Email du membre.
{motdepasse}
Mot de passe du membre.
www.kiubi.com
96

Guide du Webdesigner 2 partie Liste des Widgets

Transcription

Documents pareils

Banque de France

Le Billet du Six-Huit

"j`étudie le français depuis 5 ans /depuis le début de septembre." J

Initiation aux 1ères techniques de fabrication de meubles en carton

PROCEDURE DE CONFIGURATION DE LINUX POUR SE

tarifs location de la salle communale

ANA-All Nippon Airways offre 2 billets d`avion aller

Festival REGGAE SUN SKA - Cezam Grand Sud

Service SAPHIR d`Air France