Généralités

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. Indiquer kiubi pour inclure les scripts utilisés par les thèmes par défaut ou none 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.

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 obligatoire
• index.html : contient le code HTML du template. Ce fichier est obligatoire
• structure.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'administration
• img (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 fichiers index.html et structure.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épertoire theme/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 &agrave; 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

<!-- 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.

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

• Panier
• Détail du panier
• Livraison
• Paiement
• Validation

Gestion de compte

• Identification rapide
• Identification
• Formulaire d'inscription
• Tableau de bord

Modules (Communication)

• Dismoi? (générateur de formulaires)
• Inscription à la newsletter
• Syndication du blog
• Formulaire de contact

Recherche

• Recherche simple

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 fichier index.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 fichier styles.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.

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

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.

Les balises globales sont disponibles et utilisables partout dans Kiubi (modèles graphiques, éditeurs de texte visuels, champs d'information, ...).

Balises de base

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.

Informations société

Les balises ci-dessous sont utilisables dans tous les templates, widgets, contenu wysiwyg et templates d'email.

Horodatage

Les balises ci-dessous sont utilisables dans tous les templates, widgets, contenu wysiwyg et templates d'email.

Informations client

Les balises ci-dessous sont utilisables dans tous les templates / widgets et contenu wysiwyg

Balises POST/GET

Les balises ci-dessous sont utilisables dans tous les templates / widgets et contenu wysiwyg

API

Les balises ci-dessous fournissent des informations sur l'API Front-office

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}.

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.

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 -->

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 -->

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 -->

Bloc nav1.suivant ou nav2.suivant

Le contenu du bloc s'affiche si on n'est pas sur la dernière page du listing.

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 simple
• textarea : champ de saisie multiligne
• wysiwyg : éditeur de texte visuel
• image : fichier image de la médiathèque
• fichier : fichier quelconque de la médiathèque
• select : champ de liste déroulante
• color : couleur hexadécimale
• date : date au format dd/mm/YYYY
• datetime : date au format dd/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 et sstitre, seuls les champs texte1 et texte15 sont disponibles
• seul le fichier config.xml est disponible, les templates sont dans le répertoire theme/fr/widgets/blog/, en fonction des widgets utilisés

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.

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 simple
• textarea : champ de saisie multiligne
• wysiwyg : éditeur de texte visuel
• image : fichier image de la médiathèque
• fichier : fichier quelconque de la médiathèque
• select : champ de liste déroulante
• color : couleur hexadécimale
• date : date au format dd/mm/YYYY
• datetime : date au format dd/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.

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 obligatoire
• index.html : contient le code HTML du type. Ce fichier est obligatoire
• structure.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 fichiers index.html et structure.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épertoire theme/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.

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

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.

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.

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 -->

Bloc main.page.separateur

Le contenu du bloc s'affiche tout le temps sauf pour la dernière page du chemin

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&eacute; !</title>
</head>
<body>
  <h1>{site_nom} est actuellement fermé !</h1>
  <a href="{acces_front}">Acc&eacute;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.

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.