Généralités
Personnaliser un thème
Kiubi permet de personnaliser à 100% un site, grâce à son accès aux templates de mise en page. Vous pourrez donc personnaliser le design d'un site. Aucune limitation graphique particulière n'est imposée !
Kiubi vous permettent d'intégrer une ligne graphique réalisée sur mesure pour un site Internet. Cependant, comme tout système destiné à créer des sites professionnels et respectueux des standards du Web, concevoir un thème graphique sur mesure requiert la maîtrise du HTM, des CSS et du Javascript, un thème graphique personnalisé est donc réservé aux utilisateurs expérimentés !
Activer le thème graphique personnalisé
Pour créer un thème graphique personnalisé, rendez-vous dans la rubrique Thèmes graphiques de la Console d'administration. Par défaut, un des thèmes graphiques fournis en standard par Kiubi (appelé thème graphique par défaut) est utilisé. Il suffit de cliquer sur le bouton Passer en thème personnalisé et de compléter et valider le formulaire. Dès cet instant, le thème graphique personnalisé a été créé et initialisé à partir du thème par défaut choisi.
Vous pouvez vous connecter à votre espace FTP avec les informations fournis dans la rubrique Thèmes graphiques pour accéder à l'intégralité des fichiers du thème graphique. Une fois connecté à votre espace FTP, deux répertoires sont disponibles :
- le répertoire
mediatheque
: nécessaire à la Médiathèque pour y publier des fichiers de plus de 7Mo. - le répertoire
theme
: contenant les fichiers de votre thème graphique personnalisé
Déclarer un thème graphique
Afin de déclarer un thème graphique personnalisé, il est indispensable de bien configurer les fichiers suivants :
illustration.jpg
: Image d'illustration du thème graphique personnalisé destinée à être affichée dans la gestion des thèmes afin d'identifier plus facilement le thème en question. Il est recommandé d'utiliser une image de 300px par 225px.theme.xml
: Ce fichier contient des informations descriptives du thème graphique. Il est indispensable pour déclarer le thème graphique personnalisé.
Le fichier theme.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<theme img="illustration.jpg" intitule="Thème d'exemple" javascripts="none">
<auteur nom="Exemple" contact="contact@example.org" site="www.example.org" />
</theme>
Ce fichier contient une seule balise principale <theme>
qui possède 5 attributs :
img
: nom du fichier image qui est utilisé dans la console d'administration pour représenter ce modèle (correspond au fichier image nommé ci-dessus),intitule
: intitule du thème qui est affiché dans la console d'administration,style
: le style du thème (moderne, classique, etc...),version
: la version du thème qui est affiché dans la console d'administration,date
: la date de la dernière mise à jour du thème.javascripts
: contrôle l'inclusion par défaut de bibliothèques javascript dans les templates. Indiquerkiubi
pour inclure les scripts utilisés par les thèmes par défaut ounone
pour désactiver cette fonctionnalité.
A l'intérieur, nous avons une seule balise <auteur>
qui permet d'ajouter des
informations sur l'auteur du thème. Cette balise contient les attributs suivants :
nom
: le nom de l'auteur qui est affiché dans la console d'administration,contact
: l'email de l'auteur,site
: l'adresse du site internet de l'auteur.
L'arborescence des fichiers
L'arborescence d'un thème graphique personnalisé contenu dans le répertoire
theme
de votre espace FTP est organisée de la sorte :
fr/ Répertoire de langue ├── assets/ Répertoire des ressources │ ├── css/ Chaque répertoire correspond à un type, de ressources │ ├── fonts/ hors contenu de la médiathèque │ ├── img/ │ └── js/ ├── billets/ Répertoire des types de billets │ ├── image/ Chaque répertoire correspond à un type de billet et │ ├── jumbotron/ contient ses propres fichiers │ └── simple/ │ ├── config.xml │ ├── index.html │ └── styles.css ├── billets_blog/ Répertoire des types de billets du blog │ └── simple/ │ └── config.xml ├── compostants/ Répertoire des types de composants │ └── galerie/ Chaque répertoire correspond à un type de │ ├── config.xml composant │ └── index.html ├── includes/ Répertoire des fichiers includes ├── layouts/ Répertoire des layouts │ ├── 4_4_4.html │ ├── 4_8.html │ ├── 6_6.html │ └── 8_4.html ├── modules/ Répertoire des modules │ ├── 404/ Chaque répertoire correspond à un module et contient │ ├── chemin/ ses propres fichiers │ └── fermeture/ ├── produits/ Répertoire des types de produits │ └── simple/ Chaque répertoire (ici simple) correspond à un │ ├── config.xml type de produit et contient ses propres fichiers │ └── index.html ├── symboles/ Répertoire des modèles de symboles │ └── defaut/ Chaque répertoire correspondant à un template │ ├── desc.xml de symbole. │ ├── index.html │ └── structure.xhtml ├── templates/ Répertoire des templates principaux │ ├── barre_laterale/ Chaque répertoire correspondant à un template principal │ ├── sans_barre_lateral/ du thème et contient ses propres fichiers │ │ ├── desc.xml │ │ ├── index.html │ │ ├── structure.xhtml │ │ └── styles.css │ ├── print.css │ └── styles.css └── widgets/ Répertoire de tous les widgets ├── blog/ Répertoire des widgets du service Blog │ ├── archives/ Chaque widget à son propre répertoire principal et │ ├── categories contient ses propres fichiers. │ ├── derniers_billets_postes/ │ ├── detail_billet/ │ ├── les_plus_commentes/ │ ├── liens/ │ ├── liste_billets/ │ ├── listes_commentaires/ │ └── poster_commentaires/ ├── catalogue/ Répertoire des widgets du service Catalogue │ ├── categories/ Chaque widget à son propre répertoire principal et │ ├── liste_categories/ contient ses propres fichiers. │ ├── listes_commentaires/ │ ├── listes_produits/ │ ├── poster_commentaire/ │ ├── produits_associes/ │ ├── produits_egalement_achetes/ │ ├── produits_plus/ │ ├── produits_vedettes/ │ └── tags/ ├── commandes/ Répertoire des widgets du service Commandes │ ├── livraison/ Chaque widget à son propre répertoire principal et │ ├── paiement/ contient ses propres fichiers. │ ├── panier/ │ └── panier_detail/ ├── communication/ Répertoire des widgets du service Communication │ ├── contact/ Chaque widget à son propre répertoire principal et │ ├── formulaires/ contient ses propres fichiers. │ ├── newsletter/ │ └── syndication_blog/ ├── compte/ Répertoire des widgets du service Compte │ ├── identification/ Chaque widget à son propre répertoire principal et │ ├── identification_rapide/ contient ses propres fichiers. │ ├── inscription/ │ └── tableau_bord/ ├── recherche/ Répertoire des widgets du service Recherche │ └── simple/ Chaque widget à son propre répertoire principal et │ contient ses propres fichiers. └── site_web/ Répertoire des widgets du service Site Web ├── bloc_extrait/ Chaque widget à son propre répertoire principal et │ ├── avec_lien_vers_page/ contient ses propres fichiers. │ ├── sans_image/ │ ├── slideshow/ Chaque widget peut avoir plusieurs templates secondaires │ ├── index.html différents (ici : avec_lien_vers_page, sans_image et │ └── styles.css slideshow) contenant leurs propres fichiers correspondant ├── contenu_page_libre/ chacun à un sous-répertoire du répertoire principal ├── menu_h/ du widget └── menu_v/ illustration.jpg Fichier de description et de déclaration du thème theme.xml Ces fichiers définissent les informations affichées dans la gestion des thèmes de la console d'administration.
Templates principaux
Les templates principaux constituent les squelettes du site dans lesquels vont s'intégrer les Widgets. Chaque template contient une structure HTML complète qui lui est propre, des feuilles de styles, des codes javascripts, etc. et également la position de chaque zone où vont se placer les Widgets.
Chaque template peut être utilisé pour configurer une page type dans la rubrique Mises en page de la console d'administration. Il est donc possible d'utiliser plusieurs templates différents pour personnaliser un site Internet et cela page par page, si nécessaire.
Si vous utilisez un thème graphique personnalisé, vous pouvez modifier et créer de nouveaux templates.
Paramètres d'un template
Une fois connecté à votre espace FTP, tous les templates sont
regroupés dans le répertoire theme/fr/templates/
. Chacun de ces sous-
répertoires est un template. Un template contient les fichiers
suivants :
desc.xml
: permet de décrire le template et déclarer les zones. Ce fichier est obligatoireindex.html
: contient le code HTML du template. Ce fichier est obligatoirestructure.xhtml
: permet de définir la structure du template utilisée dans l'édition d'une page type. Ce fichier n'a aucun lien avec le rendu du site internet et n'est utilisé que pour la console d'administration. Ce fichier est obligatoire
D'autres fichier facultatifs peuvent être présents dans le répertoire theme/fr/templates/
,
comme par exemples :
apple-touch-icon.png
favicon.ico
favicon.png
Le fichier desc.xml
Ce fichier contient des informations descriptives du template. Il permet principalement de déclarer les zones du template dans lesquelles pourront être insérés des Widgets.
Exemple de code source
<?xml version="1.0" encoding="iso-8859-1"?>
<modele intitule="Modèle par défaut">
<zones defaut="contenu">
<zone id="entete" colmax="1" intitule="Entete" defaut="1"/>
<zone id="menu" colmax="1" intitule="Menu" defaut="1"/>
<zone id="sidebar" colmax="1" intitule="Barre latérale" defaut="1" type="contenu"/>
<zone id="contenu" colmax="3" intitule="Contenu" defaut="1" type="contenu"/>
<zone id="piedepage" colmax="3" intitule="Pied de page" defaut="1"/>
</zones>
</modele>
Description
Ce fichier contient une seule balise principale <modele>
qui possède 2 attributs :
intitule
: intitule du template qui est utilisé dans la console d'administrationimg
(déprécié) : nom du fichier image qui était utilisé dans la console d'administration pour représenter ce template.
A l'intérieur, nous avons une seule balise <zones>
qui contient tout un ensemble
de balises <zone>
. L'attribut defaut
permet de désigner la zone dans laquelle
seroont placés par défaut tous les contenus ajoutés dans la page. La zone désignée est
alors automatiquement considérée comme étant de type "contenu".
La balise <zone>
sert à déclarer une zone où vont pouvoir
être inséré les Widgets. L'id des zones devra être repris dans les fichiers
structure.xhtml
et index.html
.
Elles contiennent les attributs suivants :
id
: code alphanumérique qui sera réutilisé pour identifié la zone dans les fichiersindex.html
etstructure.xhtml
.colmax
: nombre maximum de colonnes des blocs de présentation qui peuvent être insérés dans cette zone (de 1 à 3). Les colonnes correspondant sont gérées via les fichiers du répertoiretheme/fr/layouts/
intitule
: intitulé de la zone qui sera repris dans la console d'administration dans l'édition d'une page type.defaut
: nombre de colonnes des blocs de présentation insérées par défaut dans la zone.type
: si la valeur est "contenu", la zone pourra accepter des billets, symboles et composants dans la console d'administration.
Le fichier structure.xhml
Ce fichier est une représentation schématique de la disposition des zones dans
le template (les zones déclarées dans le fichier desc.xml
).
Il est utilisé pour générer la page d'édition d'une page type dans la console
d'administration. Il n'est en aucun cas utilisé pour effectuer un rendu du site
Internet.
Exemple de code source
<table>
<tr>
<td colspan="2">{entete}</td>
</tr>
<tr>
<td colspan="2">{menu}</td>
</tr>
<tr>
<td width="30%">{sidebar}</td>
<td>{contenu}</td>
</tr>
<tr>
<td colspan="2">{piedepage}</td>
</tr>
</table>
Description
Les zones sont appelées directement en mettant leurs ID entre accolade.
Il est obligatoire d'utiliser un code HTML simple, sans script ni style. Seules les balises TABLE, TD et TR sont autorisées.
Le fichier index.html
Alors que le fichier structure.xhtml
est une vue abstraite de la page
utilisée seulement dans la console d'administration, le fichier index.html
contient le code HTML concret du template qui sera affiché dans le
site Internet.
Exemple de code source
<!-- BEGIN:main -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>{title}</title>
<meta name="description" content="{metaDescription}" />
<meta name="keywords" content="{metaKeywords}" />
{metaRobots}
{metaCanonical}
<!-- Charges les scripts des Options avancées du Back-office -->
{js_head}
</head>
<body>
<!-- BEGIN:logo_site -->
<h1>
<a href="{racine}/" title="{accroche_site} - Retour à l'accueil">
<img src="{racine}/media/{logo_site}" alt="{accroche_site|htmlentities}" />
</a>
</h1>
<!-- END:logo_site -->
<!-- BEGIN:accroche_site-->
<h2><a href="{racine}/" title="{accroche_site|htmlentities}">{accroche_site}</a></h2>
<!-- END:accroche_site-->
<!-- BEGIN:desc_site-->
<h3>{desc_site}</h3>
<!-- END:desc_site-->
<div>{ZONE.menu}</div>
<div>{ZONE.contenu}</div>
<div>{ZONE.piedepage}</div>
<!-- Charges les scripts des Options avancées du Back-office -->
{js_body}
</body>
</html>
<!-- END:main -->
Description
Les balises {ZONE.*}
servent à indiquer où insérer les Widgets. Les noms des
zones sont déclarés dans le fichier desc.xml
.
Balises disponibles
metaCanonical | Insère la balise |
metaRobots | Insère la balise de désindexation automatique des pages sans valeur sémantique comme les résultats de recherche ou les paginations |
title | Insère le titre de la page |
metaKeywords | Insère les mots clés de la page |
metaDescription | Insère la description de la page |
modele | Affiche le nom du répertoire du modèle de mise en page utilisé. |
service | Affiche le code du service en cours. Cette balise sert, par exemple, au moteur de recherche pour qu'il fasse des recherches dans le service en cours. Affiche cms si le service en cours est le Site web, Contact et Gestion de compte. Affiche blog si le service en cours est le Blog. Affiche catalogue si le service en cours est le Catalogue et E-commerce (Commandes). |
js_head | Insère du javascript destiné à être exécuté dans la balise |
js_body | Insère du javascript destiné à être exécuté juste avant la fermeture de la balise |
Stylesheet | Insère les feuilles de styles des Widgets et des modules, si besoin. |
Javascripts | Insère les javascripts nécessaires au bon fonctionnement de Kiubi avec d'anciens thèmes par défaut de Kiubi |
ZONE.xxx | Insère les Widgets de la zone "xxx" telle qu'ils ont été configurés dans l'édition d'une page type. Les noms (identifiants) des zones sont définis dans le fichier "structure.xhtml" propre au modèle de mise en page. |
<!-- BEGIN:accroche_site--> <!-- END:accroche_site-->
Le bloc s'affiche si l'option "Afficher le nom" est activée dans le Bloc-marque des Préférences du site.
<!-- BEGIN:desc_site--> <!-- END:desc_site-->
Le bloc s'affiche si l'option "Afficher la signature" est activée dans le Bloc-marque des Préférences du site.
<!-- BEGIN:logo_site--> <!-- END:logo_site-->
Le bloc s'affiche si l'option "Afficher le logo" est activée dans le Bloc-marque des Préférences du site.
Ajouter un nouveau template
Pour ajouter un nouveau template, il suffit de créer un nouveau
sous-répertoire au répertoire theme/fr/templates/
et d'y copier tous les
fichiers correspondant à votre nouveau template. Le nouveau template sera alors
automatiquement proposé dans l'édition d'une page type de la
console d'administration.
Widgets
Les Widgets de Kiubi forment la base des différents modules fonctionnels qui composent le site Internet. Dans la gestion de la Mise en page, chaque Widget peut être glissé/déposé dans une zone d'une page type et configuré selon un certain nombre de paramètres qui lui sont propres. Afficher un menu, une liste de produits ou même un formulaire de contact, tout ceci est possible grâce aux Widgets.
Le guide du Webdesigner décrit et explique en détail les différents paramètres et configurations possibles pour tous les Widgets. De plus, vous y trouverez toutes les balises disponibles dans les templates des Widgets et dans quelles conditions les utiliser. La compréhension de ces différentes informations (template + balise + paramètre + configuration) vous permettra de personnaliser l'intégralité des Widgets de Kiubi.
Listes des Widgets
Les widgets sont classés selon leur service et leur type :
Site Web
- Contenu d'une page Nouveau
- Symbole Nouveau
- Bloc d'extraits
- Menu horizontal
- Menu vertical
- Liste des billets (Anciennement Contenu d'une page libre) Déprécié
Blog
- Derniers billets postés
- Détail d'un billet
- Billets les plus commentés
- Liens
- Liste des billets
- Liste des commentaires
- Poster un commentaire
- Archives
- Catégories
- Derniers commentaires postés
Catalogue
- Catégories
- Tags
- Liste des catégories
- Liste des produits
- Détail d'un produit
- Poster un commentaire
- Liste des commentaires
- Produits vedettes
- Produits les plus
- Produits également achetés
- Produits associés
Commandes
Gestion de compte
Modules (Communication)
- Dismoi? (générateur de formulaires)
- Inscription à la newsletter
- Syndication du blog
- Formulaire de contact
Recherche
Boite à outils
Ces Widgets permettent de faire de l'inclusion de code et n'ont donc ni de configuration, ni de modèle graphique qui leurs sont propres.
- Fragment de code : le code (HTML, CSS, JS, etc.) est éditable dans les paramètres du widget et directement ajouté dans une mise en page, à la position du widget
- Fragment de template : le widget liste les fichiers includes disponibles dans le répertoire
theme/fr/includes/
et sont directement ajoutés dans une mise en page, à la position du widget
Personnalisé un Widget
Chaque Widget de Kiubi peut être personnalisé de deux manières différentes :
- Dans tous les cas, en modifiant ses paramètres et sa configuration, directement dans la console d'administration lors de l'édition du Widget dans la gestion de la mise en page
- Dans le cas de l'utilisation d'un thème graphique personnalisé, en modifiant le template qui le compose.
Si vous utilisez un thème graphique personnalisé, vous pouvez éditer et modifier le template, c'est-à-dire les fichiers HTML qui composent et définissent l'apparence d'un Widget. Le paramétrage et la configuration d'un Widget seront cependant toujours à faire lors de l'édition du Widget dans la gestion de la mise en page de la console d'administration de Kiubi.
Dans votre espace FTP, tous les Widgets sont regroupés dans le répertoire theme/fr/widgets/
et classés dans leur propre répertoire, selon leur service (un répertoire par Widget classé dans un répertoire par service).
Chaque répertoire principal d'un Widget contient :
- un fichier
index.html
structuré de manière différente en fonction du Widget. Ce fichierindex.html
est obligatoire. - un fichier
styles.css
peut être ajouté au Widget afin de contrôler sa mise en forme. Ce fichier est automatiquement chargé dans la balise<head>
si le widget est présent dans la page. Ce fichierstyles.css
n'est pas obligatoire.
Ajouter des templates supplémentaires à un Widget
Un même Widget peut avoir plusieurs templates, c'est-à-dire qu'il peut avoir plusieurs apparences différentes.
Pour ajouter un templates à un Widget, il suffit de créer un sous- répertoire au répertoire principal du Widget et d'y copier/coller le fichier index.html
(et styles.css
) correspondant au Widget.
Si les deux fichiers sont présents, ce nouveau modèle graphique utilisera les deux fichiers.
Si un seul des deux fichiers est présent, ce nouveau modèle graphique utilisera le fichier présent et complètera par celui présent à la racine du répertoire principal du Widget.
Il suffit de choisir ensuite le modèle graphique correspondant lors de l'édition d'un Widget dans la gestion de la mise en page de la console d'administration de Kiubi.
Il est donc possible, avec le même Widget, d'avoir non seulement plusieurs paramétrages possibles mais en plus, chaque Widget peut avoir une infinité d'apparences différentes. En fonction de son template et de ses paramètres, un même Widget peut répondre à des usages complètement différents et donc s'adapter parfaitement à vos besoins.
Blocs
Les blocs sont des portions de HTML encadrés par des codes spécifiques qui vont pouvoir être affichés ou masqués selon le besoin, et même dupliqués. Ils se présentent toujours de cette façon :
<!-- BEGIN:bloc --> <!-- END:bloc -->
Les blocs sont pour la plupart du temps imbriqués dans d'autres blocs. La
documentation ci-après précise toujours dans quel bloc placer tel autre bloc (ou
telle balise).
Si rien n'est précisé c'est qu'il faut au moins placer le bloc
dans le bloc <!-- BEGIN:main -->
<!-- END:main -->
.
Voici un exemple de blocs correctement imbriqués :
<!-- BEGIN:main -->
<!-- BEGIN:bloc -->
<!-- BEGIN:bloc2 -->
<!-- END:bloc2 -->
<!-- BEGIN:bloc3 -->
<!-- END:bloc3 -->
<!-- END:bloc -->
<!-- END:main -->
L'exemple suivant est faux et amènera à des comportements imprévisibles. Les blocs bloc2
et bloc3
sont mélangés
l'un dans l'autre, ce qui est incorrect :
<!-- BEGIN:main -->
<!-- BEGIN:bloc2 -->
<!-- BEGIN:bloc3 -->
<!-- END:bloc2 -->
<!-- END:bloc3 --> // cette fermeture de bloc ne devrait pas se trouver ici !!!
<!-- END:main -->
Certaines balises ne sont accessibles qu'à l'intérieur de blocs spécifiques. Si c'est le cas, cette documentation le précisera.
Avertissements :
- un même bloc ne peut pas être répété deux fois dans le même fichier
- un bloc qui est utilisé dans un widget, n'est pas forcément utilisable dans un autre ou dans tous les widgets, à chaque widget ses blocs
- tous les modèles graphiques doivent commencer par
<!-- BEGIN:main -->
et se terminer par<!--END:main -->
oublier ce bloc est une erreur très courante, pensez à vérifier ce bloc si rien ne s'affiche dans votre site - tout ce qui est en dehors du bloc
<!-- BEGIN:main -->
<!-- END:main -->
est ignoré par Kiubi
Balises
Les balises de Kiubi sont de petits codes que vous pouvez inclure un peu partout
et qui servent à afficher toutes les informations que vous avez saisies à l'aide
de votre console d'administration dans les pages de votre site. On reconnaît
facilement ces balises car elles sont composées d'un mot entouré d'accolades : {titre}
.
Kiubi utilise des ensembles de fichiers HTML (des templates) pour mettre en forme votre site. Ils composent le squelette du site. Les balises servent à donner vie au squelette en indiquant à Kiubi où injecter exactement le titre de la page, le contenu des billets, la date de création du dernier billet de votre blog, etc. Elles sont pour ainsi dire omniprésentes. Tous les templates ont besoin de balises pour fonctionner et vous pouvez également saisir certaines balises dans les éditeurs de texte visuels (éditeurs "Wysiwyg").
Il existe trois grandes familles de balises :
- les balises globales sont utilisables partout (modèles graphiques, éditeurs de texte visuels, champs d'information, etc.)
- les balises des modèles de mise en pages qui ne fonctionnent que dans les templates principaux
- les balises des widgets qui ne fonctionnent que dans leur widget
Exemple d'utilisation d'une balise
Prenons un exemple d'un template tel qu'on pourrait en trouver dans
les sous-répertoires de /fr/template/
.
<head>
<meta name="keywords" content="{metaKeywords}" />
<meta name="description" content="{metaDescription}" />
<title>{title}</title>
</head>
On voit ici que le titre de la page, la description et les mots clés de l'entête du fichier HTML sont définis à l'aide de balises et seront remplis automatiquement avec les valeurs configurées dans la console d'administration.
Balises globales
Les balises globales sont disponibles et utilisables partout dans Kiubi (modèles graphiques, éditeurs de texte visuels, champs d'information, ...).
Balises de base
racine | Indique le chemin relatif vers la racine du site où que l'on soit situé dans l'arborescence. |
lg | Indique le code langue courant (toujours fr pour l'instant). Cette balise est également disponible dans les templates d'email |
baseLangue | Indique le chemin relatif vers la racine du site dans la langue courante. |
lien_pagecourante | URL de la page courante. |
intitule_pagecourante | Intitulé de la page courante. |
optim_pagecourante | Affiche le nom optimisé de la page courante. Affiche par exmple le nom optimisé du billet dans la page de détail de billet du blog, ou le nom optimisé de la catégorie dans la page de détail d'une catégorie du catalogue. |
contexte_pagecourante | Affiche le contexte de la page courante sous forme d'une liste qui reprends le service, le type et les informations permettant d'identifer l'objet principal de la page. Plus de détails dans la section "Contexte" ci-dessous. |
lien_pageparente | URL de la page parente (niveau hiérarchique supérieur dans l'arborescence). |
intitule_pageparente | Indique l'intitulé de la page parente. |
accroche_site | Affiche l'accroche du site figurant dans "Mon site / Apparence / Bloc-marque". Cette balise est également disponible dans les templates d'email |
desc_site | Affiche la description du site figurant dans "Mon site / Apparence / Bloc-marque". Cette balise est également disponible dans les templates d'email |
logo_site | Affiche l'identifiant du logo du site figurant dans "Mon site / Apparence / Bloc-marque". Cette balise est également disponible dans les templates d'email |
url_logo_site | Affiche l'url du logo du site figurant dans "Mon site / Apparence / Bloc-marque". Cette balise est également disponible dans les templates d'email |
domaine | Affiche le nom du domaine courant du site. |
schema | Affiche le schéma du site (http ou https). |
site_nom | Affiche le nom du site figurant dans "Mon compte / Préférences". Cette balise est également disponible dans les templates d'email |
g_vignette_l | Largeur en pixels des grandes vignettes de la médiathèque. |
vignette_l | Largeur en pixels des vignettes de la médiathèque. |
g_vignette_h | Hauteur en pixels des grandes vignettes de la médiathèque. |
vignette_h | Hauteur en pixels des vignettes de la médiathèque. |
g_miniature_l | Largeur en pixels des grandes miniatures de la médiathèque. |
miniature_l | Largeur en pixels des miniatures de la médiathèque. |
g_miniature_h | Hauteur en pixels des grandes miniatures de la médiathèque. |
miniature_h | Hauteur en pixels des miniatures de la médiathèque. |
balise | Affiche le code d'un balise sans qu'elle ne soit interpretée. Exemple : |
cdn | URL du CDN des ressources statiques de la Plateforme. |
referer | Affiche le referer du navigateur, remplacée par REQUEST.referer |
devise | Affiche le devise du site. Cette balise est également disponible dans les templates d'email |
devise_iso | Affiche le code iso (3 lettres) de la devise du site. Cette balise est également disponible dans les templates d'email |
theme | Affiche le code du thème graphique du site. Le code pour les thèmes graphiques personnalisés est "theme". Cette balise est également disponible dans les templates d'email |
canonical | Affiche le chemin canonique de la page en cours |
liste_domaines | Liste de tout les noms de domaines du site. |
FILE "fichier.html" | Cette balise est très spéciale car elle permet d'inclure un modèle graphique dans le modèle graphique courant. Il suffit pour cela d'indiquer le chemin du modèle graphique que vous voulez inclure. Ce fichier doit se trouver dans le thème courant. Cette balise est souvent utilisée pour inclure à différents endroits des bouts de page qui reviennent de manière récurrente. Par exemple, dans les thèmes Kiubi, le copyright en bas de page est inclus dans toutes les pages grâce à la balise : Cette balise est également disponible dans les templates d'email Attention : cette balise n'est pas disponible dans les contenus WYSIWYG. |
illustration_pagecourante | Affiche le chemin vers l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible. |
illustration_pagecourante_miniature | Affiche le chemin vers la miniature de l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible. |
illustration_pagecourante_vignette | Affiche le chemin vers la vignette de l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible. |
illustration_pagecourante_g_vignette | Affiche le chemin vers la grande vignette de l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible. |
illustration_pagecourante_g_miniature | Affiche le chemin vers la grande miniature de l'illustration de le page courante. N'affiche rien si aucune illustration n'est disponible. |
Détail de la balise contexte_pagecourante
La balise contexte_pagecourante affiche des valeurs spécifique à la page dans laquelle est utlisée. Son utlisation est particulièrement appréciable avec certains frameworks CSS et Javascript.
/ | cms cms-accueil |
/[page].html | cms cms-page cms-page-[page] |
/blog/ | blog blog-accueil |
/blog/[categorie]/ | blog blog-categorie blog-categorie-[categorie] |
/blog/[categorie]/[yyyy]/[mm]/[dd]/ | blog blog-categorie blog-categorie-[categorie] blog-y-[yyyy] blog-m-[mm] blog-d-[dd] |
/blog/[categorie]/[yyyy]/[mm]/[dd]/[billet].html | blog blog-billet blog-billet-[billet] blog-categorie-[categorie] blog-a-[yyyy] blog-m-[mm] blog-j-[dd] |
/catalogue/ | catalogue catalogue-accueil |
/catalogue/[categorie]/ | catalogue catalogue-categorie catalogue-categorie-[categorie] |
/catalogue/[categorie]/[tags:]/ | catalogue catalogue-categorie catalogue-categorie-[categorie] catalogue-tag catalogue-tag-[tag1] catalogue-tag-[tag-2].... |
/catalogue/[categorie]/[produit].html | catalogue catalogue-produit catalogue-produit-[produit] catalogue-categorie-[categorie] |
/compte/[page].html | compte compte-[page] |
/contact/ | contact |
/ecommerce/[page].html | ecommerce ecommerce-[page] |
/recherche/[service]/ | recherche recherche-[service] |
Informations société
Les balises ci-dessous sont utilisables dans tous les templates, widgets, contenu wysiwyg et templates d'email.
SOCIETE.contact_nom | Affiche le nom du contact principal du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.contact_prenom | Affiche le prénom du contact principal du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.contact_email | Affiche l'e-mail du contact principal du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_nom | Affiche le nom de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_adresse | Affiche l'adresse de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_cp | Affiche le code postal de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_ville | Affiche la ville de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_pays | Affiche le pays de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_tel | Affiche le numéro de téléphone de la société responsable du site internet figurant dans "Mon compte /Préférences". |
SOCIETE.societe_mobile | Affiche le numéro de mobile de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_fax | Affiche le numéro de fax de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_cnil | Affiche le numéro de déclaration CNIL du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_capital | Affiche le capital de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_siret | Affiche le numéro siret de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_rcs | Affiche le RCS de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_ape | Affiche le code APE (ou NAF) de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_tva | Affiche le numéro de TVA intracommunautaire de la société responsable du site internet figurant dans "Mon compte / Préférences". |
SOCIETE.societe_forme | Affiche la forme juridique de la société responsable du site internet figurant dans "Mon compte / Préférences". |
Horodatage
Les balises ci-dessous sont utilisables dans tous les templates, widgets, contenu wysiwyg et templates d'email.
num_jour_maintenant | Affiche le numéro du jour courant (01 - 31). |
jour_semaine_maintenant | Affiche le jour de la semaine courant (lundi - dimanche). |
num_mois_maintenant | Affiche le numéro du mois courant (01 - 12). |
mois_maintenant | Affiche le mois courant (janvier - décembre). |
mois_abrev_maintenant | Affiche le mois courant abrégé (jan - déc). Il vaut mieux utiliser |
annee_maintenant | Affiche l'année courante (2007). |
heure_maintenant | Affiche l'heure courante (00-23). |
minute_maintenant | Affiche les minutes courantes (00-59). |
seconde_maintenant | Affiche les secondes courantes (00-59). |
timestamp_maintenant | Affiche le timestamp courant |
Informations client
Les balises ci-dessous sont utilisables dans tous les templates / widgets et contenu wysiwyg
CLIENT.client_id | Affiche l'identifiant interne du client. Requiert que le client soit connecté |
CLIENT.num | Affiche le numéro du client. Requiert que le client soit connecté |
CLIENT.nom | Affiche le nom du client. Requiert que le client soit connecté |
CLIENT.prenom | Affiche le prénom du client. Requiert que le client soit connecté |
CLIENT.genre | Affiche le genre ("H" ou "F") du client. Requiert que le client soit connecté |
CLIENT.email | Affiche l'email du client. Requiert que le client soit connecté |
CLIENT.pseudo | Affiche le pseudo du client. Requiert que le client soit connecté |
CLIENT.web | Affiche le site web du client. Requiert que le client soit connecté |
CLIENT.avatar | Affiche l'URL de l'avatar du client |
CLIENT.groupe_extranet | Affiche le groupe extranet du client |
CLIENT.groupe_extranet_id | Affiche l'identifiant numérique du groupe extranet du client |
CLIENT.page_extranet | Affiche la page du groupe extranet du client |
Balises POST/GET
Les balises ci-dessous sont utilisables dans tous les templates / widgets et contenu wysiwyg
GET.* | Affiche la valeur d'un paramètre GET de la page. Exemple : |
POST.* | Affiche la valeur d'un paramètre POST de la page. Exemple : |
REQUEST.page | Affiche le nom de page de l'url courante |
REQUEST.repertoire | Affiche le chemin de l'url courante |
REQUEST.url | Affiche l'url courante |
REQUEST.domaine | Affiche le domaine courant |
REQUEST.referer | Affiche le referer du navigateur |
API
Les balises ci-dessous fournissent des informations sur l'API Front-office
API.actif | Renvoie la chaine "true" si l'api du site est active. "false" dans le cas contraire. |
Filtres de balises
Kiubi supporte un ensemble de filtres qui peuvent être appliqués aux balises. Ces filtres ont pour but de changer la valeur de la balise pour mieux répondre à un besoin précis.
On utilise ces filtres en ajoutant une barre verticale | dans la balise. Exemple : {balise|filtre}
.
Certains filtres peuvent prendre des arguments, ils seront alors séparés par une
autre barre. Exemple : {balise|filtre|argument}
.
Filtre | Description |
---|---|
ucfirst | Met en majuscule la première lettre du texte |
strtoupper | Met en majuscule tout le texte |
strtolower | Met en minuscule tout le texte |
rawurlencode | Encode une chaîne en URL selon la RFC 3986. Supporte un argument "utf8" pour encode le résultat en UTF-8. |
htmlentities | Convertit tous les caractères éligibles en entités HTML. Supporte un argument "utf8" pour encode le résultat en UTF-8 |
left|x | Tronque le texte à gauche à strictement X caractères. |
stripText|x | Supprime les balises HTML puis tronque le texte à gauche sur X caractères au plus en conservant les mots entiers |
mot|x | Affiche le Xème mot du texte |
mapValue|x|y | Compare la valeur de la balise avec valeurs de références. Affiche X si la valeur est "1", "actif", "checked", "selected" ou "erreur". Affiche Y dans le cas contraire. Exemple si le contenu de la balise |
sanitize | Passe en minuscule,enlève tous les accents d'une chaine de caractères et convertis les espaces en tirets. Les tirets consécutifs sont fusionnés et les tirets finaux sont supprimés. Seuls les lettres, les chiffres et le tiret sont préservés. Exemple si le contenu de la balise |
alternate|x | Associé par exemple à la balise |
formatFloat|nb | Formate une valeur décimale brute à |
empty|x|y | Affiche X si la valeur est vide. Affiche Y dans le cas contraire. Exemple si le contenu de la balise |
slice|separator|start|length | Affiche une portion d'un texte qui est segmenté par |
escapejson | Echappe le texte qui peux être utilisé dans une chaine json. |
date | Extrait des informations d'un champ |
Ainsi {intitule_pagecourante|strtoupper}
affichera le nom de la page courante en
majuscule. Tandis que {SOCIETE.societe_cp|left|2}
affichera le numéro de
département extrait du code postal du contact principal du site.
Balises des Widgets
Un certain nombre de widgets possèdent des fonctionnalités et des balises communes.
{alterne}
La balise {alterne}
est utilisée dans les widgets qui génèrent des listings
comme par exemple le widget du Blog / Liste des Billets
. La balise affichera
alternativement 1 ou 2 si on la place dans le bloc qui est répété dans le
widget.
Exemple : le widget Blog / Liste des Billets
:
<!--BEGIN:main -->
<ul>
<!--BEGIN:billet -->
<li class="color_{alterne}">{alterne}, {titre}</li>
<!-- END:billet -->
</ul>
<!-- END:main -->
Si on a 5 billets dans son blog, le résultat sera :
1, Titre du premier billet 2, Titre du deuxième billet 1, Titre du troisième billet 2, Titre du quatrième billet 1, Titre du cinquième billet
Cela vous permet, par exemple, d'appeler alternativement l'un ou l'autre style pour changer la couleur de fond et rendre ainsi vos listings plus lisibles.
Les balises {alterne_3}
, {alterne_4}
et {alterne_5}
sont également disponibles
et renvoient respectivement les valeurs :
1, 2, 3 1, 2, 3, 4 1, 2, 3, 4, 5
{compteur}
La balise {compteur}
est utilisée dans les widgets qui génèrent des listings
comme par exemple le widget du Blog / Liste des commentaires
. La balise
affichera un compteur commençant à 1 et qui sera incrémenté de 1 à chaque fois.
Exemple : le widget Blog / Liste des Billets
:
<!-- BEGIN:main -->
<ul>
<!-- BEGIN:commentaire-->
<li>{compteur}. {commentaire}</li>
<!-- END:commentaire-->
</ul>
<!-- END:main -->
Si on a 3 commentaires pour un billet de son blog, le résultat sera :
1. Premier commentaire 2. Deuxième commentaire 3. Troisième commentaire
Chaque ligne est numérotée automatiquement.
{intitule}
Cette fonctionnalité est une association entre un bloc et une balise. Les
widgets pouvant utiliser la fonctionnalité "Intitulé" ont un bloc
supplémentaire à placer dans le bloc main
:
<!-- BEGIN:main -->
<!-- BEGIN:intitule -->{intitule}<!-- END:intitule -->
<!-- END:main -->
Le bloc <!-- BEGIN:intitule -->
<!-- END:intitule -->
ne s'affiche que si
l'intitulé du widget est rempli. Cet intitulé est paramétrable lors de l'édition
d'un widget dans la gestion de l'Apparence de la Console d'administration de
Kiubi.
{ctl}
La balise {ctl}
est présente dans certain widgets qui utilisent un formulaire. Elle
n'a qu'une utilité technique et est présente sous la forme :
<input type="hidden" name="ctl" value="{ctl}">
Il ne faut pas la supprimer, sinon le formulaire ne fonctionnera plus !
La navigation
La navigation est une fonctionnalité que l'on retrouve dans les widgets qui génèrent des listings et dont la configuration permet l'affichage. C'est un ensemble de blocs qui permet d'afficher des barres de navigations complètes. Les résultats sont affichés sur plusieurs pages et la navigation permet de passer d'une page à l'autre.
Les options de navigation (nombre d'élément par page, afficher ou cacher la navigation) sont toujours configurables dans le widget correspondant.
La barre de navigation comprend :
- des liens vers les pages suivantes et précédentes,
- des liens vers la première et dernière page,
- une liste de numéro de page comprenant un lien pour arriver directement sur la page en question.
Pour plus de souplesse, il est possible de mettre deux barres de navigation dans
un même widget (une barre en haut et une en bas du listing, par exemple). Les
balises et blocs ci-dessous fonctionnent dans les blocs <!-- BEGIN: nav1 -->
<!-- END: nav1 -->
et <!-- BEGIN: nav2 --> <!-- END: nav2 -->
.
Voici un exemple de ce que cela peux donner en HTML :
<!-- BEGIN: nav1 -->
<!-- BEGIN: premier -->
<a href="{lien_premier}">premiere page</a> |
<!-- END: premier -->
<!-- BEGIN: precedent -->
<a href="{lien_precedent}">page precedente</a> |
<!-- END: precedent -->
<!-- BEGIN: pages -->
<a href="{lien_page}" class="{selected}">{page}</a>
<!-- END: pages -->
<!-- BEGIN: suivant -->
| <a href="{lien_suivant}">page suivante</a>
<!-- END: suivant -->
<!-- BEGIN: dernier -->
| <a href="{lien_dernier}">derniere page</a>
<!-- END: dernier -->
<!-- END: nav1 -->
<br />
<br />
page {num_page} sur {nb_pages} ({nb_resultats} billets trouvés)<br />
<br />
[listing ....]<br />
<br />
<!-- BEGIN: nav2 -->
<!-- BEGIN: premier -->
<a href="{lien_premier}">premiere page</a> |
<!-- END: premier -->
<!-- BEGIN: precedent -->
<a href="{lien_precedent}">page precedente</a> |
<!-- END: precedent -->
<!-- BEGIN: pages -->
<a href="{lien_page}" class="{selected}">{page}</a>
<!-- END: pages -->
<!-- BEGIN: suivant -->
| <a href="{lien_suivant}">page suivante</a>
<!-- END: suivant -->
<!-- BEGIN: dernier -->
| <a href="{lien_dernier}">derniere page</a>
<!-- END: dernier -->
<!-- END: nav2 -->
Ce qui donnera cela :
premiere page | page precedente | 1 2 3 4 5 | page suivante | derniere page page 2 sur 5 (53 billets trouvés) [listing ...] premiere page | page precedente | 1 2 3 4 5 | page suivante | derniere page
Balises disponibles
Bloc nav1 ou nav2
La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN:pages -->
lien_premier | URL vers la première page. |
lien_dernier | URL vers la dernière page. |
nb_pages | Nombre de page du listing. |
nb_resultats | Nombre d'élément dans le listing. |
num_page | Numéro de la page courante. |
Bloc nav1.pages ou nav2.pages
Le contenu du bloc s'affiche pour chaque page.
La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN:precedent -->
lien_page | URL vers la page |
page | Numéro de la page. |
selected | Affiche "selected" si la page est la page courante. Sinon n'affiche rien. |
Bloc nav1.precedent ou nav2.precedent
Le contenu du bloc s'affiche si on n'est pas sur la première page du listing.
La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN:suivant -->
lien_precedent | URL vers la page précédente. |
Bloc nav1.suivant ou nav2.suivant
Le contenu du bloc s'affiche si on n'est pas sur la dernière page du listing.
Types de billets
Un billet permet d'ajouter du contenu à une page libre du Site web. Chaque billet peut être considéré comme un paragraphe, un bloc de contenu, pouvant contenir du texte, des images, des liens, des vidéos, du code HTML, etc. Lors de l'ouverture d'un site, Kiubi propose plusieurs types de billets différents en exemple.
Chaque type de billet peut être structuré de manière différente et permet d'intégrer et de présenter du contenu suivant ses besoins.
Si vous utilisez un thème graphique personnalisé, vous pouvez modifier les types de billets par défaut et créer autant de types de billet que souhaité.
Principe de fonctionnement
Le principe de fonctionnement d'un type billet du Site web est très simple. Tous
les types de billets de votre site sont regroupés dans le répertoire theme/fr/billets/
de votre espace FTP. Chaque sous-répertoire correspond à
un type de billet.
Un billet est composé, en plus d'une structure HTML de votre choix, d'un maximum de 17 champs d'information :
titre
sstitre
texte1
àtexte15
Chaque champ peut contenir n'importe quel type de donnée. Par convention (mais
ce n'est pas obligatoire), les champs texte10
à texte15
sont utilisés pour
stocker des éléments de la médiathèque (image, fichier, etc.), plus précisément
l'identifiant faisant référence à l'élément de la médiathèque.
Ces champs sont à définir dans le fichier config.xml
de chaque type de
billet, ce qui permet de générer automatiquement le formulaire de saisie utilisé
dans la console d'administration. Ce fichier est obligatoire.
Chaque champ pourrait être par la suite affiché dans le fichier index.html
de chaque type de billet ou dans chaque widget affichant des billets, en
fonction de ses besoins. Ce fichier est obligatoire.
Comme tous les éléments de Kiubi, un billet (ou plutôt une liste de billet) est affiché grâce à un widget. C'est principalement les widgets "Contenu de la page libre" et "Bloc d'extrait" qui sont utilisés pour afficher les billets dans votre site internet.
Le fichier config.xml
Ce fichier contient des informations descriptives du type de billet qui seront utilisée à la fois dans la console d'administration et le site Internet. Il indique à Kiubi de quels champs est composé le type de billet.
Exemple de code source
<?xml version="1.0" encoding="iso-8859-1"?>
<type tri="2">
<desc>Titres, texte et image (à gauche)</desc>
<listechamps>
<champ champ="titre" type="text" intitule="Titre"/>
<champ champ="sstitre" type="text" intitule="Sous-titre" />
<champ champ="texte10" type="image" intitule="Image" />
<champ champ="texte1" type="wysiwyg" intitule="Contenu" />
</listechamps>
</type>
Description
Ce fichier contient une seule balise principale <type>
qui possède un seul
attribut :
tri
: nombre qui sert à définir l'ordre dans le quel vont apparaître les types de billet dans les listes déroulantes de la console d'administration.
A l'intérieur, une seule balise <desc>
qui contient la description du type de
billet qui sera repris dans la console d'administration.
La balise <listechamps>
sert à déclarer tous les champs qui seront utilisés dans
ce type de billet.
Il existe alors une balise <champ>
par champ qui contient les attributs suivants :
champ
: code du champ qui sera aussi utilisé dans les templates :titre
,sstitre
,texte1
àtexte15
.type
: le type du champ indique quelle sorte d'information est stockée dans le champ.intitule
: intitulé du champ qui va être repris dans la console d'administration dans le formulaire de saisie d'un billet.
Il existe dix types de champ :
text
: champ de saisie simpletextarea
: champ de saisie multilignewysiwyg
: éditeur de texte visuelimage
: fichier image de la médiathèquefichier
: fichier quelconque de la médiathèqueselect
: champ de liste déroulantecolor
: couleur hexadécimaledate
: date au formatdd/mm/YYYY
datetime
: date au formatdd/mm/YYYY hh:mm:ss
checkbox
: champ de type case à cocher
Les champs de type select
ou checkbox
comportent une liste de valeurs qui est construite
de la manière suivante :
<champ champ="texte2" type="select" intitule="Liste">
<option value="Valeur1">Label1</option>
<option value="Valeur2">Label2</option>
<option value="Valeur3">Label3</option>
</champ>
Dans cet exemple, le contenu de l'attribut value
est stocké dans le champ texte2
.
L'attribut value
doit obligatoirement avoir une valeur (un simple espace value=" "
est possible). Pour
les champs de type checkbox
, la valeur affichée dans le site est la concanénation de toutes les value
sélectionnées,
séparées par le caractère |
(par exemple Valeur1|Valeur3
).
Le label n'est affiché que dans le détail du billet dans la console d'administration.
Afin de faciliter l'utilisation des champs de type date
et datetime
, il est prévu d'utiliser le filtre date
suivi
de l'information à extraire, comme par exemple :
Le {texte5|date|jour_semaine} {texte5|date|num_jour} {texte5|date|mois} à {texte5|date|heure}h{texte5|date|minute}
Si texte5
contient la valeur 06/12/2022 15:12:35
, le site affichera :
Le dimanche 06 novembre 2022 à 15h12
Si la date est invalide ou que le valeur du champ est vide, ce filtre affiche toujours une chaine vide.
Template d'un type de billet
Le fonctionnement détaillé du template d'un type de billet ainsi que la liste exhaustives de ses balises sont accessibles dans la documentation des balises du service CMS.
Ajouter un nouveau type de billet
Pour ajouter un type de billet, il suffit de créer un nouveau sous-répertoire au
répertoire theme/fr/billets/
et d'y copier les fichiers config.xml
et index.html
correspondant à votre nouveau type de billet. Le nouveau type de
billet sera alors automatiquement proposé dans le service Site web de la console
d'administration.
Types de billets du Blog
Les types de billet du blog fonctionnent selon le même principe que les billets du Site web mais uniquement pour ajouter des informations complémentaires aux billets du Blog.
Contrairement aux types de billets du Site web, les types de billets du blog ne déterminent pas le template du billet, mais seulement si des champs texte1
et texte15
sont ajoutés au billet.
Le principe de configuration des types de billets du Blog est le même que pour les billets du Site web, mais avec les différences suivantes :
- les types de billets du blog sont regroupés dans le répertoire
theme/fr/billets_blog/
- il n'y a pas de champs
titre
etsstitre
, seuls les champstexte1
ettexte15
sont disponibles - seul le fichier
config.xml
est disponible, les templates sont dans le répertoiretheme/fr/widgets/blog/
, en fonction des widgets utilisés
Types des produits
Un type de produit fonctionne comme un type de billet mais est adapté à votre catalogue produit. Lors de l'ouverture d'un site, Kiubi vous propose par défaut un seul type de produit.
Chaque type de produit peut être structuré de manière différente et permet d'intégrer et de présenter du contenu suivant ses besoins. Contrairement aux différents types de billet nécessaires au Site Web, il est plus rarement utile de multiplier les types de produit, un seul type (proposé par défaut) étant bien souvent suffisant.
Si vous utilisez un thème graphique personnalisé, vous pouvez modifier le type de produit par défaut et créer des nouveaux types de produit.
Principe de fonctionnement
Le principe de fonctionnement d'un type de produit du Catalogue est très simple.
Tous les types de produits de votre site sont regroupés dans le répertoire
theme/fr/produits/
de votre espace FTP. Chaque sous-répertoire correspond à
un type de produit.
Un produit peut être composé, en plus d'une structure HTML de votre choix et des informations spécifiques à un produit (intitulé, chapô, description, variantes, illustration, ...), d'un maximum de 15 champs d'information supplémentaires (qui ne sont pas utilisés dans le type de produit par défaut proposé par Kiubi) :
texte1
àtexte15
Chaque champ peut contenir n'importe quel type de donnée. Par convention (mais
ce n'est pas obligatoire), les champs texte10
à texte15
sont utilisés pour
stocker des éléments de la médiathèque (image, fichier, etc.), plus précisément
l'identifiant faisant référence à l'élément de la médiathèque.
Ces champs sont à définir, au besoin, dans le fichier config.xml
de chaque
type de produit, ce qui permet de générer et d'ajouter automatiquement le
formulaire de saisie correspondant lors de l'édition d'un produit dans la
console d'administration. Ce fichier est obligatoire.
Chaque champ pourrait être par la suite affiché dans le fichier index.html
de chaque type produit ou dans chaque widget affichant des produits, en fonction
de ses besoins. Ce fichier est obligatoire.
Un fichier styles.css peut être ajouté afin de contrôler la mise en forme du
widget Détail d'un produit
. Ce fichier est automatiquement chargé dans la
balise <head>
si le widget est présent dans la page. Ce fichier n'est pas
obligatoire.
Comme tous les éléments de Kiubi, un produit (ou une liste de produit) est affiché grâce à un widget. Ce sont
principalement certains widgets du service Catalogue
qui sont utilisés pour afficher des produits.
Le fichier config.xml
Ce fichier contient des informations descriptives du type de produit qui seront utilisée à la fois dans la console d'administration et le site Internet. Il indique à Kiubi de quels champs d'information supplémentaires est composé le type de produit. Ces champs d'information supplémentaires sont facultatifs.
Le fichier config.xml
d'un type de produit fonctionne de la même manière que le fichier config.xml
d'un type de billet.
Template d'un type de produit
Le fonctionnement détaillé du template d'un type de produit ainsi que la liste exhaustives de ses balises sont accessibles dans la documentation des balises du service Catalogue.
Ajouter un nouveau type de produit
Pour ajouter un type de produit, il suffit de créer un nouveau sous-répertoire
au répertoire theme/fr/produits
et d'y copier les fichiers config.xml
et
index.html
(et styles.css
) correspondant à votre nouveau type
de produit. Le nouveau type de produit sera alors automatiquement proposé dans
le service Catalogue de la console d'administration.
Type de composant
Un composant permet d'ajouter du contenu à une page ou un symbole du Site web. A la différence du billet, un composant inclu une liste d'un ou plusieurs éléments appellée "collection".
Un type de composant fonctionne un peu comme un type de billet : il défini un template ainsi qu'une liste de champs disponibles. Lors de l'ouverture d'un site, Kiubi vous propose par défaut un ensemble de composants.
Si vous utilisez un thème graphique personnalisé, vous pouvez modifier les types de composant par défaut et créer des nouveaux types de composant.
Principe de fonctionnement
Tous les types de composants de votre site sont regroupés dans le répertoire
theme/fr/composants/
de votre espace FTP. Chaque sous-répertoire correspond à
un type de composant.
Un composant est composé, en plus d'une structure HTML de votre choix et d'un fichier de configuration indiquant les champs spécifiques du composant et ceux de leur collection. A la différence des types de billets, les noms des champs sont personnalisables.
Ces champs sont à définir, au besoin, dans le fichier config.xml
de chaque
type de composant, ce qui permet de générer et d'ajouter automatiquement le
formulaire de saisie correspondant lors de l'édition d'un composant et des éléments
de sa collection dans la console d'administration. Ce fichier est obligatoire.
Chaque champ pourrait être par la suite affiché dans le fichier index.html
de chaque type de composant ou dans chaque widget affichant des composants, en fonction
de ses besoins. Ce fichier est obligatoire.
Comme tous les éléments de Kiubi, un composant (ou une liste de composant) est affiché
grâce au widget "Contenu" du service Site web
.
Le fichier config.xml
Ce fichier contient des informations descriptives du type de billet qui seront utilisée à la fois dans la console d'administration et le site Internet. Il indique à Kiubi de quels champs est composé le type de billet.
Exemple de code source
<?xml version="1.0" encoding="iso-8859-1"?>
<composant intitule="Mon composant" tri="3">
<listechamps>
<champ champ="title" intitule="Titre" type="text" />
<champ champ="extra_class" intitule="Xtra" type="text" defaut="container-large" aide="Classe supplémentaire"/>
</listechamps>
<collection>
<champ champ="title" intitule="Titre" type="text" />
<champ champ="image" intitule="Illustration" type="image" aide="Au format 4/3"/>
<champ champ="description" intitule="Titre" type="wysiwyg" />
</collection>
</composant>
Description
Ce fichier contient une seule balise principale <composant>
qui possède deux
attributs :
tri
: nombre qui sert à définir l'ordre dans le quel vont apparaître les types de composants dans les listes déroulantes de la console d'administration.intitule
: description du type de composant dans les listes déroulantes de la console d'administration.
La balise <listechamps>
sert à déclarer tous les champs qui seront utilisés dans
ce composant. Il est possible de déclarer jusqu'à 20 champs en plus du champ
obligatoire title
.
Il existe alors une balise <champ>
par champ qui contient les attributs suivants :
champ
: code du champ personnalisable qui sera aussi utilisé dans les templates. Limité à 40 caractères alphanumériques non accentués et "_".type
: le type du champ indique quelle sorte d'information est stockée dans le champ.intitule
: intitulé du champ qui va être repris dans la console d'administration dans le formulaire de saisie d'un billet.defaut
: valeur par défaut qui sera utilisée dans le site si le champ est vide dans la console d'administration.aide
: message d'aide à la saisie qui sera affiché dans la console d'administration.
Il existe dix types de champ :
text
: champ de saisie simpletextarea
: champ de saisie multilignewysiwyg
: éditeur de texte visuelimage
: fichier image de la médiathèquefichier
: fichier quelconque de la médiathèqueselect
: champ de liste déroulantecolor
: couleur hexadécimaledate
: date au formatdd/mm/YYYY
datetime
: date au formatdd/mm/YYYY hh:mm:ss
checkbox
: champ de type case à cocher
Les champs de type select
ou checkbox
comportent une liste de valeurs qui est construite
de la manière suivante :
<champ champ="texte2" type="select" intitule="Liste">
<option value="Valeur1">Label1</option>
<option value="Valeur2">Label2</option>
<option value="Valeur3">Label3</option>
</champ>
Dans cet exemple, le contenu de l'attribut value
est stocké dans le champ texte2
.
L'attribut value
est obligatoire (il peut cependant être vide value=""
). Le label n'est affiché que
dans le détail du billet dans la console d'administration. Pour les champs de type checkbox
, la valeur affichée dans
le site est la concanénation de toutes les value
sélectionnées, séparées par le caractère |
(par exemple
Valeur1|Valeur3
).
Afin de faciliter l'utilisation des champs de type date
et datetime
, il est prévu d'utiliser le filtre date
suivi
de l'information à extraire, comme par exemple :
Le {texte5|date|jour_semaine} {texte5|date|num_jour} {texte5|date|mois} à {texte5|date|heure}h{texte5|date|minute}
Si texte5
contient la valeur 06/12/2022 15:12:35
, le site affichera :
Le dimanche 06 novembre 2022 à 15h12
Si la date est invalide ou que le valeur du champ est vide, ce filtre affiche toujours une chaine vide.
La balise facultative <collection>
sert à déclarer tous les champs qui seront utilisés dans la collection
de ce composant. Son fonctionnement est identique à la balise <listechamps>
. Si la balise n'est pas déclarée
dans le fichier config.xml
, on considère que ce composant n'a pas de collection.
Template d'un type de composant
Le fonctionnement détaillé du template d'un type de composant ainsi que la liste exhaustives de ses balises sont accessibles dans la documentation des balises du service Site web.
Ajouter un nouveau type de composant
Pour ajouter un type de composant, il suffit de créer un nouveau sous-répertoire
au répertoire theme/fr/composants
et d'y copier les fichiers config.xml
et
index.html
correspondant à votre nouveau type de composant. Le nouveau type de
composant sera alors automatiquement proposé dans le service Site web de la console
d'administration.
Symboles
Un symbole est une fraction de contenu centralisée et indépendante qui possède sa propre mise en page et qui peux être inséré dans le contenu de plusieurs pages.
Chaque symbole possède un type qui va déterminer ses paramètres, sa mise en page et sa structure HTML. Le type de symbole partage beaucoup de caractéristiques communes avec les templates principaux.
Si vous utilisez un thème graphique personnalisé, vous pouvez modifier et créer de types de symboles.
Paramètres d'un type de symbole
Une fois connecté à votre espace FTP, tous les types de symboles sont
regroupés dans le répertoire theme/fr/symboles/
. Chacun de ces sous-
répertoires est un type. Un template contient les fichiers
suivants :
desc.xml
: permet de décrire le type et déclarer les zones. Ce fichier est obligatoireindex.html
: contient le code HTML du type. Ce fichier est obligatoirestructure.xhtml
: permet de définir la structure du type utilisée dans l'édition d'une page type. Ce fichier n'a aucun lien avec le rendu du site internet et n'est utilisé que pour la console d'administration. Ce fichier est obligatoire
Le fichier desc.xml
Ce fichier contient des informations descriptives du type. Il permet principalement de déclarer les zones dans lesquelles pourront être insérés des Widgets.
Exemple de code source
<?xml version="1.0" encoding="iso-8859-1"?>
<symbole intitule="3 colonnes" tri="2">
<listechamps>
<champ champ="title" type="text" />
<champ champ="extra_class" type="text" defaut="container-large" aide="Classe supplémentaire" />
</listechamps>
<zones defaut="center">
<zone id="left" colmax="1" intitule="Gauche" defaut="1" type="contenu" />
<zone id="center" colmax="1" intitule="Centre" defaut="1" type="contenu" />
<zone id="right" colmax="1" intitule="Droit" defaut="1" type="contenu" />
</zones>
</symbole>
Description
Ce fichier contient une seule balise principale <symbole>
qui possède 2 attributs :
tri
: nombre qui sert à définir l'ordre dans le quel vont apparaître les types de symbole dans les listes déroulantes de la console d'administration.intitule
: intitule du template qui est utilisé dans la console d'administration
A l'intérieur, nous avons une seule balise <zones>
qui contient tout un ensemble
de balises <zone>
. L'attribut defaut
permet de désigner la zone dans laquelle
sera placé par défaut tous les contenus ajoutés dans le symbole. La zone désignée est
alors automatiquement considéré comme étant de type "contenu".
La balise <zone>
sert à déclarer une zone où vont pouvoir
être inséré les Widgets. L'id des zones devra être repris dans les fichiers
structure.xhtml
et index.html
..
Elles contiennent les attributs suivants :
id
: code alphanumérique qui sera réutilisé pour identifié la zone dans les fichiersindex.html
etstructure.xhtml
.colmax
: nombre maximum de colonnes des blocs de présentation qui peuvent être insérés dans cette zone (de 1 à 3). Les colonnes correspondant sont gérées via les fichiers du répertoiretheme/fr/layouts/
intitule
: intitulé de la zone qui sera repris dans la console d'administration dans l'édition d'une page type.defaut
: nombre de colonnes des blocs de présentation insérées par défaut dans la zone.type
: si la valeur est "contenu", la zone pourra accepter des billets et des composants dans la console d'administration.
La balise <listechamps>
sert à déclarer tous les champs qui seront utilisés dans
ce symbole. Il est possible de déclarer jusqu'à 20 champs en plus du champ
obligatoire title
. Le fonctionnement est le même que pour un composant.
Le fichier structure.xhml
Ce fichier est une représentation schématique de la disposition des zones dans
le template (les zones déclarées dans le fichier desc.xml
).
Il est utilisé pour générer la page d'édition de la mise en page du symbole dans
la console d'administration. Il n'est en aucun cas utilisé pour effectuer un
rendu du site Internet.
Exemple de code source
<table>
<tr>
<td colspan="2">{entete}</td>
</tr>
<tr>
<td colspan="2">{menu}</td>
</tr>
<tr>
<td width="30%">{sidebar}</td>
<td>{contenu}</td>
</tr>
<tr>
<td colspan="2">{piedepage}</td>
</tr>
</table>
Description
Les zones sont appelées directement en mettant leurs ID entre accolade.
Il est obligatoire d'utiliser un code HTML simple, sans script ni style. Seules les balises TABLE, TD et TR sont autorisées.
Le fichier index.html
Alors que le fichier structure.xhtml
est une vue abstraite de la page
utilisée seulement dans la console d'administration, le fichier index.html
contient le code HTML concret du template qui sera affiché dans le
site Internet.
Exemple de code source
<!-- BEGIN:main -->
<div class="container {extra_class}">
<h3>{title}</h3>
<div class="row">
<span class="col-4">{ZONE.left}</span>
<span class="col-4">{ZONE.center}</span>
<span class="col-4">{ZONE.right}</span>
</div>
</div>
<!-- END:main -->
Description
Les balises {ZONE.*}
servent à indiquer où insérer les Widgets. Les noms des
zones sont déclarés dans le fichier desc.xml
.
Ajouter un nouveau modèle de symbole
Pour ajouter un nouveau modèle de symbole, il suffit de créer un nouveau
sous-répertoire au répertoire theme/fr/symboles/
et d'y copier tous les
fichiers correspondant à votre nouveau symbole. Il sera alors automatiquement
proposé dans l'édition d'un symbole de la console d'administration.
Médiathèque
La Médiathèque de Kiubi permet de gérer les fichiers (images, documents textes,
pdf, sons, vidéos...) que vous allez utiliser pour enrichir le contenu d'un
site. Vous pouvez publier des fichiers de moins de 7Mo directement
dans la Médiathèque en passant par la console d'administration. Pour des fichiers de plus de 7Mo,
vous devez les publier dans votre espace FTP, dans le répertoire mediatheque
.
Accéder à un fichier de la Médiathèque
Tous les fichiers publiés dans la Médiathèque sont stockés dans le répertoire
virtuel media
et sont identifiés par un numéro identifiant qui leur est
propre. Un fichier de la Médiathèque sera donc accessible à l'adresse :
http://nom_de_domaine/media/numero_identifiant
Généralement, le numéro identifiant est ajouté automatiquement si le fichier est
inséré directement via la Médiathèque dans une zone de mise en forme de texte ("Wysisyg") ou
dans un champ d'information de type image
ou fichier
.
L'adresse d'un fichier est cependant toujours redirigée vers :
http://nom_de_domaine/media/numero_identifiant/nom_du_fichier.extention_du_fichier
Sauf si elle est de la forme :
http://nom_de_domaine/media/numero_identifiant.extention_du_fichier
Exemple de redirection
L'adresse d'un fichier :
http://nom_de_domaine/media/402
Sera redirigée vers :
http://nom_de_domaine/media/402/mon_fichier.pdf
Mais il n'y aura pas de redirection si elle est de la forme :
http://nom_de_domaine/media/402.pdf
Traitement automatique des images
Kiubi permet de générer automatiquement 4 tailles différentes en plus de la taille d'origine d'une image publiée dans la Médiathèque. Ces tailles sont configurables dans les Paramètres de la médiathèque des Préférences de la console d'administration :
- grande vignette, par défaut configurée en 1140px par 1140px
- vignette, par défaut configurée en 480px par 480px
- grande miniature, par défaut configurée en 240px par 240px
- miniature, par défaut configurée en 120px par 120px
Ces différentes tailles d'images sont accessibles aux adresses :
http://nom_de_domaine/media/g_vignette/numero_identifiant
http://nom_de_domaine/media/vignette/numero_identifiant
http://nom_de_domaine/media/g_miniature/numero_identifiant
http://nom_de_domaine/media/miniature/numero_identifiant
La taille d'origine de l'image restant accessible à l'adresse :
http://nom_de_domaine/media/numero_identifiant
Includes
Un include permet d'inclure le contenu d'un fichier HTML dans n'importe quel autre tempalte.
Principe de fonctionnement
Pour utiliser un include, il suffit d'indiquer le chemin du fichier que vous voulez inclure sous la forme :
{FILE "/fr/includes/date.html"}
Tous les includes de Kiubi sont regroupés dans le répertoire /theme/fr/includes/
.
Un include est généralement utilisé pour inclure à différents endroits des bouts
de code qui reviennent de manière récurrente.
Par exemple, dans les modèles de mise en pages de Kiubi, le copyright en bas de page est inclus grâce à la balise :
{FILE "/fr/includes/copyright.html"}
Le widget Fragment de template permet d'ajouter des includes directement via la gestion de la mise en page de la console d'administration de Kiubi, sans passer par l'édition d'un template principal.
Page d'erreur 404
La page d'erreur 404 est la page qui est affichée si une adresse erronée de votre site est demandée.
Répertoire
theme/fr/modules/404/404.html
Exemple du code source
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="{metaKeywords}">
<title>{site_nom} | Erreur 404, cette page n'existe pas !</title>
</head>
<body>
<h1>Erreur 404, cette page n'existe pas !
<br />
<a href="{racine}/" title="Retour au site">Retour au site</a></h1>
</body>
</html>
Balises disponibles
Toutes les balises globales sont disponibles.
Fil d'Ariane
Le chemin de navigation, ou fil d'Ariane, est une aide à la navigation sous forme de signalisation de la localisation de l'internaute dans le site Internet. Il se présente généralement sous la forme :
Accueil / Catalogue / Nom de la catégorie / Nom du produit
Le chemin de navigation est construit automatiquement par Kiubi, les intitulés des éléments qu'il affiche ne sont donc pas tous personnalisables. Chaque service aura son propre intitulé :
- Site web : Accueil / Nom de la page
- Blog : Accueil / Blog / Nom de la catégorie
- Catalogue : Accueil / Catalogue / Nom de la catégorie / Nom du produit
- E-commerce : Accueil / Etape de la commande
- Gestion de comptes : Accueil / Gestion de comptes
- Contact : Accueil / Contact
L'intitulé et l'adresse du Blog et du Catalogue dans le fil d'arianne sont personnalisables dans les Préférences de la console d'administration.
Par défaut, ce module est affiché via l'include {FILE "/fr/includes/chemin.html"}
dans les templates principaux du site.
Cet include contient la balise {MODULE.cms/chemin}
utilisée pour appeler le module.
Répertoire
theme/fr/modules/chemin/index.html
Exemple du code source
<a href="{baseLangue}/" title="Accueil">Accueil</a> /
<!-- BEGIN:page -->
<a href="{lien}" title="{page}" target="{cible}">{page}</a>
<!-- BEGIN:separateur --> / <!-- END:separateur -->
<!-- END:page-->
Balises disponibles
Bloc main.page
Le contenu du bloc s'affiche pour chaque page du chemin.
La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN:separateur -->
page | Intitulé de la page. |
cible | Cible du lien (attribut target). |
lien | URL du lien vers la page correspondante. |
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. |
compteur | La balise affiche un compteur commençant à 1 et qui est incrémenté de 1 à chaque page. |
Bloc main.page.separateur
Le contenu du bloc s'affiche tout le temps sauf pour la dernière page du chemin
Page de fermeture
La page de fermeture est la page qui est affichée si le site est fermé :
- par manque de crédit
- volontairement via les Préférences de la console d'administration
- pendant les périodes de maintenance de la plateforme
Répertoire
theme/fr/modules/fermeture/fermeture.html
Exemple du code source
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="{metaKeywords}">
<title>{site_nom} est actuellement fermé !</title>
</head>
<body>
<h1>{site_nom} est actuellement fermé !</h1>
<a href="{acces_front}">Accéder au site</a>
</body>
</html>
Balises disponibles
Toutes les balises globales sont disponibles, en plus de la balise {acces_front}
qui affiche le lien vers le formulaire d'identification permettant l'accès aux
sites de démonstrations ou protégés par login/mot de passe.
Moteur de recherche
Il est possible d'intégrer un moteur de recherche dans un template principal (ou via un include).
<div id="search">
<form action="{baseLangue}/recherche/{service}/" method="get">
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td><input type="text"></td>
<td><input type="submit" value=""></td>
</tr></table>
</form>
</div>
Le moteur de recherche, à ne pas confondre avec les résultats d'une recherche (le Widget Recherche simple), permet d'effectuer une recherche dans le service en cours dans le site Internet. En effet, Kiubi étant multiservices, le moteur de recherche ne peut pas faire de recherche dans l'intégralité du site Internet (contenu rédactionnel, blog et catalogue simultanément). La recherche ne s'effectuera que dans le service actuellement visité par l'internaute.
Exemple : si l'internaute visite le blog et qu'il effectue une recherche, la recherche ne sera effectuée que dans le contenu du blog. Il en va de même pour le catalogue de produit et pour le contenu rédactionnel.
La balise {service}
permet de définir automatiquement le service en cours. Il
est cependant possible de forcer une recherche dans un service particulier en
remplaçant la balise {service}
par le service concerné :
cms
pour le Site web.blog
pour le Blog.catalogue
pour le Catalogue.
Le paramètre name
du champ de recherche doit impérativement avoir r
pour
valeur.