![\"Une](\"/thumbnails/1024x/images/examples/arnaud-girault-IjEtFjxXweE-unsplash.9f9b5448197aded5325854d4f3c79652.jpg\")
\nCecil étend Markdown avec quelques fonctionnalités pratiques pour les pages longues : une table des matières automatique, des blocs de notes et des attributs sur les éléments.
\nAjoutez la balise [toc] à l’endroit où la table des matières doit apparaître dans le corps de la page :
[toc]\n\n## Installation\n### Requirements\n## UsagePar défaut, la table des matières est construite à partir des titres H2 et H3. Modifiez ce comportement dans cecil.yml :
pages:\n body:\n toc: [h2, h3, h4]Pour placer la table des matières en dehors du contenu (ex. dans une barre latérale), utilisez le filtre toc sur le corps de la page :
<aside>\n {{ page.body|toc }}\n</aside>\n<article>\n {{ page.content }}\n</article>Le filtre accepte aussi les titres à extraire, ex. {{ page.body|toc(selectors=['h2']) }}.
Mettez en avant une information avec un bloc de note :
\n:::tip\n**Tip:** This is advice.\n:::Est converti en :
\n<aside class=\"note note-tip\">\n <p>\n <strong>Tip:</strong> This is advice.\n </p>\n</aside>Les types disponibles sont info, tip, important, warning et caution (ou aucun type). Stylisez-les avec les classes CSS note et note-<type>.
Définissez un id, une classe ou n’importe quel attribut sur un titre, un bloc de code, un lien ou une image, entre accolades à la fin de la ligne :
\n## Installation {#install .highlighted}L’id #install fournit une ancre stable vers laquelle créer un lien : [Voir l’installation](#install).
Quand une page est déplacée ou renommée, son ancienne URL ne doit pas mener à une erreur 404. Cecil propose deux variables de front matter pour cela : alias et redirect.
La variable alias liste les anciens chemins de la page courante. Chacun d’eux redirige vers la page :
\ntitle: About\nalias:\n - contact\n - about-us\nDans cet exemple, /contact/ et /about-us/ redirigent vers /about/.
La variable redirect transforme une page en redirection vers l’URL indiquée, interne ou externe :
\ntitle: Ancienne documentation\nredirect: \"https://cecil.app/documentation/\"\nSi l’ancienne page n’a plus de contenu, déclarez-la comme page virtuelle dans cecil.yml :
pages:\n virtual:\n - path: code\n redirect: https://github.com/Cecilapp/CecilPour chaque alias et chaque redirection, Cecil génère une page avec le template intégré redirect.html.twig. Elle contient :
<link rel=\"canonical\"> vers l’URL cible<meta name=\"robots\" content=\"noindex\">, pour que les moteurs de recherche ne l’indexent pas<meta http-equiv=\"refresh\"> et une redirection JavaScriptLe site local et le site de production partagent rarement les mêmes réglages : URL de base, mode debug, répertoire de sortie… Cecil permet de conserver un unique cecil.yml et de le surcharger selon l’environnement.
cecil.ymltitle: \"My site\"\nbaseurl: https://example.com/\ndebug: falseCréez un fichier contenant uniquement les clés à modifier, par exemple config/dev.yml :
baseurl: http://localhost:8000/\ndebug: truePuis chargez-le avec l’option --config, disponible avec les commandes build et serve :
php cecil.phar serve --config=config/dev.ymlVous pouvez passer plusieurs fichiers, séparés par des virgules. Ils sont fusionnés dans l’ordre après cecil.yml : chaque fichier surcharge donc les précédents.
php cecil.phar build --config=config/prod.yml,config/local.ymlToute clé de configuration peut être définie par une variable d’environnement préfixée par CECIL_, en majuscules. Les clés imbriquées sont séparées par un underscore (par exemple CECIL_OUTPUT_DIR définit output.dir) :
export CECIL_BASEURL=\"https://staging.example.com/\"\nexport CECIL_DEBUG=true\nphp cecil.phar buildCecil charge aussi un fichier .env à la racine du site, s’il existe (les variables déjà définies par le système sont conservées) :
CECIL_BASEURL=\"http://localhost:8000/\"\nCECIL_DEBUG=trueLes variables d’environnement sont appliquées par-dessus les fichiers de configuration, ce qui les rend pratiques en CI, par exemple :
\n# .gitlab-ci.yml\npages:\n variables:\n CECIL_ENV: production\n CECIL_OUTPUT_DIR: publicUtilisez la fonction getenv pour adapter les templates, par exemple pour n’inclure les statistiques d’audience qu’en production :
{% if getenv('CECIL_ENV') == 'production' %}\n {{ include('partials/analytics.html.twig') }}\n{% endif %}La variable site.debug indique si le mode debug est activé :
{% if site.debug %}{{ dump(page) }}{% endif %}Cecil peut compiler des fichiers Sass, minifier le CSS et le JavaScript, et ajouter une empreinte du contenu aux noms de fichiers (cache busting) directement depuis vos templates, sans outil de build externe.
\nLes fichiers sources sont stockés dans le répertoire assets/. Le traitement est activé par défaut et peut être ajusté dans cecil.yml :
assets:\n compile:\n style: compressed # `expanded` ou `compressed`\n import: [sass, scss] # chemins importés\n minify: true # minifie le CSS et le JS\n fingerprint: true # ajoute l’empreinte du contenu aux noms de fichiersCréez un asset à partir d’un fichier Sass, compilez-le avec to_css et générez l’élément <link> avec la fonction html :
{{ html(asset('css/styles.scss')|to_css|minify) }}Les filtres peuvent être chaînés pour contrôler chaque étape explicitement, ce qui est utile si une fonctionnalité est désactivée globalement :
\n{{ asset('css/styles.scss')|to_css|minify|fingerprint }}Passez un tableau de chemins pour créer un bundle unique, avec un nom de fichier personnalisé :
\n{{ html(asset(['js/menu.js', 'js/search.js'], {filename: 'scripts.js'})) }}Les options peuvent aussi être définies par asset, par exemple pour laisser un fichier distant intact :
\n{{ html(asset('https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.3.1/anchor.min.js', {minify: false})) }}Utilisez la fonction integrity (ou l’attribut integrity de l’asset) pour générer un hash sha384 :
{% set styles = asset('css/styles.scss')|to_css %}\n<link rel=\"stylesheet\" href=\"{{ url(styles) }}\" integrity=\"{{ integrity(styles) }}\" crossorigin=\"anonymous\">Affichez le contenu d’un asset avec le filtre inline :
<style>{{ asset('css/critical.scss')|to_css|minify|inline }}</style>Pour quelques lignes de styles écrites directement dans le template, utilisez les filtres scss_to_css et minify_css :
<style>\n{% apply scss_to_css|minify_css %}\n $color: #fcfcfc;\n body {\n background-color: $color;\n }\n{% endapply %}\n</style>Les taxonomies permettent de classer les pages avec des termes (ex. PHP) regroupés dans des vocabulaires (ex. tags). Cecil génère ensuite une page par vocabulaire et une page par terme.
Les vocabulaires sont déclarés dans cecil.yml, par paires de noms au pluriel et au singulier :
taxonomies:\n categories: category\n tags: tagAjoutez les termes dans le front matter de vos pages, en utilisant le nom au pluriel du vocabulaire :
\n\ntitle: Mon premier billet\ncategories: [\"Development\"]\ntags: [\"PHP\", \"Static site\"]\nCecil génère :
\n/tags/ : la liste des termes du vocabulaire/tags/php/ et /tags/static-site/ : la liste des pages de chaque termeLe template de vocabulaire est nommé d’après le pluriel, ex. layouts/taxonomy/tags.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 %}Le template de terme est nommé d’après le singulier, ex. layouts/taxonomy/tag.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) }}\">All {{ page.plural }}</a>\n{% endblock %}Dans un template de page, liez chaque terme à sa page :
\n{% for tag in page.tags ?? [] %}\n <a href=\"{{ url('tags/' ~ tag) }}\">{{ tag }}</a>\n{% endfor %}Ou utilisez le partial intégré : {{ include('partials/terms-list.html.twig', {vocabulary: 'tags'}) }}.
Cecil gère les menus de navigation comme des collections d’entrées (nom, URL, poids) que vous pouvez déclarer dans la configuration ou directement dans les pages, puis afficher n’importe où dans vos templates.
\nAjoutez une section menus dans cecil.yml. Chaque menu (ex. : main, footer) est une liste d’entrées avec un id unique :
menus:\n main:\n - id: about\n name: \"About\"\n url: /about/\n weight: 1\n footer:\n - id: github\n name: \"GitHub\"\n url: https://github.com/Cecilapp/Cecil\n weight: 99Une page peut s’ajouter à un ou plusieurs menus avec la variable menu. Le nom de l’entrée est le title de la page et l’URL est son chemin :
\ntitle: Our Expertise\nmenu:\n main:\n weight: 15\n footer:\n weight: 15\n name: \"Expertise\" # surcharge le nom de l’entrée dans ce menu\nUtilisez l’ID de la page comme id pour surcharger une entrée existante, ou enabled: false pour la retirer :
menus:\n main:\n - id: index\n name: \"Home\"\n weight: 1\n - id: about\n enabled: falseBouclez sur site.menus.<menu>, trié par poids, et comparez l’ID de chaque entrée avec celui de la page courante pour mettre en évidence l’élément actif :
<nav>\n <ul>\n {% for entry in site.menus.main|sort_by_weight %}\n <li>\n <a href=\"{{ url(entry.url) }}\"{% if entry.id == page.id %} aria-current=\"page\" class=\"active\"{% endif %}>{{ entry.name }}</a>\n </li>\n {% endfor %}\n </ul>\n</nav>Une entrée peut aussi être atteinte directement par son ID :
\n{% if site.menus.main.about is defined %}\n <a href=\"{{ url(site.menus.main.about.url) }}\">{{ site.menus.main.about.name }}</a>\n{% endif %}Un site statique n’a pas de recherche côté serveur, mais Cecil peut générer un index JSON de vos pages au moment du build. Quelques lignes de JavaScript suffisent ensuite pour l’interroger dans le navigateur.
\nCréez une page dont le seul format de sortie est json, avec un layout dédié :
pages/search.md
\n\ntitle: Search index\nlayout: search\noutput: json\nexcluded: true\nexcluded: true exclut cette page technique des pages de liste et du sitemap.
Selon les règles de recherche, Cecil génère cette page avec layouts/search.json.twig. Construisez un tableau des pages affichables (showable), puis encodez-le :
{%- set index = [] -%}\n{%- for p in site.pages.showable|filter(p => p.type == 'page') -%}\n {%- set index = index|merge([{\n title: p.title,\n url: url(p),\n description: p.description|default(''),\n content: p.content|striptags|excerpt(300)\n }]) -%}\n{%- endfor -%}\n{{ index|json_encode(constant('JSON_UNESCAPED_UNICODE') b-or constant('JSON_UNESCAPED_SLASHES'))|raw }}Après php cecil.phar build, l’index est disponible à l’adresse /search.json.
Ajoutez un champ de recherche dans un template et chargez Fuse.js depuis un CDN pour interroger l’index :
\n<input type=\"search\" id=\"search\" placeholder=\"Rechercher…\">\n<ul id=\"results\"></ul>\n\n<script type=\"module\">\n import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@7/dist/fuse.mjs';\n\n const index = await fetch('{{ url('search', {format: 'json'}) }}').then(r => r.json());\n const fuse = new Fuse(index, { keys: ['title', 'description', 'content'], threshold: 0.3 });\n const results = document.getElementById('results');\n\n document.getElementById('search').addEventListener('input', (e) => {\n results.replaceChildren(...fuse.search(e.target.value, { limit: 10 }).map(({ item }) => {\n const li = document.createElement('li');\n const a = document.createElement('a');\n a.href = item.url;\n a.textContent = item.title;\n li.append(a);\n return li;\n }));\n });\n</script>Pagefind indexe directement les fichiers HTML générés : aucun template JSON n’est nécessaire. Lancez-le après le build, sur le répertoire de sortie (_site par défaut) :
php cecil.phar build\nnpx pagefind --site _siteChargez ensuite son interface dans un template :
\n<link href=\"/pagefind/pagefind-ui.css\" rel=\"stylesheet\">\n<script src=\"/pagefind/pagefind-ui.js\"></script>\n<div id=\"search\"></div>\n<script>\n window.addEventListener('DOMContentLoaded', () => new PagefindUI({ element: '#search' }));\n</script>Avec la Cecil Action, chaque push sur votre dépôt génère le site et le publie sur GitHub Pages, sans serveur à gérer.
\nDans votre dépôt, allez dans Settings → Pages puis, dans Build and deployment, choisissez GitHub Actions comme Source.
\nCréez le fichier .github/workflows/build-and-deploy.yml :
name: Build and deploy to GitHub Pages\non:\n push:\n branches: [master, main]\n workflow_dispatch:\nconcurrency:\n group: pages\n cancel-in-progress: true\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - name: Checkout source\n uses: actions/checkout@v6\n - name: Build site\n uses: Cecilapp/Cecil-Action@v4\n deploy:\n needs: build\n permissions:\n pages: write\n id-token: write\n environment:\n name: github-pages\n url: ${{ steps.deployment.outputs.page_url }}\n runs-on: ubuntu-latest\n steps:\n - name: Deploy to GitHub Pages\n id: deployment\n uses: actions/deploy-pages@v5Le job build télécharge Cecil, installe les thèmes (si un fichier composer.json existe), génère le site et envoie le répertoire de sortie en tant qu’artefact Pages. Le job deploy le publie ensuite.
Inutile de modifier baseurl dans cecil.yml : l’action génère le site avec l’URL fournie par GitHub Pages (par exemple https://<user>.github.io/<repository>/), via l’option --baseurl.
L’action accepte les paramètres optionnels suivants :
\n - name: Build site\n uses: Cecilapp/Cecil-Action@v4\n with:\n version: '9.6.2' # version de Cecil (la dernière par défaut)\n install_themes: 'no' # ne pas installer les thèmes (`yes` par défaut)\n options: '-v --drafts' # options de la commande build (`-v` par défaut)Cecil génère les flux grâce aux formats de sortie : par défaut, la page d’accueil, les sections et les termes de taxonomie sont déjà publiés en HTML et en Atom (ex. /atom.xml, /blog/atom.xml). Ajoutez les formats rss ou jsonfeed pour publier aussi des fichiers RSS 2.0 ou JSON Feed.
Définissez les formats appliqués à chaque type de page avec output.pagetypeformats :
output:\n pagetypeformats:\n homepage: [html, atom, rss, jsonfeed]\n section: [html, atom, rss, jsonfeed]Cecil génère alors rss.xml et feed.json à côté de chaque index.html de la page d’accueil et des sections (ex. /blog/rss.xml, /blog/feed.json).
Pour publier un flux pour une seule section, utilisez la variable output dans le front matter de la page d’index de la section :
\ntitle: Blog\noutput: [html, rss]\nSi vos templates incluent le partial metatags, les balises <link rel=\"alternate\"> pointant vers les flux de la page courante sont ajoutées automatiquement dans le <head>.
Sinon, ajoutez le lien vous-même avec la fonction url() et son option format :
<link rel=\"alternate\" type=\"application/rss+xml\" title=\"{{ site.title }}\" href=\"{{ url(page, {canonical: true, format: 'rss'}) }}\">Les flux sont générés par les templates intégrés _default/list.rss.twig, _default/list.atom.twig et _default/list.jsonfeed.twig. Selon les règles de recherche, créez layouts/list.rss.twig (toutes les pages de liste) ou layouts/blog/list.rss.twig (section blog uniquement) pour les surcharger.
Vous pouvez étendre le template intégré et redéfinir uniquement le bloc item, par exemple pour publier un extrait plutôt que le contenu complet :
{% extends '_default/list.rss.twig' %}\n\n{% block item %}\n <guid>{{ url(item, {canonical: true}) }}</guid>\n <title>{{ item.title|e }}</title>\n <pubDate>{{ item.date|date('r') }}</pubDate>\n <link>{{ url(item, {canonical: true}) }}</link>\n <description><![CDATA[{{ item.content|excerpt_html }}]]></description>\n{% endblock %}Lorsqu’une section contient de nombreuses pages, Cecil peut découper sa liste en plusieurs pages (ex. : /blog/, /blog/page/2/, /blog/page/3/, etc.) et fournit un paginator pour construire les liens de navigation.
La pagination est activée par défaut pour les pages de liste (homepage, section et term), avec 5 entrées par page. Modifiez-la dans cecil.yml :
pages:\n pagination:\n max: 10 # nombre maximum d’entrées par page\n path: page # chemin des pages paginéesDéfinissez la variable pagination dans le front matter du fichier index de la section (ex. : pages/blog/index.md) :
\ntitle: Blog\npagination:\n max: 20\nOu désactivez-la pour cette section uniquement :
\n\npagination: false\nDans le template de liste (ex. : layouts/blog/list.html.twig), bouclez sur page.paginator.pages et utilisez page.pages lorsque la pagination est désactivée :
{% for p in page.paginator.pages ?? page.pages %}\n <article>\n <h2><a href=\"{{ url(p) }}\">{{ p.title }}</a></h2>\n <time datetime=\"{{ p.date|date('c') }}\">{{ p.date|date('j M Y') }}</time>\n </article>\n{% endfor %}Les liens du paginator sont des identifiants de pages : utilisez la fonction url() pour créer des liens fonctionnels :
{% if page.paginator %}\n<nav>\n {% if page.paginator.links.prev is defined %}\n <a href=\"{{ url(page.paginator.links.prev) }}\" rel=\"prev\">Previous</a>\n {% endif %}\n <span>Page {{ page.paginator.current }} of {{ page.paginator.count }}</span>\n {% if page.paginator.links.next is defined %}\n <a href=\"{{ url(page.paginator.links.next) }}\" rel=\"next\">Next</a>\n {% endif %}\n</nav>\n{% endif %}Pour lister tous les numéros de page, itérez de 1 à page.paginator.count :
{% if page.paginator %}\n<nav>\n {% for i in 1..page.paginator.count %}\n {% if i == page.paginator.current %}\n <span aria-current=\"page\">{{ i }}</span>\n {% elseif i == 1 %}\n <a href=\"{{ url(page.paginator.links.first) }}\">{{ i }}</a>\n {% else %}\n <a href=\"{{ url(page.paginator.links.path ~ '/' ~ i) }}\">{{ i }}</a>\n {% endif %}\n {% endfor %}\n</nav>\n{% endif %}Cecil gère nativement les sites multilingues : il suffit de déclarer les langues, d’ajouter les pages traduites, puis de les relier entre elles et de traduire les templates.
\nDéfinissez la langue principale et la liste des langues disponibles dans cecil.yml :
language: en\nlanguages:\n - code: en\n name: English\n locale: en_US\n - code: fr\n name: Français\n locale: fr_FR\n config:\n title: \"Mon site en français\"Les options placées sous la clé config d’une langue remplacent les options globales (ici le title du site).
Dupliquez la page de référence et suffixez son nom de fichier avec le code de la langue :
\npages/\n├─ about.md # la page de référence\n└─ about.fr.md # la version françaiseUtilisez la variable slug pour traduire l’URL de la page :
\ntitle: À propos\nslug: a-propos\nabout.md est publiée sur /about/ et about.fr.md sur /fr/a-propos/.
Chaque page expose ses traductions via page.translations. Ajoutez un sélecteur de langue à votre template :
{% for p in page.translations %}\n <a href=\"{{ url(p) }}\" hreflang=\"{{ p.language }}\">{{ site.language.name(p.language) }}</a>\n{% endfor %}Vous pouvez aussi inclure le partial intégré : {{ include('partials/languages.html.twig') }}.
Encadrez les textes avec le tag ou le filtre trans :
{% trans %}Read more{% endtrans %}\n{{ 'Read more'|trans }}Ajoutez ensuite un fichier de traduction nommé d’après la locale de la langue dans le dossier translations :
# translations/messages.fr_FR.yaml\nRead more: Lire la suiteExtrayez les textes de vos templates avec :
\nphp cecil.phar util:translations:extract --locale=fr_FR --saveCecil expose sa feature SEO via le template partials/metatags.html.twig. Il suffit de l’inclure dans le <head> du template de base pour que chaque page bénéficie automatiquement des balises meta, des liens canoniques, des cartes sociales et des données structurées.
<html lang=\"{{ site.language }}\">\n <head>\n <meta charset=\"utf-8\">\n {{ include('partials/metatags.html.twig') }}\n </head>\n <body>\n ...\n </body>\n</html>Le partial lit d’abord le front matter de la page, puis reprend les options du site si nécessaire. Consultez la documentation de configuration des metatags pour voir toutes les options disponibles.
\nSi vous devez surcharger le titre ou l’image, passez des valeurs directement au partial :
\n{{ include('partials/metatags.html.twig', {title: 'Custom title', image: og_image}) }}L'optimisation des images est l'un des moyens les plus efficaces d'améliorer les performances de votre site web.
\nCecil gère automatiquement les optimisations suivantes pour les images Markdown :
\nCi-dessous un exemple avec une image PNG 1920x1276 pixels.
\n![Une région de formation d’étoiles dans le ciel](../../assets/arnaud-girault-IjEtFjxXweE-unsplash.jpg \"Photo de Arnaud Girault\"){placeholder=color}# configuration globale des assets\nassets:\n images:\n optimize: true\n responsive:\n widths: [768, 1024]\n# configuration des images dans du Markdown\npages:\n body:\n images:\n formats: [avif, webp]\n responsive: true\n lazy: true\n decoding: true\n placeholder: color<picture>\n <source\n type=\"image/avif\"\n srcset=\"/thumbnails/1024/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.avif 1024w,\n /thumbnails/768/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.avif 768w\"\n sizes=\"100vw\"\n width=\"1024\"\n height=\"681\"\n >\n <source\n type=\"image/webp\"\n srcset=\"/thumbnails/1024/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.webp 1024w,\n /thumbnails/768/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.webp 768w\"\n sizes=\"100vw\"\n width=\"1024\"\n height=\"681\"\n >\n <img src=\"/thumbnails/1024/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.jpg\"\n alt=\"Photo de Arnaud Girault\"\n loading=\"lazy\"\n decoding=\"async\"\n width=\"1024\"\n height=\"681\"\n style=\";max-width:100%;height:auto;background-color:rgb(58, 56, 44);\"\n srcset=\"/thumbnails/1024/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.jpg 1024w,\n /thumbnails/768/arnaud-girault-IjEtFjxXweE-unsplash.c0bdd31264ac3d0d364d02bced31038f.jpg 768w\"\n sizes=\"100vw\"\n >\n</picture>Pour optimiser les performances et la bande passante, Cecil peut générer plusieurs formats d'image, tels qu'AVIF et WebP. Cela permet au navigateur de sélectionner le format le plus adapté à ses capacités :
\n{{ html(asset('image.jpg'), attributes={alt: 'Description alternative'}, options={formats: ['avif', 'webp']}) }}\n\nAVIF et WebP sont des formats d'image offrant des caractéristiques de compression et de qualité supérieures à leurs homologues JPEG et PNG plus anciens. Encoder vos images dans ces formats plutôt que JPEG ou PNG permet un chargement plus rapide et une consommation de données mobiles réduite.
\nAVIF est pris en charge par Chrome, Firefox et Opera et offre des tailles de fichier plus petites que d'autres formats à qualité égale.
\nWebP est pris en charge par les dernières versions de Chrome, Firefox, Safari, Edge et Opera et offre une meilleure compression avec et sans perte pour les images sur le Web.
\n
– Documentation Chrome Lighthouse
\nCi-dessous un exemple de génération des formats AVIF et WebP d'une image :
\n{{ html(asset('cecil-logo.png'), attributes={alt: 'Cecil logo'}, options={formats: ['avif', 'webp']}) }}<picture>\n <source type=\"image/avif\" srcset=\"/cecil-logo.c1af8a129a0cde81f9b94ffbf452e10b.avif\">\n <source type=\"image/webp\" srcset=\"/cecil-logo.c1af8a129a0cde81f9b94ffbf452e10b.webp\">\n <img src=\"/cecil-logo.c1af8a129a0cde81f9b94ffbf452e10b.png\" width=\"250\" height=\"250\" alt=\"Cecil logo\">\n</picture>La manière la plus simple de rendre des images réactives dans des modèles est d'utiliser la fonction html :
\n{{ html(asset('image.jpg'), attributes={alt: 'Description alternative'}, options={responsive: true}) }}Ci-dessous un exemple avec une image PNG 1000x1000 pixels.
\n{{ html(asset('cecil-logo-1000.png'), attributes={alt: 'Cecil logo'}, options={responsive: true}) }}assets:\n images:\n responsive:\n widths: [768, 1024]<img\n alt=\"Cecil logo\"\n width=\"1000\"\n height=\"1000\"\n src=\"/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png\"\n srcset=\"/thumbnails/768/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 768w,\n /cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 1000w\"\n sizes=\"100vw\"\n>