WebLeger : générateur de site eco-conçu

Ce composant permet d'inclure d'autres composants dans les templates.
Il se configure via le fichier de configuration.

components={"data":[{"file":"components/logHelper/logHelper.ftl"}, {"file":"components/commonHelper/commonHelper.ftl"}, {"file":"components/propertiesHelper/propertiesHelper.ftl"}, {"file":"components/includes/includes.ftl"}, ....

• file : emplacement du fichier contenant le composant
• namespace : alias pour accéder au composant. Attention cela remplace l'alias recommandé par le composant. D'autres composants dépendants peuvent ne plus fonctionner !

Il a aussi à charge de gérer les composants (qui sont des éléments incluables dans les templates) notamment :

• les charger et les rendre disponibles, aux autres composants et au template via leur namespace. Les composants sont alors utilisable comme s'ils avaient été importés dans le modèle (template) ou dans les composants.
• Appeler leur fonction init().
• Leur passer le contenu si le composant déclare "contentChainBefore":true dans leur getComponnentInfo.

Ce composant permet aussi d'afficher la documentation de chacun des composants :

• subTemplate buildAllComponnentsInfos : affiche le détail de tous les composants définis dans le fichier de configuration avec le paramètre components
• subTemplate : buildComponnentInfos : affiche le détail d'un seul composant. Utilise l'attribut d'entête de contenu documentationComponent pour déterminer le composant à afficher.

Publié le : 24 October 2025

Ce composant permet de déclarer des hook : une zone dans le template qui contiendra du contenu déclaré par d'autres composants.

<#if hookHelper??>
	<@hookHelper.hook "topMenuContainer" content/>
</#if>

Le composant hooks permet d'ajouter du contenu dans une hook via son identifiant. Soit de façon globale : via le fichier de configuration

webleger.hooks={"data":[{"position":"afterBody", "action":"langHelper.build"}, {"position":"afterBody", "action":"form.build"}, ...

soit dans un contenu spécifique via les attributs d'entête d'un contenu

hooks={"data":[{"position":"afterBody", "action":"commonInc.buildComponnentInfos"}]}

Il est possible de configurer un déclenchement du rendu d'une hook de façon unique (pour la page en cour). Cela est pratique dans le cas d'une hook qui serait présent plusieurs fois dans une page, mais pour lequel on ne souhaite la déclencher qu'une fois.
Par exemple avec le composant block si plusieurs blocks intégrés dans un même autre contenu enregistre une hook, alors cette hook sera présente 2 fois au deuxième block, 3 fois au troisième, ... Le paramètre "renderOnce":true permet d'éviter cette accumulation, car dès que la hook effectue le rendu, cette hook est supprimée. Les autres blocks peuvent alors à nouveau l'ajouter (en précisant à nouveau "renderOnce":true ce qui fait que la hook est en fait ajouté au début du traitement du contenu, puis rendue, puis supprimée).

Publié le : 24 October 2025

Ce composant permet d'afficher sous forme d'un bloque (inclus dans une page) un contenu. Cela est particulièrement utile pour les site "onePage", ou la page d'accueil.
Chaque élément de la page est créé dans un contenu (fichier MarkDown). Les blocks sont ensuite ajoutés dans une page.
Pour n'afficher que certains bloques dans une page les blocks peuvent être filtré par catégorie.

Il est parfois utile de personnaliser l'affichage d'un bloque (position de l'image, ...), le composant block gère l'attribut d'entête de contenue subTemplate. La valeur de cet attribut est utilisée pour l'affichage du contenu. Le comportement est assez similaire à un modèle (template) mais uniquement pour une partie de la page. Un subTemplate est prévue pour être inclus à l'intérieur d'un modèle (en général le modèle org_openCiLife_post ou org_openCiLife_block).

Attributs

• category : category pour filtrer les blocks
• displayTitle : (default : true) affichage du titre du block
• titleTag : (default : h2) tag à utiliser pour encapsuler le titre

Le composant block définie des hooks, permettant d'ajuster du contenu à une zone du block.

Publié le : 26 October 2025

Ce composant permet d'inclure des contenus dans un autre contenu. Il est assez similaire au composant block mais *subContent sert à effectuer des listing.
Par exemple "dans la même catégorie" ou "vous pourriez aussi aimer".

Pour ajouter des sous contenu, il faut utiliser le paramètre d'entête de contenu includeContent. Voici un exemple d'utilisation :

includeContent={"type":"org_openCiLife_post", "category":"création", "specificClass":"documentation", "title":"Dans la même catégorie", "display":{"type":"card", "content":"link"}}

Choix des contenus :

• type : le type de contenu à conserver.
• category : la catégorie de contenu à conserver.

Personnalisation :

• specificClass permet d'ajouter une classe spécifique pour permettre la personnalisation de l'affichage (via le CSS).
• title : permet de personnaliser le titre de la section.
• hooks : permet d'ajouter des contenus via les Hooks internes du composant, par exemple pour activer les formulaires et les block dans les sous-contenus :
• order : (default "order") : permet de définir la clef de trie des contenues
• orderDirection : (default "ascending") : permet de définir la sens de trie des contenues
• descending ou desc : du plus grand au plus petit
• toute autre valeur : sera considéré comme ascending donc du plus petit au plus grand
• filter : (default "ascending") : permet de définir un filtre pour mimiter l'affichage des contenu, par exemple "filter":"common.isTodayOrAfter"

"hooks":{"data":[{"position":"endItemSubContent", "action":"block.build", "renderOnce":true}, {"position":"endItemSubContent", "action":"form.build", "renderOnce":true}]}, "display":{"type":"card", "content":"visible"}

Le format d'affichage des éléments :

• display.type : les formats supportés sont :
• table : les sous-contenus sont affichés sous forme d'un tableau. Chaque ligne affiche : l'image du contenu, le titre puis le résumé du contenu. Des colonnes supplémentaires peuvent être affichées à partir des attributs d'entête de chacun des sous contenu via l'attribut columns.
• link : chaque contenu est un simple lien.
• collapse_block : les sous-contenus sont affichés sous forme d'un paragraphe avec un titre, le contenu s'affiche en dessous lorsque l'utilisateur clique sur le titre. (comme dans une FaQ)
• card : chaque contenu est affiché sous forme d'une petite carte.
• display.content
• modal : un bouton est affiché permettant d'afficher le détail du contenu dans une fenêtre modal (une sorte de "popup" interne au site) s'affiche avec le contenu.
• modalLink : lorsque l'utilisateur clique, une fenêtre modale apparaît avec le détail du contenu.
• link : lorsque l'utilisateur clique sur le contenu, une nouvelle page s'affiche.
• visible : le contenu est directement intégré.
• display.subTemplate : le sous contenu sera généré par un "sous-template" personnalisé. Par exemple "display":{"type":"type", "subTemplate":"humaniPattes.partenairesCard"}
• display.displayTags : (defaut : false) : permet d'activer l'affichage des tags

Des exemples des différentes combinaisons sont disponibles : subContent_exemples/735_composant_subContent_exemples.html

Les autres attributs :

includeContent.display.columns : liste des colonnes du tableau à afficher. Le format d'une colonne est le suivant : {"name":"titre_de_la_colnne", "attr":"nom_de_l'attribut", "order":1} par exemple : {"name":"logo", "attr":"contentImage", "order":1}. nom_de_l'attribut est un attribut d'entête du contenu.

includeContent.display.closeButton : texte du bouton permettant de fermer la fenêtre modal.

includeContent.display.beforeTitleImage : image à afficher avant le titre pour les bloque de textes rétractables.

Publié le : 26 October 2025

Ce composant permet d'intégrer BootStrap (version3) ainsi que JQuery 1.11.1. Les fichiers CSS et JS du composant doivent être intégrés manuellement dans le fichier de configuration. Les fichiers sont automatiquement disponibles dans le dossier templates/components/bootstrap3/copyToAssests/noAgregation, mais ne sont pas automatiquement référencé dans le header/footer de la page.

• site.script.header : ajouter "href":"templates/components/bootstrap3/copyToAssests/noAgregation/html5shiv.min.js", "rel":"stylesheet", "constraint":"if lt IE 9"}
• webleger.site.script.footer : ajouter {"tagType":"script", "src":"templates/components/bootstrap3/copyToAssests/noAgregation/jquery-1.11.1.min.js"}, {"tagType":"script", "src":"templates/components/bootstrap3/copyToAssests/noAgregation/bootstrap.min.js"}

Publié le : 26 October 2025

Ce composant permet de créer le menu du site de façon automatique à partir des contenus. Il se configure via le fichier de configuration.

• site.menu.includeBlock=true : indique si les bloques de page d'accueil doivent être dans le menu
• site.menu.tags.include=global : indique les tags des contenus qui devront être présent dans le menu
• site.menu.includeCategories=homepage: indique les catégories des contenus qui devront être présent dans le menu

Il est possible de désactiver le menu sur une page (utile pour les Landing Page) via l'attribut d'entête de contenu displayMenu avec la valeur false.

Publié le : 03 November 2025

Ce composant permet d'afficher un fils d'ariane. Il se configure via le fichier de configuration.

• site.breakcrumb.display=true : indique si le fils d'ariane doit être affiché par défaut
• site.breakcrumb.seprator=>> : indique le séparateur à utiliser entre les différents éléments.

Chaque contenu peut définir si le fils d'ariane doit être affiché ou non (remplace la valeur par défaut du fichier de configuration.) via l'attribut d'entête de contenu : displayBreadcrumb.

Publié le : 03 November 2025

Ce composant permet d'afficher un carrousel d'images.

Il se configure via les attributs d'entête du contenu.

carouselData={"id":"HomePageCarousel","control":{"previousLabel":"Précédent", "nextLabel":"Suivant"}, "displayIndicator":true, "style":"margin:auto" "slides":[{"type":"img", "data":"images/common/logo_left.png", "caption":"bobun texte", "captionStyle":"color:black", "alt":"Une image", "style":"margin:auto;height:60%"}, {"type":"text", "caption":"Juste un texte sans imagesEt un peu de texte en plus qui prend un maximum de place pour voire ce que ca donne avec un deuxième paragraphe", "captionStyle":"color:black"}]}

• carouselData.id : id CSS du carousel.
• carouselData.control.previousLabel : texte du bouton permettant d'afficher la diapositive précédente.
• carouselData.control.nextLabel : texte du bouton permettant d'afficher la diapositive suivante.
• carouselData.control.displayIndicator : indique si les boutons de navigations sont affichés ou non.
• carouselData.slides.type : soit img soit text
• carouselData.slides.data : contenu de la diapositive (soit l'URL de l'image, soit le texte)
• carouselData.slides.caption : titre de la diapositive
• carouselData.slides.captionStyle : style CSS à appliquer au titre (caption)
• carouselData.slides.alt : texte alternatif si l'image ne s'affiche pas
• carouselData.slides.style : style CSS de la diapositive.

Publié le : 03 November 2025

Ce composant permet d'afficher le site en plusieurs langues.

Ce composant se configure via le fichier de configuation

• site.langs.default=fr_FR : langue par défaut pour les contenus ne précisant pas leur langage
• site.langs={"data":[{"local":"fr_FR", "title":"FR", "icon":"org_openCiLife_ecoWeb/images/lang/ico_fr.png", "folder":""}, {"local":"en_EN", "title":"EN", "icon":"org_openCiLife_ecoWeb/images/lang/ico_uk.png", "folder":"en"}]} : configuration des langues et pour chacune : son code (local), son label, un icône et le sous-dossier du site contenant la page principal (index) de cette langue.

Chaque contenu précise la langue dans laquelle le contenu est rédigé via l'attribut d'entête : lang. Plusieurs langues peuvent être précisé, chacune séparée par une virgule.

Pou affiche le sélecteur de langue, il faut créer un contenu avec un attribut d'entête de document : languageSwitcher=true.

Publié le : 03 November 2025

Ce composant permet d'afficher des actions à l'intérieur des contenus (par exemple des boutons : Call To Action).

Ce composant se configure via l'entête de contenu :

• action={"disposition":"center", "specificClass":"cta", "data":[{"type":"button", "label":"Commencer gratuitement", "specificClass":"btn-primary", "operation":{"type":"anchor", "to":"lp_start"}}, {"type":"button", "label":"Découvrir les fonctionnalités", "operation":{"type":"anchor", "to":"lp_fonctionalities"}}]}

• action.disposition : indique comment les boutons sont répartis entre eux. Valeurs possibles : center.

• action.specificClass : permet de définir une (ou plusieurs) classe CSS à appliquer au groupe d'actions.
• action.data : liste des actions.
• action.data.type : type d'action. Valeurs possibles : button.
• action.data.label : texte affiché pour l'action.
• action.data.operation : définis l'opération à appliquer lorsque l'utilisateur inter-agit (clique) avec l'action.
• action.data.operation.type : type d'opération à effectuer. Valeurs possibles : anchor, link, mailto.
• action.data.operation.to : destination de l'action.
• action.data.operation.obfuscationMask : (optionnel) si défini le label sera décodé avec le masque présent.

Hook

Nécessite la configuration d'une hook pour s'afficher. La hooks précisera où le sticker devra s'afficher.
Voici un exemple pour un block, en affichant les stickers juste après le contenu du block (et avant les autres contenu par defaut dans cette hook).

hooks={"data":[{"position":"afterBlockBody", "action":"action.build", "renderOnce":true, "order":30}]}

Publié le : 03 November 2025

Ce composant permet d'afficher des petites infos dans les contenus.

Ce composant se configure via l'entête de contenu :

• stickers={"disposition":"center", "data":[{"label":"CMS Open Source & Éco-conçu", "imageSpecificClass":"impact_img", "image":""}]}

• stickers.disposition : indique comment les stickers sont répartis entre eux. Valeurs possibles : center, right.

• stickers.specificClass : permet de définir une (ou plusieurs) classe CSS à appliquer au groupe de stickers.
• stickers.data : liste des stickers.
• stickers.data.label : texte affiché pour le sticker.
• stickers.data.image : (optionnel) image du sticker : soit une URL soit un SVG inline.
• stickers.data.imageSpecificClass : classe CSS à ajouter pour l'image.
• stickers.data.specificClass : classe CSS à ajouter pour le sticker (image + texte).

Hook

Nécéssite la configuration d'une hook pour s'afficher. La hooks précisera où le sticker devra s'afficher.
Voici un exemple pour un block, en affichant les stickers juste avant le contenu du block

hooks={"data":[{"position":"beforeBlockBody", "action":"sticker.build", "renderOnce":true}]}

Publié le : 03 November 2025

Ce composant permet de collecter des statistiques d'utilisation du site (pages vues) de façon non intrusive et respectant les données privées des visiteurs.

Pour l'utiliser, il faut une clef (gratuite) que l'on peut obtenir ici : https://fairlytics.tech/.

Ce composant se configure via le fichier de configuration :
webleger.component.fairlytics.key=votre_clef

Publié le : 04 February 2026

Ce composant permet d'afficher des informations provenant d'un compte FaceBook.

Ce composant se configure via le fichier de configuration.

• webleger.component.meta.dev.key= : votre clef facebook Developer
• webleger.component.meta.dev.sdk.version=v2.7 : version du SDK à utiliser
• webleger.component.meta.facebook.container.url=https://www.facebook.com/{Your_company}/ : URL de votre page FaceBook
• webleger.component.meta.facebook.container.name={Your_company} : nom du container
• webleger.component.meta.facebook.container.width.mobile=300 : largeur en version mobile
• webleger.component.meta.facebook.container.height.mobile=400 : longeur en version mobile
• webleger.component.meta.facebook.container.width.desktop=500 : largeur en version ordinateur
• webleger.component.meta.facebook.container.height.desktop=500 : longeur en version ordinateur

Pour activer le composant, il faut ajouter en attribut d'entête du contenu une hook par exemple :

• pour les actualités : hooks={"data":[{"position":"afterBlockBody", "action":"facebook.buildNews", "renderOnce":true, "order":25}]}
• pour les événements : hooks={"data":[{"position":"afterBlockBody", "action":"facebook.buildEvent", "renderOnce":true, "order":25}]}

Publié le : 04 February 2026

Ce composant permet d'afficher des informations légales.

Ce composant se configure via le fichier de configuration et les attributs webleger.site.legal.*.

Pour activer le composant, il faut ajouter en attribut d'entête du contenu :

• legalPage=true : pour afficher les mentions légales
• category=cgv : pour les Conditions Générales de Ventes. La valeur cgv peut être modifié via le fichier de configuration : webleger.site.legal.cgv.category

Publié le : 07 February 2026

Ce composant permet d'afficher une table des matières pour les block inclut dans la page.

Ce composant se configure via un attribut d'entête de contenu par exemple

toc={"title":"Table des matières : Les composants", "subTemplate":"blockTocSelectSubTemplate"}

• title : (default "") : titre de la table des matières
• subTemplate : (default "defaultTocSubTemplate" => "blockTocUlLiWithLinkSubTemplate") : macro affichant la Table des Matières (d'autre macros peuvent être ajoutées)
  • blockTocUlLiWithLinkSubTemplate : affichage sous forme de liste BulletPoint avec lien
  • blockTocSelectSubTemplate : affichage sous forme d'un menu déroulant (avec lien)

Publié le : 22 February 2026

Ce composant permet d'afficher la définition de mots présents dans les contenus (body) des contenus.

Ce composant se configure via le fichier de configuration en indiquant la liste des mots et de leur définition : webleger.component.glossary.terms.
Il est possible de désactiver le glossaire sur un contenu spécifique en indiquant dans les données d'entête du contenu :
enableGlossary=false.

Voici un exemple :

{"data":[\
{"term":"mobile|optimisé","def":"Tépéhonne portable"}, \
{"term":"ordinateur","def":"Un ordinateur fixe (avec un grand écran) et une définition très longue. Et un retour à la ligne. et un titre (3) en HTML.  Un saut de ligne. Un paragraphe (en html)", "specificClassDef":"large"}\
]}

• term : le mot à rechercher pour ajouter la définition. Il est possible de préciser plusieurs mots séparés par l'opérateur "|". La recherche est sensible à la case.
• def : la définition à afficher. Le markdown n'est pas interprété, il faut utiliser du HTML si de la mise en forme est nécessaire.
• specificClassTerm : (optionnel, vide par défaut) permet d'ajouter une classe CSS au mot lorsqu'il est trouvé.
• specificClassDef : (optionnel, vide par défaut) permet d'ajouter une classe CSS à la définition. La classe "large" est disponible pour les définitions longues. N'importe quel autre classe CSS peut être utilisée.

Publié le : 25 March 2026

Ce composant permet d'afficher un calendrier. Supporte l'intégration de calendrier Google.

Ce composant se configure via une entête de contenu :
calendar={"calendarId":"your_calendar_id"}.

• calendarId : identifiant du calendrier.
• width : (optionnel : défaut : valeur du fichier de configuration) : largeur du composant.
• height : (optionnel : défaut : valeur du fichier de configuration) : hauteur du composant.
• provider : (optionnel, défaut : "Google") fournisseur du calendrier, valeur autorisée : "", Google.
• variant : (optionnel, défaut : "OnlyOneCalendar") permet d'intégrer le calendrier de différentes manières. Dépendant du provider. Pour Google : les valeurs autorisées sont : "", "OnlyOneCalendar", "Custom".
• timeZone : (optionnel, défaut : "Europe%2FParis") Fuseau horraire du calendrier.

Il y a aussi de la configuration dans le fichier de configuration. Voici un exemple :

webleger.component.calendar.container.width.mobile=350
webleger.component.calendar.container.height.mobile=450
webleger.component.calendar.container.width.desktop=800
webleger.component.calendar.container.height.desktop=600

Publié le : 20 March 2026

Ce composant permet d'effectuer des paiemnt en ligne via la platefor stripe.

Ce composant se configure via une entête de contenu :
stripe={"productId":"your_button_id"}.

• productId : Identifiant du bouton ("payement link").

Il aussi ajouter une hook pour placer le bouton dans le contenu par exemple :
hooks={"data":[{"position":"endItemSubContent", "action":"stripe.build", "renderOnce":true, "order":30}]}

Il y a aussi de la configuration dans le fichier de configuration qui permet de définir la clef d'API (soit de TEST soit de PROD). Il est recommandé de configuré la clef d'API via les paramètre des builds eclipse.

Voici un exemple :

webleger.component.stripe.apiKey=Your_Stripe_API_KEY

Publié le : 29 April 2026