Guide du Webdesigner

Généralités

Kiubi permet de personnaliser à 100% un site, grâce à son accès aux gabarits de mise en page. Vous pourrez donc personnaliser tous les templates 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 XHTML et des CSS, un thème graphique personnalisé est donc réservé aux utilisateurs expérimentés !

Activer le thème graphique personnalisé

Première méthode (recommandée)

Pour créer un thème graphique personnalisé, rendez-vous dans la Console d'administration dans « Thèmes ». 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 « Utiliser un 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 » ou la rubrique « Préférences / Générales / Compte FTP » pour accéder à l'intégralité des fichiers du thème graphique.

Seconde méthode

Pour utiliser un thème graphique personnalisé vous devez au préalable vous connecter à votre espace FTP (les informations de connexion sont disponibles dans la rubrique « Préférences / Générales / Compte FTP »). Une fois connecté à votre espace FTP, vous devez publier les fichiers utiles à la création d'un thème graphique personnalisé dans le répertoire « theme ».

Par défaut le répertoire « theme » de votre compte FTP est vide, vous pouvez télécharger les fichiers sources de tous les thèmes graphiques standards de Kiubi dans la rubrique « Thèmes ».

Décompressez le fichier téléchargé avec un logiciel de décompression (7zip, Winzip, Winrar, ...) puis publiez les fichiers directement dans le répertoire « theme » de votre compte FTP.

L'arborescence des fichiers

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

Prérequis

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="Shiroi">
        <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.

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 d'un thème graphique personnalisé

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
├── billets/                              Répertoire des types de billets
│   ├── post_2_col/                       Chaque répertoire correspond à un type de billet et
│   ├── post_img_left/                    contient ses propres fichiers
│   ├── post_img_right/                    
│   └── post_simple/
│       ├── config.xml 
│       └── index.html 
├── images/                               Répertoire des images (hors médiathèque)
├── includes/                             Répertoire des fichiers includes
├── 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
│       └── style.css
├── templates/                            Répertoire des templates principaux
│   ├── 1_colonne/                        Chaque répertoire contient tous les templates principaux
│   ├── 2_colonnes_droite/                du thème. Chaque répertoire (ici: 2_colonnes_droite et 
│   ├── 2_colonnes_gauche/                2_colonnes_gauche) correspond à un template et 
│   │   ├── desc.xml                      contient ses propres fichiers.
│   │   ├── illustration_2col.gif
│   │   ├── index.html
│   │   ├── layout.css
│   │   ├── 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 balises

Définition

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. Exemple : {titre}

Kiubi utilise des ensembles de fichiers HTML (des modèles graphiques) 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, ... Elles sont pour ainsi dire omniprésentes. Tous les modèles graphiques 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, ...),
  • 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 de modèle de mise en page 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.

Avertissement : une balise utilisée dans un widget, n'est pas forcément utilisable dans un autre ou dans tous les widgets. A chaque widget ses balises !

Les balises globales

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

Liste des balises globales

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 le 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 : {balise|site_nom} affiche "{site_nom}".

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 : {FILE "/fr/includes/copyright.html"}

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 {mois_abrev_maintenant} que {mois_maintenant|left|3} car la découpe se fait plus intelligemment pour les mois en quatre lettres.

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 : {GET.id} affiche la valeur du paramètre GET "id".

POST.*

Affiche la valeur d'un paramètre POST de la page. Exemple : {POST.id} affiche la valeur du paramètre POST "id".

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.

Les filtres

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

Filtres disponibles

FiltreDescription
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 {texte10} est "actif", {texte10|mapValue|active} affiche "active".

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.

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

Avertissement ! un même bloc ne peut pas être répété deux fois dans le même fichier !
Avertissement ! un bloc qui est utilisé dans un widget, n'est pas forcément utilisable dans un autre ou dans tous les widgets. A chaque widget ses blocs !
Avertissement ! 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. Si vous créez ou modifiez un modèle graphique et que rien ne s'affiche dans votre site, pensez à vérifier ce bloc.
De même, tout ce qui est en dehors du bloc <!-- BEGIN:main --> <!-- END:main --> est ignoré par Kiubi !

Définition

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, ... Lors de l'ouverture d'un site, Kiubi vous propose par défaut 4 types de billets différents dans le service Site web :

  • Titres et texte.
  • Titres, texte et image à gauche.
  • Titres, texte et image à droite.
  • Titre et texte sur 2 colonnes.

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

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, ...), 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 le widget "Contenu de la page libre" qui est utilisé 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 six types de champ :

  • text : champ de saisie simple
  • textarea : champ de saisie multiligne
  • select : champ de liste déroulante
  • wysiwyg : éditeur de texte visuel
  • image : fichier image de la médiathèque
  • fichier : fichier quelconque de la médiathèque

Le champ « liste »

Le champ de type « select » se comporte comme une liste déroulante classique. Il est construit 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>

Le contenu de l'attribut value est stocké dans le champ texte2. Le label n'est affiché que dans le détail du billet dans la console d'administration.

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.

Définition

Un billet permet d'ajouter du contenu à un billet du Blog. Lors de l'ouverture d'un site, Kiubi vous propose par défaut 2 types de billets différents dans le service Site web :

  • Billet simple.
  • Fichier joint.

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

Le principe de fonctionnement d'un type billet du Blog est très simple. Tous les types de billets de votre site sont regroupés dans le répertoire « theme/fr/billets_blog/ » 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 15 champs d'information :

  • « 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, ...), 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 les widgets affichant les billet du Blog.

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>Extrait et fichier joint</desc>
    <listechamps>
        <champ champ="texte10" type="fichier" intitule="Fichier joint" />
        <champ champ="texte1" type="wysiwyg" intitule="Extrait" />
    </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 six types de champ :

  • text : champ de saisie simple
  • textarea : champ de saisie multiligne
  • select : champ de liste déroulante
  • wysiwyg : éditeur de texte visuel
  • image : fichier image de la médiathèque
  • fichier : fichier quelconque de la médiathèque

Le champ « liste »

Le champ de type « select » se comporte comme une liste déroulante classique. Il est construit 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>

Le contenu de l'attribut value est stocké dans le champ texte2. Le label n'est affiché que dans le détail du billet dans la console d'administration.

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_blog/ » et d'y copier le fichier « config.xml » correspondant à votre nouveau type de billet. Le nouveau type de billet sera alors automatiquement proposé dans le service Blog de la console d'administration.

Définition

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 dans le service Catalogue : « Produit simple ».

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

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, ...), 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.


Avertissement : les fichiers « index.html » et « styles.css » sont exclusivement utilisés par le widget « Détail d'un produit ».

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.

Exemple de code source

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE type SYSTEM "http://www.kiubi-admin.com/DTD/typesproduits.dtd">
    <type tri="1">
        <desc>Produit simple</desc>
        <listechamps>
            <champ champ="texte1" type="wysiwyg" intitule="Fiche technique" />
        </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 produit 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 produit qui sera repris dans la console d'administration.

La balise <listechamps> sert à déclarer tous les champs d'information supplémentaires qui seront utilisés dans ce type de produit.

Il existe alors une balise <champ> par champ qui contient les attributs suivants :

  • champ : code du champ qui sera aussi utilisé dans les templates ; 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 quatre types de champ :

  • text : champ de saisie simple
  • textarea : champ de saisie multiligne
  • liste : champ de liste déroulante
  • wysiwyg : éditeur de texte visuel
  • image : fichier image de la médiathèque
  • fichier : fichier quelconque de la médiathèque

Le champ "liste"

Le champ de type "liste" se comporte comme une liste déroulante classique. Il est construit 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>

Le contenu de l'attribut value est stocké dans le champ texte2. Le label n'est affiché que dans le détail du produit dans la console d'administration.

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.

Définition

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 ou dans un champ d'information de type image ou fichier.

Le cas particulier 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 la console d'administration rubrique « Préférences / Médiathèque » :

  • grande vignette, par défaut configurée en 350px par 350px
  • vignette, par défaut configurée en 200px par 200px
  • grande miniature, par défaut configurée en 140px par 140px
  • miniature, par défaut configurée en 80px par 80px

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

Définition

Un include permet d'inclure le contenu d'un fichier HTML dans n'importe quel autre modèle graphique.

Principe

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

Définition

Les modules regroupent 3 éléments particuliers de Kiubi :

  • La page d'erreur 404,
  • La page de fermeture du site,
  • Le chemin de navigation (ou fil d'Ariane).

Tous les modules sont regroupés dans le répertoire « /theme/fr/modules/ ».

La 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}">
<meta>
<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.

La page de fermeture du site

La page de fermeture est la page qui est affichée si le site est fermé (soit par manque de crédit, soit volontairement via la rubrique « Préférences / Générales », soit pendant les périodes de maintenance de la Plateforme).

Répertoire

theme/fr/modules/fermerture/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}">
<meta>
<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.

Le chemin de navigation

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

Par défaut, ce module est affiché via l'include {FILE "/fr/includes/chemin.html"} dans les modèles de mise en page.

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

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.

Bloc main.page.separateur

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

Définition

Les modèles de mise en page, ou templates, constituent les squelettes du site dans lesquels vont s'intégrer les Widgets. Chaque modèle de mise en page contient une structure HTML complète qui lui est propre, des feuilles de styles, des codes javascripts, ... mais également la position de chaque zone où vont se placer les Widgets.

Chaque modèle peut être utilisé pour configurer une page type dans l'édition d'un ensemble de mise en page dans la rubrique « Mises en page » de la console d'administration. Il est donc possible d'utiliser plusieurs modèles de mise en pages différents pour configurer les pages types.

Si vous utilisez un thème graphique personnalisé, vous pouvez modifier les modèles de mise en page et créer des nouveaux modèles.

Avertissement ! il est très fortement conseillé de consulter le Guide de l'utilisateur pour plus d'informations sur les ensembles de mise en pages et les pages types, au risque de ne rien comprendre à ce qui suit !

Principe

Une fois connecté à votre espace FTP, tous les modèles de mise en page sont regroupés dans le répertoire « theme/fr/templates/ ». Chacun de ces sous- répertoires est un modèle de mise en page. Un modèle contient les fichiers suivants :

  • desc.xml : permet de décrire le modèle de mise en page et déclarer les zones. Ce fichier est obligatoire.
  • illustration.gif : image qui illustre le modèle de mise en page dans la console d'administration. Ce fichier est obligatoire mais peut être renommé.
  • index.html : contient le code HTML du modèle de mise en page. Ce fichier est obligatoire.
  • layout.css : feuille de styles qui définie l'agencement des blocs principaux de mise en page du site. Ce fichier est facultatif mais il est recommandé de le conserver.
  • structure.xhtml : permet de définir la structure du modèle de mise en page 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.
  • styles.css : feuille de styles qui définie l'apparence des éléments propres au modèle de mise en page du site à lequel elle est rattachée. Ce fichier est facultatif mais il est recommandé de le conserver.

Par défaut, 3 autres fichiers sont présents dans le répertoire « theme/fr/templates/ ». Ces fichiers sont facultatifs mais il est recommandé de les conserver :

  • print.css : feuille de styles d'impression.
  • styles.css : feuille de styles principale qui définie l'apparence des éléments communs à tout le site.
  • styles_70.css : feuille de styles qui est chargée lorsqu'un internaute clique sur le bouton « Diminuer la taille du texte ».
  • styles_90.css : feuille de styles qui est chargée lorsqu'un internaute clique sur le bouton « Augmenter la taille du texte ».

Le fichier « desc.xml »

Ce fichier contient des informations descriptives du modèle de mise en page. Il permet principalement de déclarer les zones du modèle dans lesquelles pourront être insérés des Widgets.

Exemple de code source

<?xml version="1.0" encoding="iso-8859-1"?>
<modele img="illustration.gif" intitule="Modèle par défaut">
  <zones>
    <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"/>
    <zone id="contenu" colmax="3" intitule="Contenu" defaut="1" />
    <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 :

  • img : nom du fichier image qui est utilisé dans la console d'administration pour représenter ce modèle.
  • intitule : intitule du modèle de mise en page 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>. 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).
  • 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.

Le fichier « structure.xhml »

Ce fichier est une représentation schématique de la disposition des zones dans le modèle de mise en page (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 scripts ni styles. 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 modèle de mise en page qui sera affiché dans le site internet. Il est souvent accompagné dans les thèmes de Kiubi par une ou plusieurs feuilles de styles.

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}" />
  </a>
</h1>
<!-- END:logo_site --> 

<!-- BEGIN:accroche_site-->
<h2><a href="{racine}/" title="{accroche_site}">{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 <meta name="canonical"> correspondant à l'url canonique de la page courante

metaRobots

Insère la balise de désindexation automatique des pages sans valeur sémantique comme les résultats de recherche ou les paginations <meta name="robots" content="noindex, follow">.

title

Insère le titre de la page <title>. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page.

metaKeywords

Insère les mots clés de la page <meta keywords>. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page.

metaDescription

Insère la description de la page <meta description>. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées 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 <head> de la page. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page.

js_body

Insère du javascript destiné à être exécuté juste avant la fermeture de la balise <body> de la page. A configurer dans "Mon compte / Préférences / Metas par défaut" ou dans les options avancées de la page.

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

JavascriptsOnLoad

Insère les javascripts nécessaires au bon fonctionnement des Widgets et des modules, si besoin.

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 l'accroche" est activée dans "Apparence / Bloc-marque".

<!-- BEGIN:desc_site--> <!-- END:desc_site-->

Le bloc s'affiche si l'option "Afficher la description" est activée dans "Apparence / Bloc-marque".

<!-- BEGIN:logo_site--> <!-- END:logo_site-->

Le bloc s'affiche si l'option "Afficher le logo" est activée dans "Apparence / Bloc-marque".

Le moteur de recherche

Il est possible d'intégrer un moteur de recherche dans un modèle de mise en page.

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

Ajouter un nouveau modèle de mise en page

Pour ajouter un nouveau modèle de mise en page, 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 modèle. Le nouveau modèle sera alors automatiquement proposé dans l'édition d'un ensemble de mise en page de la console d'administration.

Définition

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 par Widgets et dans quelles conditions les utiliser. La compréhension de ces différentes informations (paramètres + configurations + balises) 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

Blog

Catalogue

Commandes

Gestion de compte

Modules (Communication)

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
  • Fragment de template

Personnalisation

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 modèle graphique (template HTML et CSS) qui le compose.

Modifier le modèle graphique d'un widget

Si vous utilisez un thème graphique personnalisé, vous pouvez éditer et modifier le modèle graphique, c'est-à-dire les fichiers HTML et CSS 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 modèles graphiques supplémentaires à un widget

Un même Widget peut avoir plusieurs modèles graphiques, c'est-à-dire qu'il peut avoir plusieurs apparences différentes.

Pour ajouter un modèle graphique à 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/ou 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 l'Apparence de la Console d'administration de Kiubi.

Il est donc possible, avec le même Widget, d'avoir non seulement plusieurs paramétrages et configurations possibles mais en plus, chaque Widget peut avoir une infinité d'apparences différentes !

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 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:nav1 ou nav2 -->

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

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

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.

La liste ci-dessous présente les différentes balises disponibles au sein du bloc <!-- BEGIN:suivant -->

lien_suivant

URL vers la page suivante.