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

Publié le : 24 octobre 2025

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épendant peuvent ne plus fonctionner !

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

• les charger et les rendre disponible, aux autres composants et au template) via leur namespace. Les composants sont alors utilsables comme s'ils avaient étés importés dans le modèle (template) ou 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 chacuns des composants :

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

Publié le : 24 octobre 2025

Ce composant permet de déclarer des hook : une zone dans le template qui conteindra 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 sont identifiant. Soit de facç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'entete d'un contenu

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

Il est possible de configurer un délcenchement 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é dans un même autre contenu enregistre une hook, alors cette hook sera presente 2 fois au deuxièle block, 3 fois au troisème, ... Le paramètre "renderOnce":true permet d'éviter cette acumation car dès que la hook effectue le rendu, cette hook est supprimée. Les autre blocks peuvnt alors à nouveau l'ajouter (en précisant à nouveau "renderOnce":true ce qui fait que la hook est en faite ajouté au début du traitement du contenue, puis rendue, puis supprimée).

Publié le : 26 octobre 2025

Ce composant permet d'afficher sous forme d'un bloque (inlut 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é 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 personalisé 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 cette attribut est utilisé pour l'affichage du contenu. LE comportement est assez simillaire à un modèle (template) mais uniquement pour une partie de la page. Un subTemplate est prévue pour être inclut à l'intérieur d'un modèle (en général le modèle org_openCiLife_post).

Le composant bloque définie des hooks, permettant d'ajuter du contenue à un bloque.

Publié le : 26 octobre 2025

Ce composant permet d'inclure des contenues dans un autre contenu. Il est assez simillaire 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 contenue 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.

Personalisation :

• specificClass permet d'ajouter une classe spécific pour permetre la personalisation de l'affichage (via le CSS).
• title : permet de personaliser le titre de la section.
• hooks : permet d'ajouter des contenu via les Hooks interne du composant, par exemple pour activer les formulaire et les block dans les sous-contenus :

"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é 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ée à 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é 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 fficher sous forme d'une petite carte.
• display.content
  • modal : Un bouton est affiché permetant 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 modal apparait 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é

Des exmples des différentes combinaisons sont diponibles : subContent_exemples/735_composant_subContent_exemples.html

Les autres attributs :

includeContent.display.columns : liste des colonnes du tableau a afficher. Le format d'un colone 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 permetant de fermer la fenêtre modal.

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

Publié le : 26 octobre 2025

Ce composant permet d'intégrer BootStrap (version3) ainsi que JQuery 1.11.1. Les fichier CSS et JS du composant doivent être intégré manuellement dans le fichier de configuration. Les fichiers sont automatiquement disponible 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 : 03 novembre 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 etre présent dans le menu
• site.menu.includeCategories=homepage: indique les catégories des contenus qui devront etre présent dans le menu

Il est possible de désactivier 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 novembre 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 etre affiché par defaut
• site.breakcrumb.seprator=>> : indique le séparateurs à utiliser entre les différents élément.

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

Ce composant permet d'afficher un carousel 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":"<h3>bob</h3><p>un texte</p>", "captionStyle":"color:black", "alt":"Une image", "style":"margin:auto;height:60%"}, {"type":"text", "caption":"<h3>Juste un texte sans images</h3><p>Et un peu de texte en plus qui prend un maximum de place pour voire ce que ca donne</p><p>avec un deuxième paragraphe</p>", "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é 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 à appliuer 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 novembre 2025

Ce composant permet d'aficher 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 leur language.
• 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 : sont code (local), sont label, un icon et le sous dossier du site contenant la page principal (index) de cette langue.

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

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

Publié le : 03 novembre 2025

Ce composant permet d'aficher des actions à l'intérieur des contenu (par exemple des bouton : 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éparties 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éfini l'opaation à appliquer lorsque l'utilsiateur 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écéiste 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 novembre 2025

Ce composant permet d'aficher des petit infos dans les contenu.

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":"<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' background-color='currentColor'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'></path><path d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'></path></svg>"}]}

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

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

Hook

Nécéiste 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}]}