Sur cette page
Markdown
Cecil prend en charge le format Markdown, ainsi que Markdown Extra.
Cecil fournit aussi des fonctionnalités supplémentaires pour enrichir votre contenu, voir ci-dessous.
Attributs
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.
Par 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 :
## En-tête {#id .class attribute=value}Liens
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.
Exemple :
[Link to a path](/about/)
[Link to a Markdown file](/fr/a-propos/)
[Link to Cecil website](https://cecil.app)Lien vers une page
Vous pouvez facilement créer un lien vers une page avec la syntaxe [Titre de page](page:page-id).
Exemple :
[Link to a blog post](page:blog/post-1)Externe
Par défaut, les liens externes ont la valeur suivante pour l’attribut rel : noopener noreferrer.
Exemple :
<a href="<url>" rel="noopener noreferrer">Link to another website</a>Vous pouvez modifier ce comportement avec les options pages.body.links.external.
Liens intégrés
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.
Exemple :
[CECIL : LE générateur de SITES STATIQUES en PHP](https://www.youtube.com/watch?v=ur8koU0iYvc){embed}Local video/audio files
Cecil peut aussi créer des éléments HTML vidéo et audio, selon l’extension du fichier.
Exemple :
[Video file](video.mp4){embed controls poster=/images/video-test.png}
[Audio file](song.mp3){embed controls}Est converti en :
<video src="/video.mp4" controls poster="/images/video-test.png" style="max-width:100%;height:auto;"></video>
<audio src="/song.mp3" controls></audio>Images
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 (()).
Vous pouvez facultativement ajouter un titre entre guillemets.
Lazy loading
Cecil ajoute l’attribut loading="lazy" à chaque image.
Exemple :
Est converti en :
<img src="/image.jpg" loading="lazy">Decoding
Cecil ajoute l’attribut decoding="async" à chaque image.
Exemple :
Est converti en :
<img src="/image.jpg" decoding="async">Redimensionnement
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}.
Exemple :
{width=800}Est converti en :
<img src="/thumbnails/800/image.jpg" width="800" height="600">Formats
Si l’option formats est définie, des images alternatives sont créées et ajoutées.
Exemple :
Peut être converti en :
<picture>
<source srcset="/image.avif" type="image/avif">
<source srcset="/image.webp" type="image/webp">
<img src="/image.jpg">
</picture>Responsive
Si l’option responsive est activée, alors toutes les images du body seront automatiquement rendues « responsive ».
Exemple :
{width=800}sera converti en :
<img src="/thumbnails/800/image.jpg" width="800" height="600"
srcset="/thumbnails/320/image.jpg 320w,
/thumbnails/640/image.jpg 640w,
/thumbnails/800/image.jpg 800w"
sizes="100vw"
>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.
Exemple :
assets:
images:
responsive:
sizes:
default: 100vw
my_class: "(max-width: 800px) 768px, 1024px"{.my_class}CSS class
Vous pouvez définir une valeur par défaut pour l’attribut class de chaque image avec l’option class.
Caption
Le titre optionnel peut être utilisé pour créer automatiquement une légende (figcaption) en activant l’option caption.
Exemple :
Est converti en :
<figure>
<img src="/image.jpg" title="Title">
<figcaption>Title</figcaption>
</figure>Image localisée
Pour les pages traduites, Cecil recherche d’abord un fichier suffixé par la langue lors de la résolution des chemins d’image Markdown.
Exemple :
Avec une page française (fr), Cecil essaie d’abord /images/cecil-logo.fr.png, puis revient à /images/cecil-logo.png.
Placeholder
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.
L’attribut placeholder accepte 2 options :
color: affiche un fond coloré (basé sur la couleur dominante de l’image)lqip: Low-Quality Image Placeholder
Exemples :
{placeholder=color}
{placeholder=lqip}Table des matières
Vous pouvez ajouter une table des matières avec la syntaxe Markdown suivante :
[toc]Extrait
Un extrait peut être défini dans le body avec l’une des balises suivantes : excerpt ou break.
Exemple :
Introduction.
<!-- excerpt -->
Main content.Utilisez ensuite le filtre excerpt_html dans votre template.
Notes
Créez un bloc de Note (info, astuce, important, etc.).
Exemple :
:::tip
**Tip:** This is advice.
:::Est converti en :
<aside class="note note-tip">
<p>
<strong>Tip:</strong> This is advice.
</p>
</aside>Autres exemples :
Coloration syntaxique
La coloration syntaxique des blocs de code est activée par défaut avec l’option pages.body.highlight.
Si besoin, vous pouvez la désactiver avec :
pages:
body:
highlight: falseExemple :
```php echo "Hello world"; ```
Est rendu en :
echo "Hello world";Texte inséré
Représente une plage de texte qui a été ajoutée.
++text++Est converti en :
<ins>text</ins>