Il existe trois types de templates, layouts, components et autres templates : layouts sont utilisés pour afficher les pages, et chacun d'eux peut inclure des templates et components.
\nLes fichiers templates sont stockés dans le répertoire layouts/ et doivent être nommés selon la convention suivante :
layouts/(<section>/)<type>|<layout>.<format>(.<language>).twig<section> (facultatif)blog).<type>home (ou index) pour homepage, list pour list, page pour page, etc. (Voir Règles de recherche pour plus de détails).<layout> (facultatif)layout: my-layout).<format>html, rss, json, xml, etc.).<language> (facultatif)fr).Exemples :
\nlayouts/home.html.twig # `type` est \"homepage\"\nlayouts/page.html.twig # `type` est \"page\"\nlayouts/page.html.fr.twig # `type` est \"page\" et `language` est \"fr\"\nlayouts/my-layout.html.twig # `layout` est \"my-layout\"\nlayouts/blog/list.html.twig # `section` est \"blog\"\nlayouts/blog/list.rss.twig # `section` est \"blog\" et `format` est \"rss\"<mon-site>\n├─ ...\n├─ layouts\n| ├─ index.html.twig # Utilisé par le type \"homepage\"\n| ├─ list.html.twig # Utilisé par les types \"homepage\" et \"section\"\n| ├─ list.rss.twig # Utilisé par les types \"homepage\" et \"section\", pour le format de sortie RSS\n| ├─ page.html.twig # Utilisé par le type \"page\"\n| ├─ taxonomy\n| | ├─ tags.html.twig # Utilisé par le type \"vocabulary\" de `tags` (liste des termes)\n| | └─ tag.html.twig # Utilisé par le type \"term\" de `tags` (liste des pages)\n| ├─ my-layout.html.twig # Utilisé par les pages avec `layout: my-layout` dans le front-matter\n| ├─ ...\n| └─ partials\n| ├─ footer.html.twig # Template inclus\n| └─ ...\n└─ themes # Layouts et templates des thèmes\n └─ ...Cecil est livré avec un ensemble de templates intégrés.
\n\nDans la plupart des cas vous n'avez pas besoin de préciser la layout : Cecil sélectionne la layout la plus appropriée, en fonction du type de la page.
\nPar exemple, la sortie HTML de home page (index.md) sera rendue :
my-layout.html.twig si la variable layout est définie sur \"my-layout\" (dans le préambule)index.html.twig si le fichier existehome.html.twig si le fichier existelist.html.twig si le fichier existeToutes les règles sont détaillées ci-dessous, pour chaque type de page, par ordre de priorité.
\n<layout>.<format>.twigindex.<format>.twighome.<format>.twiglist.<format>.twig_default/<layout>.<format>.twig_default/index.<format>.twig_default/home.<format>.twig_default/list.<format>.twig_default/page.<format>.twig<section>/<layout>.<format>.twig<layout>.<format>.twig<section>/page.<format>.twig_default/<layout>.<format>.twigpage.<format>.twig_default/page.<format>.twig<layout>.<format>.twig<section>/index.<format>.twig<section>/list.<format>.twigsection/<section>.<format>.twig<parent>/index.<format>.twig, <parent>/list.<format>.twig et section/<parent>.<format>.twig, pour chaque section parente d’une sous-section (la plus proche en premier)_default/section.<format>.twiglist.<format>.twig_default/list.<format>.twigtaxonomy/<plural>.<format>.twigvocabulary.<format>.twig_default/vocabulary.<format>.twigtaxonomy/<plural>/<term>.<format>.twigtaxonomy/<singular>.<format>.twigterm.<format>.twig_default/term.<format>.twig_default/list.<format>.twig\n\nFonctions peut être appelée pour générer du contenu. Les fonctions sont appelées par leur nom suivi de parenthèses (
\n()) et peuvent avoir des arguments.
Crée une URL valide pour une page, une entrée de menu, un actif, un ID de page ou un chemin.
\n{{ url(value, {options}) }}| Options | \nDescriptif | \nTapez | \nPar défaut | \n
|---|---|---|---|
| canonique | \nPréfixez l'URL avec baseurl ou utilisez canonical.url s'il existe. | \nbooléen | \nfalse | \n
| formats | \nDéfinit la page format de sortie (par exemple : json). | \nchaîne | \nhtml | \n
| langue | \nDéfinit la page langue (ex. : fr). | \nchaîne | \nnul | \n
Exemples :
\n{# page #}\n{{ url(page) }}\n{{ url(page, {canonical: true}) }}\n{{ url(page, {format: json}) }}\n{{ url(page, {language: fr}) }}\n{# menu entry #}\n{{ url(site.menus.main.about) }}\n{# asset #}\n{{ url(asset('styles.css')) }}\n{# page ID #}\n{{ url('page-id') }}\n{# path #}\n{{ url('about-me/') }}\n{{ url('tags/' ~ tag) }}Crée un élément HTML à partir d'un actif (ou d'un tableau d'actifs avec des attributs personnalisés).
\n{{ html(asset, {attributes}, {options}) }}\n{# dedicated functions for each common type of asset #}\n{{ css(asset) }}\n{{ js(asset) }}\n{{ image(asset) }}\n{{ audio(asset) }}\n{{ video(asset) }}| Options | \nDescriptif | \nTapez | \n
|---|---|---|
| attributs | \nAjoute le couple name=\"value\" à l'élément HTML. | \ntableau | \n
| options | \n{preload: boolean} : préchargements.Pour les images : {formats: array} : ajoute des formats alternatifs.{responsive: bool|string} : ajoute des images réactives (basées sur width ou des pixels density).{placeholder: string} : remplit l'arrière-plan de l'image avant son chargement (color ou lqip). | \ntableau | \n
Exemples :
\n{# CSS with an attribute #}\n{{ html(asset('print.css'), {media: 'print'}) }}\n{# CSS with an attribute and an option #}\n{{ html(asset('styles.css'), {title: 'Main theme'}, {preload: true}) }}\n{# Array of assets with media query #}\n{{ html([\n {asset: asset('css/style.css')},\n {asset: asset('css/style-dark.css'), attributes: {media: '(prefers-color-scheme: dark)'}}\n]) }}\n{# JavaScript #}\n{{ html(asset('script.js')) }}\n{# image without specific attributes nor options #}\n{{ html(asset('image.png')) }}\n{# image with specific attributes, responsive images and alternative formats #}\n{{ html(asset('image.jpg'), {alt: 'Description', loading: 'lazy'}, {responsive: true, formats: ['avif', 'webp']}) }}\n{# image with responsive pixels density images #}\n{{ html(asset('image.jpg'), options={responsive: 'density'}, attributes={width: 256}) }}\n{# image with a Low-Quality Image Placeholder #}\n{{ html(asset('image.jpg'), {alt: 'Description', loading: 'lazy'}, {placeholder: 'lqip'}) }}\n{# Audio #}\n{{ html(asset('audio.mp3')) }}\n{# Video #}\n{{ html(asset('video.mp4')) }}Détermine le temps de lecture d'un texte, en minutes.
\n{{ readtime(value) }}Exemple:
\n{{ readtime(page.content) }} minCalcule le hachage d'un objet, d'un tableau ou d'une chaîne avec un algorithme donné.
\n{{ hash(value, algorithm) }}algorithm peut être n'importe quel algorithme pris en charge par la fonction hash() de PHP (par exemple : md5, sha256, etc.). La valeur par défaut est xxh128.
Exemple:
\n{{ hash('my string', 'sha256') }}Calcule une clé de cache pour fragments cache en fonction d'un nom et d'une valeur facultative.
\n{% cache cache_key(name, value) %}\n {# cacheable content #}\n{% endcache %}La fonction ajoute un hachage de la valeur (peut être une chaîne, un tableau ou un objet) au nom (ainsi que la langue actuelle et l'ID de build pour être sûr que la clé de cache générée est unique), donc si la valeur est modifiée, la clé de cache est également modifiée et le cache est automatiquement vidé.
\nObtient la valeur d'une variable d'environnement à partir de sa clé.
\n{{ getenv(var) }}Exemple:
\n{{ getenv('VAR') }}La fonction dump affiche les informations sur une variable de modèle. Ceci est surtout utile pour déboguer un modèle qui ne se comporte pas comme prévu en introspectant ses variables :
{{ dump(user) }}La fonction d() est la version HTML de dump() et utilise le Symfony VarDumper Component en arrière-plan.
{{ d(variable, {theme: light}) }}\n\nL'application transmet des variables aux templates pour manipulation dans le modèle. Les variables peuvent également avoir des attributs ou des éléments auxquels vous pouvez accéder.\nUtilisez un point (.) pour accéder aux attributs d'une variable :
\n{{ foo.bar }}
Vous pouvez utiliser des variables de différentes portées : site, page, cecil.
La variable site contient des variables intégrées et celles définies dans la configuration.
| Variables | \nDescriptif | \n
|---|---|
site.pages | \nCollection de toutes les pages, dans la langue actuelle. | \n
site.allpages | \nCollection de toutes les pages, dans toutes les langues. | \n
site.page(id) | \nUne page avec l'ID donné. | \n
site.taxonomies | \nRecueil de vocabulaires. | \n
site.home | \nID de la page d'accueil. | \n
site.time | \nActuel Timestamp. | \n
site.debug | \nÉtat du mode débogage (true ou false). | \n
site.build | \nID de build actuel. | \n
Exemple:
\ntitle: \"My amazing website!\"Peut être affiché dans un modèle avec :
\n{{ site.title }}Bouclez sur site.menus.<menu> pour obtenir chaque entrée de la collection <menu> (par exemple : main).
| Variables | \nDescriptif | \n
|---|---|
<entry>.name | \nNom de l'entrée. | \n
<entry>.url | \nURL d'entrée. | \n
<entry>.weight | \nPoids d'entrée (utile pour trier les entrées de menu). | \n
Exemple:
\n<nav>\n <ol>\n {% for entry in site.menus.main|sort_by_weight %}\n <li><a href=\"{{ url(entry.url) }}\" data-weight=\"{{ entry.weight }}\">{{ entry.name }}</a></li>\n {% endfor %}\n </ol>\n</nav>Informations sur la langue actuelle.
\n| Variables | \nDescriptif | \n
|---|---|
site.language | \nCode de langue (ex. : en). | \n
site.language.name | \nNom de la langue (par exemple : English). | \n
site.language.locale | \nLangue code local (par exemple : en_US). | \n
site.language.weight | \nPosition de la langue dans la liste languages. | \n
La collection de fichiers statiques est accessible via site.static si le static load est activé.
Chaque fichier expose les propriétés suivantes :
\npath : chemin relatif (ex. : /images/img-1.jpg)date : date de création (timestamp)updated : date de modification (timestamp)name : nom (ex. : img-1.jpg)basename : nom sans extension (ex. : img-1)ext : poste (ex. : jpg)type : type de média (ex. : image)subtype : sous-type de média (ex. : image/jpeg)exif : données EXIF de l'image (array)audio : Mp3Info objetvideo : tableau d'informations vidéo de base (durée en secondes, largeur et hauteur)Une collection de données est accessible via site.data.<filename> (sans extension de fichier).
Exemples :
\ndata/authors.yml : site.data.authorsdata/authors.fr.yml : site.data.authors (si site.language = \"fr\")data/galleries/gallery-1.json : site.data.galleries['gallery-1']La variable page contient les variables intégrées d'une page et celles définies dans le avant-plan.
| Variables | \nDescriptif | \nExemple | \n
|---|---|---|
page.id | \nIdentifiant unique. | \nblog/post-1 | \n
page.title | \nNom du fichier (sans extension). | \nPost 1 | \n
page.date | \nDate de création du fichier. | \nDateHeure | \n
page.body | \nCorps du fichier. | \nMarquage | \n
page.content | \nCorps du fichier converti en HTML. | \nHTML | \n
page.section | \nDossier racine du fichier (slugified). | \nblog | \n
page.path | \nChemin du fichier (slugified). | \nblog/post-1 | \n
page.slug | \nNom du fichier (slugified). | \npost-1 | \n
page.filepath | \nChemin du système de fichiers. | \nBlog/Post 1.md | \n
page.type | \nhomepage, page, section, vocabulary ou term. | \npage | \n
page.pages | \nCollection de toutes les sous-pages. | \nCollection | \n
page.translations | \nCollection de pages traduites. | \nCollection | \n
Dans un contexte de sections imbriquées, les propriétés page.parent, page.ancestors, page.sections et page.toplevel facilitent la construction de la navigation.
| Variables | \nDescriptif | \nExemple | \n
|---|---|---|
page.parent | \nPage de la section parente (null si aucune). | \nPage | \n
page.ancestors | \nCollection des sections ancêtres (la plus proche en premier). | \nCollection | \n
page.sections | \nCollection des sections descendantes immédiates. | \nCollection | \n
page.toplevel | \ntrue si la page est une section de premier niveau. | \nBoolean | \n
Fil d'Ariane (de la page d'accueil à la page courante) :
\n<nav aria-label=\"breadcrumb\">\n <ul>\n <li><a href=\"{{ url(site.home) }}\">{{ site.title }}</a></li>\n {% for section in page.ancestors|reverse %}\n <li><a href=\"{{ url(section) }}\">{{ section.title }}</a></li>\n {% endfor %}\n {% if page.id != site.home %}\n <li><a href=\"{{ url(page) }}\" aria-current=\"page\">{{ page.title }}</a></li>\n {% endif %}\n </ul>\n</nav>Menu des sous-sections (sections descendantes immédiates de la section courante) :
\n{% if page.sections|length %}\n<ul>\n {% for section in page.sections|sort_by_title %}\n <li><a href=\"{{ url(section) }}\">{{ section.title }}</a></li>\n {% endfor %}\n</ul>\n{% endif %}Navigation principale limitée aux sections de premier niveau (depuis n'importe quelle page) :
\n<nav>\n {% for section in site.page(site.home).sections|sort_by_title %}\n <a href=\"{{ url(section) }}\">{{ section.title }}</a>\n {% endfor %}\n</nav>Lien vers la section parente :
\n{% if page.parent %}\n<a href=\"{{ url(page.parent) }}\">← {{ page.parent.title }}</a>\n{% endif %}Navigation entre les pages d'une même Section, triées selon le sortby de la section (ordre chronologique pour les dates).
Avec des sous-sections, la navigation suit l'arbre des sections : les pages d'une Section de premier niveau et de toutes ses sous-sections sont enchaînées, chaque sous-section (sa page d'index) étant placée parmi les pages de sa Section parente et suivie de ses propres pages.
\n| Variables | \nDescriptif | \nExemple | \n
|---|---|---|
page.prev | \nPage précédente. | \nPage | \n
page.next | \nPage suivante. | \nPage | \n
Exemple:
\n<a href=\"{{ url(page.prev) }}\">{{ page.prev.title }}</a>Paginator vous aide à créer une navigation pour les pages de la liste : page d'accueil, sections et taxonomies.
\n| Variables | \nDescriptif | \n
|---|---|
page.paginator.pages | \nCollection de pages. | \n
page.paginator.pages_total | \nNombre total de pages. | \n
page.paginator.count | \nNombre de pages du paginateur. | \n
page.paginator.current | \nIndex de position de la page actuelle. | \n
page.paginator.links.first | \nID de page de la première page. | \n
page.paginator.links.prev | \nID de page de la page précédente. | \n
page.paginator.links.self | \nID de page de la page actuelle. | \n
page.paginator.links.next | \nID de page de la page suivante. | \n
page.paginator.links.last | \nID de page de la dernière page. | \n
page.paginator.links.path | \nID de page sans l'index de position. | \n
Exemple:
\n{% if page.paginator %}\n<div>\n {% if page.paginator.links.prev is defined %}\n <a href=\"{{ url(page.paginator.links.prev) }}\">Previous</a>\n {% endif %}\n {% if page.paginator.links.next is defined %}\n <a href=\"{{ url(page.paginator.links.next) }}\">Next</a>\n {% endif %}\n</div>\n{% endif %}Exemple:
\n{% if page.paginator %}\n<div>\n {% for paginator_index in 1..page.paginator.count %}\n {% if paginator_index != page.paginator.current %}\n {% if paginator_index == 1 %}\n <a href=\"{{ url(page.paginator.links.first) }}\">{{ paginator_index }}</a>\n {% else %}\n <a href=\"{{ url(page.paginator.links.path ~ '/' ~ paginator_index) }}\">{{ paginator_index }}</a>\n {% endif %}\n {% else %}\n {{ paginator_index }}\n {% endif %}\n {% endfor %}\n</div>\n{% endif %}Variables disponibles dans les templates vocabulary et term.
\nPage /<plural>/ (ex. : /categories/).
| Variables | \nDescriptif | \n
|---|---|
page.plural | \nNom de vocabulaire au pluriel. | \n
page.singular | \nNom de vocabulaire au singulier. | \n
page.terms | \nListe de termes (Collection). | \n
Chaque terme de page.terms fournit term.id (identifiant du terme, ex. : categories/php), term.name (nom du terme, ex. : PHP) et le nombre de ses pages avec term|length.
Page /<plural>/<term>/ (ex. : /categories/php/).
| Variables | \nDescriptif | \n
|---|---|
page.title | \nNom du terme. | \n
page.term | \nIdentifiant du terme (ex. : categories/php). | \n
page.plural | \nNom de vocabulaire au pluriel. | \n
page.singular | \nNom de vocabulaire au singulier. | \n
page.pages | \nListe des pages dans ce terme, triées par date (Collection). | \n
Configuration :
\ntaxonomies:\n categories: categoryFront matter d’une page :
\n\ncategories: [\"Data Sovereignty\"]\nListe des termes (/categories/), dans layouts/taxonomy/categories.html.twig :
{% extends 'page.html.twig' %}\n\n{% block content %}\n <h1>{{ page.title }}</h1>\n <ul>\n {% for term in page.terms %}\n <li><a href=\"{{ url(term.id) }}\">{{ term.name }}</a> ({{ term|length }})</li>\n {% endfor %}\n </ul>\n{% endblock %}Liste des pages d’un terme (/categories/data-sovereignty/), dans layouts/taxonomy/category.html.twig :
{% extends 'page.html.twig' %}\n\n{% block content %}\n <h1>{{ page.title }}</h1>\n {% for p in page.paginator.pages ?? page.pages %}\n <article>\n <h2><a href=\"{{ url(p) }}\">{{ p.title }}</a></h2>\n </article>\n {% endfor %}\n <a href=\"{{ url(page.plural) }}\">Toutes les {{ page.plural }}</a>\n{% endblock %}Liens vers les termes de la page courante, dans un template de page :
\n{% for category in page.categories ?? [] %}\n <a href=\"{{ url('categories/' ~ category) }}\">{{ category }}</a>\n{% endfor %}| Variables | \nDescriptif | \n
|---|---|
cecil.url | \nURL du site Cecil. | \n
cecil.version | \nVersion actuelle de Cecil. | \n
cecil.poweredby | \nImprimez Cecil v%s, avec %s est la version actuelle. | \n
Tri des collections (de pages, menus ou taxonomies).
\nTrie une collection par titre (avec tri naturel).
\n{{ collection|sort_by_title }}Exemple:
\n{{ site.pages|sort_by_title }}Trie une collection par date (la plus récente en premier).
\n{{ collection|sort_by_date(variable='date', desc_title=false) }}Exemple:
\n{# sort by date #}\n{{ site.pages|sort_by_date }}\n{# sort by updated variable instead of date #}\n{{ site.pages|sort_by_date(variable='updated') }}\n{# sort items with the same date by desc title #}\n{{ site.pages|sort_by_date(desc_title=true) }}\n{# reverse sort #}\n{{ site.pages|sort_by_date|reverse }}Trie une collection par poids (le plus léger en premier).
\n{{ collection|sort_by_weight }}Exemple:
\n{{ site.menus.main|sort_by_weight }}Pour les cas plus complexes, vous devez utiliser le sort natif de Twig.
Exemple:
\n{% set files = site.static|sort((a, b) => a.date|date('U') < b.date|date('U')) %}Les variables peuvent être modifiées par filtres. Les filtres sont séparés de la variable par un symbole de barre verticale (|). Plusieurs filtres peuvent être chaînés. La sortie d’un filtre est appliquée au suivant.
{{ page.title|truncate(25)|capitalize }}Filtre une collection de pages par nom/valeur de variable.
\n{{ collection|filter_by(variable, value) }}Exemple:
\n{{ pages|filter_by('section', 'blog') }}Pour les cas plus complexes, vous devez utiliser le filter natif de Twig.
Exemple:
\n{% pages|filter(p => p.virtual == false and p.id not in ['page-1', 'page-2']) %}Convertit une chaîne Markdown en HTML.
\n{{ markdown|markdown_to_html }}{% apply markdown_to_html %}\n{# Markdown here #}\n{% endapply %}Exemples :
\n{% set markdown = '**This is bold text**' %}\n{{ markdown|markdown_to_html }}{% apply markdown_to_html %}\n**This is bold text**\n{% endapply %}Extrait uniquement les en-têtes correspondant au selectors donné (h2, h3, etc.), ou à ceux définis dans la configuration pages.body.toc s'ils ne sont pas spécifiés.\nLe paramètre format définit le format de sortie : html ou json.\nLe paramètre url est utilisé pour créer des liens vers des titres.
{{ markdown|toc(format, selectors, url) }}Exemples :
\n{{ page.body|toc }}\n{{ page.body|toc('html') }}\n{{ page.body|toc(selectors=['h2']) }}\n{{ page.body|toc(url=url(page)) }}Convertit une chaîne JSON en tableau.
\n{{ json|json_decode }}Exemple:
\n{% set json = '{\"foo\": \"bar\"}' %}\n{% set array = json|json_decode %}\n{{ array.foo }}Convertit une chaîne YAML en tableau.
\n{{ yaml|yaml_parse }}Exemple:
\n{% set yaml = 'key: value' %}\n{% set array = yaml|yaml_parse %}\n{{ array.key }}Convertit une chaîne en slug.
\n{{ string|slugify }}Le filtre u enveloppe un texte dans un objet Unicode (une instance Symfony UnicodeString) qui expose des méthodes pour « manipuler » la chaîne.
Exemple:
\n{{ 'cecil_string with twig'|u.camel.title }}\n\nCecilStringAvecTwig
\n
Le filtre singular transforme un nom donné au pluriel en sa version singulière.
{{ string|singular(locale)}}Exemple:
\n{# English (en) rules are used by default #}\n{{ 'partitions'|singular }}\n\npartition
\n
{{ 'partitions'|singular('fr') }}\n\npartition
\n
Le filtre plural transforme un nom donné au singulier en sa version plurielle.
{{ string|plural(locale)}}Exemple:
\n{# English (en) rules are used by default #}\n{{ 'animal'|plural }}\n\nanimaux
\n
{{ 'animal'|plural('fr') }}\n\nanimaux
\n
Tronque une chaîne et ajoute un suffixe.
\n{{ string|excerpt(length, suffix) }}| Options | \nDescriptif | \nTapez | \nPar défaut | \n
|---|---|---|---|
| longueur | \nTronque après ce nombre de caractères. | \nentier | \n450 | \n
| suffixe | \nAjoute des caractères. | \nchaîne | \n… | \n
Exemples :
\n{{ variable|excerpt }}\n{{ variable|excerpt(250, '...') }}Lit les caractères avant ou après la balise <!-- excerpt --> ou <!-- break -->.\nVoir Documentation de contenu pour plus de détails.
{{ string|excerpt_html({separator, capture}) }}| Options | \nDescriptif | \nTapez | \nPar défaut | \n
|---|---|---|---|
| séparateur | \nChaîne à utiliser comme séparateur. | \nchaîne | \nexcerpt|break | \n
| capturer | \nPièce à capturer, before ou after le séparateur. | \nchaîne | \nbefore | \n
Exemples :
\n{{ variable|excerpt_html }}\n{{ variable|excerpt_html({separator: 'excerpt|break', capture: 'before'}) }}\n{{ variable|excerpt_html({capture: 'after'}) }}Met en surbrillance une chaîne de code avec highlight.php.
\n{{ code|highlight(language) }}Exemples :
\n{{ '<?php echo $highlighted->value; ?>'|highlight('php') }}Divise une chaîne en un tableau à l'aide d'une expression régulière.
\n{{ string|preg_split(pattern, limit) }}Exemple:
\n{% set headers = page.content|preg_split('/<br[^>]*>/') %}Effectue une correspondance d'expression régulière et renvoie le groupe pour toutes les correspondances.
\n{{ string|preg_match_all(pattern, group) }}Exemple:
\n{% set tags = page.content|preg_match_all('/<[^>]+>(.*)<\\/[^>]+>/') %}Convertit une couleur hexadécimale en RVB.
\n{{ color|hex_to_rgb }}Cecil fournit une logique de composants pour vous donner le pouvoir de créer des \"unités\" de templates réutilisables.
\n\nLes composants ne sont que des templates Twig stockés dans le sous-répertoire components/ et peuvent être utilisés n'importe où dans vos templates :
{# /components/button.twig #}\n<button {{ attributes.merge({class: 'rounded px-4'}) }}>\n {{ slot }}\n</button>\n\nLa variable slot correspond à tout contenu que vous ajouterez entre la balise d'ouverture et la balise de fermeture.
\n
Pour accéder à un composant vous devez utiliser la balise dédiée x suivie de : et du nom de fichier de votre composant sans extension :
{# /index.twig #}\n{% x:button with {class: 'text-white'} %}\n <strong>Click me</strong>\n{% endx %}Il rendra :
\n<button class=\"text-white rounded px-4\">\n <strong>Click me</strong>\n</button>Cecil prend en charge traduction du texte et localisation de la date.
\nUtilise le trans tag ou filter pour traduire des textes dans des templates.
{% trans with variables into locale %}{% endtrans %}{{ message|trans(variables = []) }}{% trans %}Hello World!{% endtrans %}{{ message|trans }}Inclure des variables :
\n{% trans with {'%name%': 'Arnaud'} %}Hello %name%!{% endtrans %}{{ message|trans({'%name%': 'Arnaud'}) }}Forcer les paramètres régionaux :
\n{% trans into 'fr_FR' %}Hello World!{% endtrans %}Pluraliser :
\n{% trans with {'%count%': 42}%}{0}I don't have apples|{1}I have one apple|]1,Inf[I have %count% apples{% endtrans %}Les fichiers de traduction doivent être nommés messages.<locale>.<extension> et stockés dans le répertoire translations.\nLes extensions prises en charge sont définies pour chaque format de traduction dans layouts.translations.formats.
Le code locale (ex. : fr_FR) d'une langue est défini dans les entrées languages de la configuration.
Exemple:
\n<mywebsite>\n└─ translations\n ├─ messages.fr_FR.mo <- Machine Object format\n └─ messages.fr_FR.yaml <- Yaml formatUtilise le filtre Twig format_date pour localiser une date dans les templates.
{{ page.date|format_date('long') }}\n{# September 30, 2022 #}Les valeurs prises en charge sont : short, medium, long et full.
Cecil utilise un système de cache pour accélérer le processus de génération, il peut être désactivé ou effacé.
\nIl existe trois types de cache dans le cas du rendu des templates : les templates eux-mêmes, assets et translations.
\nVous pouvez vider le cache avec les commandes suivantes :
\nphp cecil.phar cache:clear # clear all caches\nphp cecil.phar cache:clear:assets # clear assets cache\nphp cecil.phar cache:clear:templates # clear templates cache\nphp cecil.phar cache:clear:translations # clear translations cacheCecil fournit un moyen de mettre en cache des parties du rendu des templates pour éviter de restituer plusieurs fois le même contenu partiel.
\nPour utiliser les fragments de cache, vous devez envelopper le contenu que vous souhaitez mettre en cache avec la balise cache.
{% cache 'unique-key' %}\n {# cacheable content #}\n{% endcache %}Pour vider uniquement le cache des fragments, vous pouvez utiliser la commande suivante :
\nphp cecil.phar cache:clear:templates --fragmentsVous pouvez désactiver le cache avec la configuration.
\n", "language": "fr" }, { "id": "https://cecil.app/fr/documentation/templates/etendre/", "url": "https://cecil.app/fr/documentation/templates/etendre/", "title": "Étendre", "summary": "Ajoutez des fonctions et filtres personnalisés, ou utilisez un thème.", "date_published": "2026-05-26T00:00:00+00:00", "date_modified": "2026-10-05T00:00:00+00:00","content_text": "Étendre\nFonctions et filtres\nVous pouvez ajouter des fonctions et des filtres personnalisés avec une extension Twig.\nThème\nC'est simple de construire un thème, il suffit de créer un dossier <theme> avec la structure suivante (comme un site web mais sans pages) :\n<mywebsite>\n└─ themes\n └─ <theme>\n ├─ config.yml\n ├─ assets\n ├─ layouts\n ├─ static\n └─ translations", "content_html": "Vous pouvez ajouter des fonctions et des filtres personnalisés avec une extension Twig.
\nC'est simple de construire un thème, il suffit de créer un dossier <theme> avec la structure suivante (comme un site web mais sans pages) :
<mywebsite>\n└─ themes\n └─ <theme>\n ├─ config.yml\n ├─ assets\n ├─ layouts\n ├─ static\n └─ translations