{ "version": "https://jsonfeed.org/version/1.1", "title": "Cecil - Contenu", "home_page_url": "https://cecil.app/fr/documentation/contenu/", "feed_url": "https://cecil.app/fr/documentation/contenu/feed.json", "description": "Créez et organisez votre contenu : pages, front matter, Markdown, contenu multilingue et dynamique.", "icon": "https://cecil.app/favicon.7ff4b89eec6dad139a7d2d6561543285.png", "favicon": "https://cecil.app/thumbnails/64x/favicon.7ff4b89eec6dad139a7d2d6561543285.png", "language": "fr", "items": [ { "id": "https://cecil.app/fr/documentation/contenu/pages/", "url": "https://cecil.app/fr/documentation/contenu/pages/", "title": "Pages et sections", "summary": "Anatomie d’une page, préfixe de fichier, sections, sous-sections et page d’accueil.", "date_published": "2026-03-27T00:00:00+00:00", "date_modified": "2026-10-06T00:00:00+00:00","content_text": "Pages et sections\nUne page est un fichier composé d’un front matter et d’un body.\nFront matter\nLe front matter est une collection de variables (au format clé\/valeur) entourée par ---.\nExemple :\n---\ntitle: \"The title\"\ndate: 2019-02-21\ntags: [tag 1, tag 2]\ncustomvar: \"Value of customvar\"\n---\nVous pouvez aussi utiliser <!-- --> ou +++ comme séparateur.\nCorps (body)\nLe body est le contenu principal d’une page ; il peut être écrit en Markdown ou en texte brut.\nExemple :\n# Header\n\n[toc]\n\n## Sub-Header 1\n\nLorem ipsum dolor [sit amet](https:\/\/example.com), consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n<!-- excerpt -->\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n## Sub-Header 2\n\n![Description](\/image.jpg \"Title\")\n\n## Sub-Header 3\n\n:::tip\nThis is advice.\n:::\nPréfixe de fichier\nLe nom de fichier peut contenir un préfixe pour définir les variables date ou weight de la page (utilisé par sortby).\nSéparateurs de préfixe par défaut : _ et -.\nVous pouvez les personnaliser avec l’option pages.prefix.separator.\ndate\nLe date prefix est utilisé pour définir la date de la page et doit être un format de date valide (c.-à-d. : « YYYY-MM-DD »).\nExemple :\nDans « 2019-04-23_My blog post.md » :\n\nle préfixe est « 2019-04-23 »\nla date de la page est « 2019-04-23 »\nle title de la page est « My blog post »\n\nweight\nLe weight prefix est utilisé pour définir l’ordre de tri de la page et doit être une valeur entière valide.\nExemple :\nDans « 1_The first project.md » :\n\nle préfixe est « 1 »\nle weight de la page est « 1 »\nle title de la page est « The first project »\n\nSection\nCertaines variables dédiées peuvent être utilisées dans une Section personnalisée (c.-à-d. : <section>\/index.md).\nsortby\nL’ordre des pages dans une Section peut être modifié.\nValeurs disponibles :\n\ndate: plus récentes en premier\ntitle: ordre alphabétique\nweight: plus léger en premier\n\nExemple :\n---\nsortby: title\n---\nMore options:\n---\nsortby:\n variable: date # \"date\", \"updated\", \"title\" or \"weight\"\n desc_title: false # used with \"date\" or \"updated\" variable value to sort by desc title order if items have the same date\n reverse: false # reversed if true\n---\npagination\nLa configuration globale de pagination est utilisée par défaut, mais vous pouvez la modifier pour une Section donnée.\nExemple :\n---\npagination:\n max: 5\n path: \"page\"\n---\nLa pagination peut être désactivée pour une Section :\n---\npagination: false\n---\ncascade\nToutes les variables de cascade sont ajoutées au front matter de toutes les sous-pages.\nExemple :\n---\ncascade:\n banner: image.jpg\n---\nLes variables existantes ne sont pas écrasées.\ncircular\nDéfinissez circular à true pour activer la navigation circulaire avec page.<prev\/next>.\nAvec des sous-sections, seule la valeur circular de la Section de premier niveau est utilisée.\nExemple :\n---\ncircular: true\n---\nSous-section\nUn dossier imbriqué qui contient explicitement un fichier index.md devient une sous-section de sa Section parente.\n<monsiteweb>\n└─ pages\n └─ blog <- Section\n ├─ index.md\n ├─ post-1.md <- Page de la Section « blog »\n └─ 2024 <- Sous-section (contient un « index.md »)\n ├─ index.md\n └─ post-2.md <- Page de la Section « blog » *et* de la sous-section « blog\/2024 »\nUne sous-section :\n\nest une Section (même type, mêmes variables et même résolution de gabarit) accessible à sa propre URL (ex. : \/blog\/2024\/)\nest rendue avec les gabarits de ses Sections parentes si elle n'a pas les siens (ex. : blog\/list.html.twig)\npeut être imbriquée à n'importe quelle profondeur (ex. : blog\/2024\/06\/)\nliste ses propres pages, et ses pages appartiennent aussi à chacune de leurs Sections parentes\nn'est pas listée dans sa Section parente\nest placée dans la navigation page.<prev\/next> de sa Section parente (selon son sortby), suivie de ses propres pages\n\nUn dossier imbriqué sans fichier index.md n'est pas une sous-section : ses pages appartiennent simplement à la Section parente.\nPage d'accueil\nComme une autre section, la Page d'accueil prend en charge la configuration sortby et pagination.\npagesfrom\nDéfinissez un nom de Section valide dans pagesfrom pour utiliser la collection de pages de cette Section dans la Page d'accueil.\nExemple :\n---\npagesfrom: blog\n---", "content_html": "

Pages et sections

\n

Une page est un fichier composé d’un front matter et d’un body.

\n

Front matter

\n

Le front matter est une collection de variables (au format clé/valeur) entourée par ---.

\n

Exemple :

\n
---\ntitle: \"The title\"\ndate: 2019-02-21\ntags: [tag 1, tag 2]\ncustomvar: \"Value of customvar\"\n---
\n\n

Corps (body)

\n

Le body est le contenu principal d’une page ; il peut être écrit en Markdown ou en texte brut.

\n

Exemple :

\n
# Header\n\n[toc]\n\n## Sub-Header 1\n\nLorem ipsum dolor [sit amet](https://example.com), consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n<!-- excerpt -->\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n\n## Sub-Header 2\n\n![Description](/image.jpg \"Title\")\n\n## Sub-Header 3\n\n:::tip\nThis is advice.\n:::
\n

Préfixe de fichier

\n

Le nom de fichier peut contenir un préfixe pour définir les variables date ou weight de la page (utilisé par sortby).

\n\n

date

\n

Le date prefix est utilisé pour définir la date de la page et doit être un format de date valide (c.-à-d. : « YYYY-MM-DD »).

\n

Exemple :

\n

Dans « 2019-04-23_My blog post.md » :

\n\n

weight

\n

Le weight prefix est utilisé pour définir l’ordre de tri de la page et doit être une valeur entière valide.

\n

Exemple :

\n

Dans « 1_The first project.md » :

\n\n

Section

\n

Certaines variables dédiées peuvent être utilisées dans une Section personnalisée (c.-à-d. : <section>/index.md).

\n

sortby

\n

L’ordre des pages dans une Section peut être modifié.

\n

Valeurs disponibles :

\n\n

Exemple :

\n
---\nsortby: title\n---
\n

More options:

\n
---\nsortby:\n  variable: date    # \"date\", \"updated\", \"title\" or \"weight\"\n  desc_title: false # used with \"date\" or \"updated\" variable value to sort by desc title order if items have the same date\n  reverse: false    # reversed if true\n---
\n

pagination

\n

La configuration globale de pagination est utilisée par défaut, mais vous pouvez la modifier pour une Section donnée.

\n

Exemple :

\n
---\npagination:\n  max: 5\n  path: \"page\"\n---
\n

La pagination peut être désactivée pour une Section :

\n
---\npagination: false\n---
\n

cascade

\n

Toutes les variables de cascade sont ajoutées au front matter de toutes les sous-pages.

\n

Exemple :

\n
---\ncascade:\n  banner: image.jpg\n---
\n\n

circular

\n

Définissez circular à true pour activer la navigation circulaire avec page.<prev/next>.

\n\n

Exemple :

\n
---\ncircular: true\n---
\n

Sous-section

\n

Un dossier imbriqué qui contient explicitement un fichier index.md devient une sous-section de sa Section parente.

\n
<monsiteweb>\n└─ pages\n   └─ blog                 <- Section\n      ├─ index.md\n      ├─ post-1.md         <- Page de la Section « blog »\n      └─ 2024              <- Sous-section (contient un « index.md »)\n         ├─ index.md\n         └─ post-2.md      <- Page de la Section « blog » *et* de la sous-section « blog/2024 »
\n

Une sous-section :

\n\n\n

Page d'accueil

\n

Comme une autre section, la Page d'accueil prend en charge la configuration sortby et pagination.

\n

pagesfrom

\n

Définissez un nom de Section valide dans pagesfrom pour utiliser la collection de pages de cette Section dans la Page d'accueil.

\n

Exemple :

\n
---\npagesfrom: blog\n---
", "language": "fr" }, { "id": "https://cecil.app/fr/documentation/contenu/front-matter/", "url": "https://cecil.app/fr/documentation/contenu/front-matter/", "title": "Front matter", "summary": "Variables de page personnalisées et prédéfinies : menu, taxonomie, planification, redirection, alias, sortie, etc.", "date_published": "2026-03-27T00:00:00+00:00", "date_modified": "2026-10-03T00:00:00+00:00","content_text": "Front matter\nLe front matter peut contenir des variables personnalisées appliquées à la page courante.\nIl doit se trouver au tout début du fichier et être un YAML valide.\nVariables prédéfinies\n\n\n\nVariable\nDescription\nValeur par défaut\nExemple\n\n\n\n\ntitle\nTitre\nNom de fichier sans extension.\nPost 1\n\n\nlayout\nTemplate\nVoir Lookup rules.\n404\n\n\ndate\nDate de création\nDate de création du fichier (objet PHP DateTime).\n2019\/04\/15\n\n\nsection\nSection\nSection de la page.\nblog\n\n\npath\nChemin\nPath de la page.\nblog\/post-1\n\n\nslug\nSlug\nSlug de la page.\npost-1\n\n\npublished\nPublié ou non\ntrue.\nfalse\n\n\ndraft\nBrouillon ou non\nfalse.\ntrue\n\n\n\nToutes les variables prédéfinies peuvent être surchargées, sauf section.\nupdated\nLa variable updated sert à définir la date de dernière modification d’une page.\nExemple :\n---\nupdated: 2026-02-02\n---\nAvant la version 8.80.1, la variable updated était une variable prédéfinie. Elle est désormais optionnelle (et doit être définie dans le front matter pour être utilisée).\nmenu\nUne page peut être ajoutée à un menu.\nLe nom de l’entrée est le title de la page et l’URL est le path de la page.\nLa même page peut être ajoutée à plusieurs menus, et la position de chaque entrée peut être définie avec la clé weight (la plus faible en premier). La clé name peut être utilisée pour personnaliser le nom de l’entrée par menu.\nExemples :\n---\nmenu: main\n---\n---\nmenu: [main, navigation] # same page in multiple menus\n---\n---\nmenu:\n main:\n weight: 10\n navigation:\n weight: 20\n---\n---\ntitle: 'Notre expertise'\nmenu:\n main:\n weight: 15\n footer:\n weight: 15\n name: \"Expertise\" # personnalise le nom de l'entrée dans ce menu\n---\nTaxonomie\nLa taxonomie permet de connecter, relier et classer le contenu de votre site Web.\nDans Cecil, ces termes sont regroupés dans des vocabulaires.\nLes vocabulaires sont déclarés dans la Configuration.\n\nVocabulaire\nUne catégorisation du contenu (ex. : tags, categories, etc.).\nTerme\nUn terme est un élément d’un vocabulaire (ex. : Développement, PHP, etc.).\n\nExemple :\n---\ntags: [\"Développement\", \"PHP\"]\n---\nCecil génère ensuite, pour chaque vocabulaire :\n\nune page listant ses termes, ex. : \/tags\/\nune page par terme listant ses pages, ex. : \/tags\/developpement\/ et \/tags\/php\/\n\nVoir les règles de recherche des templates et les variables de taxonomie pour personnaliser ces pages.\nPlanification\nPlanifie la publication des pages.\nExemple :\nLa page sera publiée si la date courante est >= 2023-02-07 :\nschedule:\n publish: 2023-02-07\nCette page est publiée si la date courante est <= 2022-04-28 :\nschedule:\n expiry: 2022-04-28\nredirect\nComme son nom l’indique, la variable redirect sert à rediriger une page vers une URL dédiée.\nExemple :\n---\nredirect: \"https:\/\/arnaudligny.fr\"\n---\nLa redirection fonctionne avec le template redirect.html.twig.\nalias\nUn alias est une redirection vers la page courante.\nExemple :\n---\ntitle: \"About\"\nalias:\n - contact\n---\nDans l’exemple précédent, contact\/ redirige vers about\/.\noutput\nDéfinit le format de sortie de la page.\nLes formats disponibles sont : html, atom, rss, json, xml, etc.\nVous pouvez définir un ou plusieurs formats dans un tableau.\nIl n’est pas obligatoire de définir un format de sortie, mais si vous le faites, il doit correspondre à l’un des formats disponibles définis dans la Configuration.\nExemple :\n---\noutput: [html, atom]\n---\nexternal\nUne page avec une variable external tente de récupérer le contenu de la ressource ciblée.\nExemple :\n---\nexternal: \"https:\/\/raw.githubusercontent.com\/Cecilapp\/Cecil\/main\/README.md\"\n---\nexcluded\nDéfinissez excluded à true pour masquer une page des pages de liste (c.-à-d. : Home page, Section, Sitemap, etc.).\nExemple :\n---\nexcluded: true\n---\nexcluded est différent de published : une page exclue est publiée, mais masquée des pages de liste.\nDepuis la version 8.49.0, l’ancienne variable exclude a été remplacée par excluded.", "content_html": "

Front matter

\n

Le front matter peut contenir des variables personnalisées appliquées à la page courante.

\n

Il doit se trouver au tout début du fichier et être un YAML valide.

\n

Variables prédéfinies

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
VariableDescriptionValeur par défautExemple
titleTitreNom de fichier sans extension.Post 1
layoutTemplateVoir Lookup rules.404
dateDate de créationDate de création du fichier (objet PHP DateTime).2019/04/15
sectionSectionSection de la page.blog
pathCheminPath de la page.blog/post-1
slugSlugSlug de la page.post-1
publishedPublié ou nontrue.false
draftBrouillon ou nonfalse.true
\n\n

updated

\n

La variable updated sert à définir la date de dernière modification d’une page.

\n

Exemple :

\n
---\nupdated: 2026-02-02\n---
\n\n

menu

\n

Une page peut être ajoutée à un menu.

\n

Le nom de l’entrée est le title de la page et l’URL est le path de la page.

\n

La même page peut être ajoutée à plusieurs menus, et la position de chaque entrée peut être définie avec la clé weight (la plus faible en premier). La clé name peut être utilisée pour personnaliser le nom de l’entrée par menu.

\n

Exemples :

\n
---\nmenu: main\n---
\n
---\nmenu: [main, navigation] # same page in multiple menus\n---
\n
---\nmenu:\n  main:\n    weight: 10\n  navigation:\n    weight: 20\n---
\n
---\ntitle: 'Notre expertise'\nmenu:\n  main:\n    weight: 15\n  footer:\n    weight: 15\n    name: \"Expertise\" # personnalise le nom de l'entrée dans ce menu\n---
\n

Taxonomie

\n

La taxonomie permet de connecter, relier et classer le contenu de votre site Web.
\nDans Cecil, ces termes sont regroupés dans des vocabulaires.

\n

Les vocabulaires sont déclarés dans la Configuration.

\n
\n
Vocabulaire
\n
Une catégorisation du contenu (ex. : tags, categories, etc.).
\n
Terme
\n
Un terme est un élément d’un vocabulaire (ex. : Développement, PHP, etc.).
\n
\n

Exemple :

\n
---\ntags: [\"Développement\", \"PHP\"]\n---
\n

Cecil génère ensuite, pour chaque vocabulaire :

\n\n

Voir les règles de recherche des templates et les variables de taxonomie pour personnaliser ces pages.

\n

Planification

\n

Planifie la publication des pages.

\n

Exemple :

\n

La page sera publiée si la date courante est >= 2023-02-07 :

\n
schedule:\n  publish: 2023-02-07
\n

Cette page est publiée si la date courante est <= 2022-04-28 :

\n
schedule:\n  expiry: 2022-04-28
\n

redirect

\n

Comme son nom l’indique, la variable redirect sert à rediriger une page vers une URL dédiée.

\n

Exemple :

\n
---\nredirect: \"https://arnaudligny.fr\"\n---
\n\n

alias

\n

Un alias est une redirection vers la page courante.

\n

Exemple :

\n
---\ntitle: \"About\"\nalias:\n  - contact\n---
\n

Dans l’exemple précédent, contact/ redirige vers about/.

\n

output

\n

Définit le format de sortie de la page.

\n

Les formats disponibles sont : html, atom, rss, json, xml, etc.
\nVous pouvez définir un ou plusieurs formats dans un tableau.

\n

Il n’est pas obligatoire de définir un format de sortie, mais si vous le faites, il doit correspondre à l’un des formats disponibles définis dans la Configuration.

\n

Exemple :

\n
---\noutput: [html, atom]\n---
\n

external

\n

Une page avec une variable external tente de récupérer le contenu de la ressource ciblée.

\n

Exemple :

\n
---\nexternal: \"https://raw.githubusercontent.com/Cecilapp/Cecil/main/README.md\"\n---
\n

excluded

\n

Définissez excluded à true pour masquer une page des pages de liste (c.-à-d. : Home page, Section, Sitemap, etc.).

\n

Exemple :

\n
---\nexcluded: true\n---
\n\n", "language": "fr" }, { "id": "https://cecil.app/fr/documentation/contenu/markdown/", "url": "https://cecil.app/fr/documentation/contenu/markdown/", "title": "Markdown", "summary": "Syntaxe et extensions Markdown : attributs, liens, images, table des matières, notes, coloration syntaxique, etc.", "date_published": "2026-03-27T00:00:00+00:00", "date_modified": "2026-10-03T00:00:00+00:00","content_text": "Markdown\nCecil prend en charge le format Markdown, ainsi que Markdown Extra.\nCecil fournit aussi des fonctionnalités supplémentaires pour enrichir votre contenu, voir ci-dessous.\nAttributs\nAvec Markdown Extra, vous pouvez définir un id, une classe et des attributs personnalisés sur certains éléments à l’aide d’un bloc d’attributs.\nPar exemple, placez le(s) attribut(s) souhaité(s) après un en-tête, un bloc de code délimité, un lien ou une image en fin de ligne, entre accolades, comme ceci :\n## En-tête {#id .class attribute=value}\nPour un élément en ligne, comme un lien, vous devez utiliser un retour à la ligne après l’accolade fermante :\nLorem ipsum [dolor](url){attribute=value} \nsit amet.\nLiens\nVous pouvez créer un lien avec la syntaxe [Texte](url) ; url peut être un chemin, un chemin relatif vers un fichier Markdown, une URL externe, etc.\nExemple :\n[Link to a path](\/about\/)\n[Link to a Markdown file](\/fr\/a-propos\/)\n[Link to Cecil website](https:\/\/cecil.app)\nUn lien relatif vers un fichier Markdown est résolu depuis le dossier du fichier courant (comme sur GitHub), puis remplacé par l’URL de la page ciblée.\nLien vers une page\nVous pouvez facilement créer un lien vers une page avec la syntaxe [Titre de page](page:page-id).\nExemple :\n[Link to a blog post](page:blog\/post-1)\nExterne\nPar défaut, les liens externes ont la valeur suivante pour l’attribut rel : noopener noreferrer.\nExemple :\n<a href=\"<url>\" rel=\"noopener noreferrer\">Link to another website<\/a>\nVous pouvez modifier ce comportement avec les options pages.body.links.external.\nLiens intégrés\nVous pouvez laisser Cecil essayer de transformer un lien en contenu embarqué en utilisant l’attribut {embed} ou en activant l’option de configuration globale pages.body.links.embed.enabled à true.\nSeuls les liens YouTube, Vimeo, Dailymotion et GitHub Gists sont pris en charge.\nExemple :\n[CECIL : LE générateur de SITES STATIQUES en PHP](https:\/\/www.youtube.com\/watch?v=ur8koU0iYvc){embed}\n\n\n\nLocal video\/audio files\nCecil peut aussi créer des éléments HTML vidéo et audio, selon l’extension du fichier.\nExemple :\n[Video file](video.mp4){embed controls poster=\/images\/video-test.png}\n[Audio file](song.mp3){embed controls}\nEst converti en :\n<video src=\"\/video.mp4\" controls poster=\"\/images\/video-test.png\" style=\"max-width:100%;height:auto;\"><\/video>\n<audio src=\"\/song.mp3\" controls><\/audio>\nImages\nPour ajouter une image, utilisez un point d’exclamation (!) suivi d’une description alternative entre crochets ([]), puis du chemin ou de l’URL de l’image entre parenthèses (()).\nVous pouvez facultativement ajouter un titre entre guillemets.\n![Alternative description](\/image.jpg \"Image title\")\nLe chemin doit être relatif à la racine de votre site Web (ex. : \/image.jpg), mais Cecil est capable de normaliser un chemin relatif aux répertoires assets et static (ex. : ..\/..\/assets\/image.jpg).\nLazy loading\nCecil ajoute l’attribut loading=\"lazy\" à chaque image.\nExemple :\n![](\/image.jpg)\nEst converti en :\n<img src=\"\/image.jpg\" loading=\"lazy\">\nVous pouvez désactiver ce comportement avec l’attribut {loading=eager} ou avec l’option lazy.\nDecoding\nCecil ajoute l’attribut decoding=\"async\" à chaque image.\nExemple :\n![](\/image.jpg)\nEst converti en :\n<img src=\"\/image.jpg\" decoding=\"async\">\nVous pouvez désactiver ce comportement avec l’attribut {decoding=auto} ou avec l’option decoding.\nRedimensionnement\nChaque image du body peut être redimensionnée automatiquement en définissant une largeur inférieure à celle d’origine, avec l’attribut additionnel {width=X}.\nExemple :\n![](\/image.jpg){width=800}\nEst converti en :\n<img src=\"\/thumbnails\/800\/image.jpg\" width=\"800\" height=\"600\">\nLe ratio est conservé (l’attribut height est calculé automatiquement), le fichier original n’est pas modifié et la version redimensionnée est stockée dans \/thumbnails\/<width>\/.\nCette fonctionnalité nécessite une bibliothèque de traitement d’images : Imagick est utilisé en priorité s’il est disponible (et capable de lire le JPEG et le PNG), puis libvips (via l’extension PHP FFI), et enfin GD en dernier recours ; sinon, elle ajoute seulement un attribut HTML width à la balise img.\nLe support de libvips est optionnel et n’est pas inclus dans cecil.phar. Pour l’utiliser, Cecil doit être installé avec Composer et il faut :\n\nlibvips installé sur le système\nl’extension PHP FFI activée\nle paquet intervention\/image-driver-vips installé avec Cecil\n\nSi Cecil est une dépendance de votre projet (voir Bibliothèque) :\ncomposer require intervention\/image-driver-vips\nSi Cecil est installé globalement :\ncomposer global require cecil\/cecil intervention\/image-driver-vips\nFormats\nSi l’option formats est définie, des images alternatives sont créées et ajoutées.\nExemple :\n![](\/image.jpg)\nPeut être converti en :\n<picture>\n <source srcset=\"\/image.avif\" type=\"image\/avif\">\n <source srcset=\"\/image.webp\" type=\"image\/webp\">\n <img src=\"\/image.jpg\">\n<\/picture>\nVeuillez noter que tous les formats d’image ne sont pas toujours inclus dans les extensions d’image PHP.\nResponsive\nSi l’option responsive est activée, alors toutes les images du body seront automatiquement rendues « responsive ».\nExemple :\n![](\/image.jpg){width=800}\nsera converti en :\n<img src=\"\/thumbnails\/800\/image.jpg\" width=\"800\" height=\"600\"\n srcset=\"\/thumbnails\/320\/image.jpg 320w,\n \/thumbnails\/640\/image.jpg 640w,\n \/thumbnails\/800\/image.jpg 800w\"\n sizes=\"100vw\"\n>\nComme une image du body est convertie en Asset, les différentes largeurs doivent être définies dans la configuration des assets.\nL’attribut sizes prend la valeur de l’option de configuration assets.images.responsive.sizes.default, mais peut être modifié en créant une nouvelle entrée nommée d’après une class ajoutée à l’image.\nExemple :\nassets:\n images:\n responsive:\n sizes:\n default: 100vw\n my_class: \"(max-width: 800px) 768px, 1024px\"\n![](\/image.jpg){.my_class}\nVous pouvez combiner les options formats et responsive.\nCSS class\nVous pouvez définir une valeur par défaut pour l’attribut class de chaque image avec l’option class.\nCaption\nLe titre optionnel peut être utilisé pour créer automatiquement une légende (figcaption) en activant l’option caption.\nExemple :\n![](\/images\/img.jpg \"Title\")\nEst converti en :\n<figure>\n <img src=\"\/image.jpg\" title=\"Title\">\n <figcaption>Title<\/figcaption>\n<\/figure>\nLa légende prend en charge le contenu Markdown.\nImage localisée\nPour les pages traduites, Cecil recherche d’abord un fichier suffixé par la langue lors de la résolution des chemins d’image Markdown.\nExemple :\n![](\/images\/cecil-logo.png)\nAvec une page française (fr), Cecil essaie d’abord \/images\/cecil-logo.fr.png, puis revient à \/images\/cecil-logo.png.\nPlaceholder\nComme les images sont généralement des ressources plus lourdes et plus lentes, et qu’elles ne bloquent pas le rendu, il est préférable de donner aux utilisateurs quelque chose à voir pendant qu’ils attendent leur chargement.\nL’attribut placeholder accepte 2 options :\n\ncolor: affiche un fond coloré (basé sur la couleur dominante de l’image)\nlqip: Low-Quality Image Placeholder\n\nExemples :\n![](\/images\/img.jpg){placeholder=color}\n![](\/images\/img.jpg){placeholder=lqip}\nVous pouvez définir une valeur pour l’attribut placeholder de chaque image avec l’option placeholder.\nL’option lqip n’est pas compatible avec les GIF animés.\nTable des matières\nVous pouvez ajouter une table des matières avec la syntaxe Markdown suivante :\n[toc]\nPar défaut, la ToC extrait les en-têtes H2 et H3. Vous pouvez modifier ce comportement avec les options de body.\nExtrait\nUn extrait peut être défini dans le body avec l’une des balises suivantes : excerpt ou break.\nExemple :\nIntroduction.\n<!-- excerpt -->\nMain content.\nUtilisez ensuite le filtre excerpt_html dans votre template.\nNotes\nCréez un bloc de Note (info, astuce, important, etc.).\nExemple :\n:::tip\n**Tip:** This is advice.\n:::\nEst converti en :\n<aside class=\"note note-tip\">\n <p>\n <strong>Tip:<\/strong> This is advice.\n <\/p>\n<\/aside>\nTip: This is advice.\nAutres exemples :\nempty\ninfo\ntip\nimportant\nwarning\ncaution\nColoration syntaxique\nLa coloration syntaxique des blocs de code est activée par défaut avec l’option pages.body.highlight.\nSi besoin, vous pouvez la désactiver avec :\npages:\n body:\n highlight: false\nExemple :\n\n```php\necho \"Hello world\";\n```\n\nEst rendu en :\necho \"Hello world\";\nVous pouvez personnaliser le style de coloration syntaxique en créant votre propre thème. Consultez le guide des thèmes de Highlight.js.\nTexte inséré\nReprésente une plage de texte qui a été ajoutée.\n++text++\nEst converti en :\n<ins>text<\/ins>", "content_html": "

Markdown

\n

Cecil prend en charge le format Markdown, ainsi que Markdown Extra.

\n

Cecil fournit aussi des fonctionnalités supplémentaires pour enrichir votre contenu, voir ci-dessous.

\n

Attributs

\n

Avec Markdown Extra, vous pouvez définir un id, une classe et des attributs personnalisés sur certains éléments à l’aide d’un bloc d’attributs.
\nPar exemple, placez le(s) attribut(s) souhaité(s) après un en-tête, un bloc de code délimité, un lien ou une image en fin de ligne, entre accolades, comme ceci :

\n
## En-tête {#id .class attribute=value}
\n\n

Liens

\n

Vous pouvez créer un lien avec la syntaxe [Texte](url) ; url peut être un chemin, un chemin relatif vers un fichier Markdown, une URL externe, etc.

\n

Exemple :

\n
[Link to a path](/about/)\n[Link to a Markdown file](/fr/a-propos/)\n[Link to Cecil website](https://cecil.app)
\n\n

Lien vers une page

\n

Vous pouvez facilement créer un lien vers une page avec la syntaxe [Titre de page](page:page-id).

\n

Exemple :

\n
[Link to a blog post](page:blog/post-1)
\n

Externe

\n

Par défaut, les liens externes ont la valeur suivante pour l’attribut rel : noopener noreferrer.

\n

Exemple :

\n
<a href=\"<url>\" rel=\"noopener noreferrer\">Link to another website</a>
\n

Vous pouvez modifier ce comportement avec les options pages.body.links.external.

\n

Liens intégrés

\n

Vous pouvez laisser Cecil essayer de transformer un lien en contenu embarqué en utilisant l’attribut {embed} ou en activant l’option de configuration globale pages.body.links.embed.enabled à true.

\n\n

Exemple :

\n
[CECIL : LE générateur de SITES STATIQUES en PHP](https://www.youtube.com/watch?v=ur8koU0iYvc){embed}
\n

\n\n

\n

Local video/audio files

\n

Cecil peut aussi créer des éléments HTML vidéo et audio, selon l’extension du fichier.

\n

Exemple :

\n
[Video file](video.mp4){embed controls poster=/images/video-test.png}\n[Audio file](song.mp3){embed controls}
\n

Est converti en :

\n
<video src=\"/video.mp4\" controls poster=\"/images/video-test.png\" style=\"max-width:100%;height:auto;\"></video>\n<audio src=\"/song.mp3\" controls></audio>
\n

Images

\n

Pour ajouter une image, utilisez un point d’exclamation (!) suivi d’une description alternative entre crochets ([]), puis du chemin ou de l’URL de l’image entre parenthèses (()).
\nVous pouvez facultativement ajouter un titre entre guillemets.

\n
![Alternative description](/image.jpg \"Image title\")
\n\n

Lazy loading

\n

Cecil ajoute l’attribut loading=\"lazy\" à chaque image.

\n

Exemple :

\n
![](/image.jpg)
\n

Est converti en :

\n
<img src=\"/image.jpg\" loading=\"lazy\">
\n\n

Decoding

\n

Cecil ajoute l’attribut decoding=\"async\" à chaque image.

\n

Exemple :

\n
![](/image.jpg)
\n

Est converti en :

\n
<img src=\"/image.jpg\" decoding=\"async\">
\n\n

Redimensionnement

\n

Chaque image du body peut être redimensionnée automatiquement en définissant une largeur inférieure à celle d’origine, avec l’attribut additionnel {width=X}.

\n

Exemple :

\n
![](/image.jpg){width=800}
\n

Est converti en :

\n
<img src=\"/thumbnails/800/image.jpg\" width=\"800\" height=\"600\">
\n\n\n\n

Formats

\n

Si l’option formats est définie, des images alternatives sont créées et ajoutées.

\n

Exemple :

\n
![](/image.jpg)
\n

Peut être converti en :

\n
<picture>\n  <source srcset=\"/image.avif\" type=\"image/avif\">\n  <source srcset=\"/image.webp\" type=\"image/webp\">\n  <img src=\"/image.jpg\">\n</picture>
\n\n

Responsive

\n

Si l’option responsive est activée, alors toutes les images du body seront automatiquement rendues « responsive ».

\n

Exemple :

\n
![](/image.jpg){width=800}
\n

sera converti en :

\n
<img src=\"/thumbnails/800/image.jpg\" width=\"800\" height=\"600\"\n  srcset=\"/thumbnails/320/image.jpg 320w,\n          /thumbnails/640/image.jpg 640w,\n          /thumbnails/800/image.jpg 800w\"\n  sizes=\"100vw\"\n>
\n\n

L’attribut sizes prend la valeur de l’option de configuration assets.images.responsive.sizes.default, mais peut être modifié en créant une nouvelle entrée nommée d’après une class ajoutée à l’image.

\n

Exemple :

\n
assets:\n  images:\n    responsive:\n      sizes:\n        default: 100vw\n        my_class: \"(max-width: 800px) 768px, 1024px\"
\n
![](/image.jpg){.my_class}
\n\n

CSS class

\n

Vous pouvez définir une valeur par défaut pour l’attribut class de chaque image avec l’option class.

\n

Caption

\n

Le titre optionnel peut être utilisé pour créer automatiquement une légende (figcaption) en activant l’option caption.

\n

Exemple :

\n
![](/images/img.jpg \"Title\")
\n

Est converti en :

\n
<figure>\n  <img src=\"/image.jpg\" title=\"Title\">\n  <figcaption>Title</figcaption>\n</figure>
\n\n

Image localisée

\n

Pour les pages traduites, Cecil recherche d’abord un fichier suffixé par la langue lors de la résolution des chemins d’image Markdown.

\n

Exemple :

\n
![](/images/cecil-logo.png)
\n

Avec une page française (fr), Cecil essaie d’abord /images/cecil-logo.fr.png, puis revient à /images/cecil-logo.png.

\n

Placeholder

\n

Comme les images sont généralement des ressources plus lourdes et plus lentes, et qu’elles ne bloquent pas le rendu, il est préférable de donner aux utilisateurs quelque chose à voir pendant qu’ils attendent leur chargement.

\n

L’attribut placeholder accepte 2 options :

\n
    \n
  1. color: affiche un fond coloré (basé sur la couleur dominante de l’image)
    2. \n
  2. lqip: Low-Quality Image Placeholder
    3. \n
\n

Exemples :

\n
![](/images/img.jpg){placeholder=color}\n![](/images/img.jpg){placeholder=lqip}
\n\n\n

Table des matières

\n

Vous pouvez ajouter une table des matières avec la syntaxe Markdown suivante :

\n
[toc]
\n\n

Extrait

\n

Un extrait peut être défini dans le body avec l’une des balises suivantes : excerpt ou break.

\n

Exemple :

\n
Introduction.\n<!-- excerpt -->\nMain content.
\n

Utilisez ensuite le filtre excerpt_html dans votre template.

\n

Notes

\n

Créez un bloc de Note (info, astuce, important, etc.).

\n

Exemple :

\n
:::tip\n**Tip:** This is advice.\n:::
\n

Est converti en :

\n
<aside class=\"note note-tip\">\n  <p>\n    <strong>Tip:</strong> This is advice.\n  </p>\n</aside>
\n\n

Autres exemples :

\n\n\n\n\n\n\n

Coloration syntaxique

\n

La coloration syntaxique des blocs de code est activée par défaut avec l’option pages.body.highlight.

\n

Si besoin, vous pouvez la désactiver avec :

\n
pages:\n  body:\n    highlight: false
\n

Exemple :

\n
\n```php\necho \"Hello world\";\n```\n
\n

Est rendu en :

\n
echo \"Hello world\";
\n\n

Texte inséré

\n

Représente une plage de texte qui a été ajoutée.

\n
++text++
\n

Est converti en :

\n
<ins>text</ins>
", "language": "fr" }, { "id": "https://cecil.app/fr/documentation/contenu/multilingue/", "url": "https://cecil.app/fr/documentation/contenu/multilingue/", "title": "Multilingue", "summary": "Traduisez les pages via le nom de fichier ou le front matter et liez les pages traduites.", "date_published": "2026-03-27T00:00:00+00:00", "date_modified": "2026-10-03T00:00:00+00:00","content_text": "Multilingue\nSi vos pages sont disponibles en plusieurs langues, il existe 2 façons différentes de le définir :\nVia le nom de fichier\nC’est la méthode la plus courante pour traduire une page depuis la langue principale vers une autre langue.\nIl suffit de dupliquer la page de référence et de lui ajouter en suffixe le code de la langue cible (ex. : fr).\nExemple :\n├─ about.md # the reference page\n└─ about.fr.md # the french version (`fr`)\nVous pouvez changer l’URL de la page traduite avec la variable slug dans le front matter. Par exemple :\n---\nslug: a-propos\n---\n# about.md -> \/about\/\n# about.fr.md -> \/fr\/a-propos\/\nVia le front matter\nSi vous souhaitez créer une page dans une langue autre que la langue principale, sans qu’elle soit la traduction d’une page existante, vous pouvez utiliser la variable language dans son front matter.\nExemple :\n---\nlanguage: fr\n---\nLier les pages traduites\nChaque page traduite référence les pages dans les autres langues.\nCette collection de pages est disponible dans les templates via la variable suivante :\n{{ page.translations }}\nLa variable langref est fournie par défaut, mais vous pouvez la modifier dans le front matter :\n---\nlangref: my-page-ref\n---", "content_html": "

Multilingue

\n

Si vos pages sont disponibles en plusieurs langues, il existe 2 façons différentes de le définir :

\n

Via le nom de fichier

\n

C’est la méthode la plus courante pour traduire une page depuis la langue principale vers une autre langue.

\n

Il suffit de dupliquer la page de référence et de lui ajouter en suffixe le code de la langue cible (ex. : fr).

\n

Exemple :

\n
├─ about.md    # the reference page\n└─ about.fr.md # the french version (`fr`)
\n\n

Via le front matter

\n

Si vous souhaitez créer une page dans une langue autre que la langue principale, sans qu’elle soit la traduction d’une page existante, vous pouvez utiliser la variable language dans son front matter.

\n

Exemple :

\n
---\nlanguage: fr\n---
\n

Lier les pages traduites

\n

Chaque page traduite référence les pages dans les autres langues.

\n

Cette collection de pages est disponible dans les templates via la variable suivante :

\n
{{ page.translations }}
\n", "language": "fr" }, { "id": "https://cecil.app/fr/documentation/contenu/contenu-dynamique/", "url": "https://cecil.app/fr/documentation/contenu/contenu-dynamique/", "title": "Contenu dynamique", "summary": "Utilisez des variables et expressions Twig dans le contenu des pages.", "date_published": "2026-03-27T00:00:00+00:00", "date_modified": "2026-10-03T00:00:00+00:00","content_text": "Contenu dynamique\nVous pouvez créer du contenu dynamique dans une page en utilisant la fonction Twig template_from_string.\n{{ include(template_from_string(page.content, \"contenu dynamique pour la page \" ~ page.id)) }}\nAvec cette approche, vous pouvez utiliser n’importe quelle variable de page dans le body de la page.\n--\nvar: 'value'\n---\nLa valeur de `var` est {{ page.var }}.", "content_html": "

Contenu dynamique

\n

Vous pouvez créer du contenu dynamique dans une page en utilisant la fonction Twig template_from_string.

\n
{{ include(template_from_string(page.content, \"contenu dynamique pour la page \" ~ page.id)) }}
\n

Avec cette approche, vous pouvez utiliser n’importe quelle variable de page dans le body de la page.

\n
--\nvar: 'value'\n---\nLa valeur de `var` est {{ page.var }}.
", "language": "fr" } ] }