Markdown DSFR — Configuration

Éditez le contenu et personnalisez l'apparence de votre page.

Personnalisez l'en-tête de la page avec son titre, son slogan et logo.

Un simple texte (ex: Intitulé <br/> officiel), une URL d'une image, ou le code d'une balise <img> ou <svg>.

Le nom du site ou de l'entité

Variable : {{{ header_title }}}
Une baseline, sous le nom du site (optionnel)

Variable : {{{ header_subtitle }}}
Permet de réécrire entièrement la structure HTML du header.

Supporte le HTML et les expressions {{ handlebars }}. Veillez à respecter les classes CSS du DSFR pour maintenir l'accessibilité et le design.

Voir le guide template Handlebar.js

Confirmer la réinitialisation de l'en-tête ?

Êtes-vous sûr de vouloir restaurer le template du header par défaut ? Attention, toutes vos modifications seront définitivement perdues.

Aide à la rédaction de l'en-tête DSFR

Personnalisez le pied de page avec le logo, la description et les mentions légales.

Un simple texte (ex: Intitulé <br/> officiel), une URL d'une image, ou le code d'une balise <img> ou <svg>.

Texte de présentation (3 lignes max recommandé).

Variable : {{{ footer_description }}}
Mention de licence (ex: Etalab).

Variable : {{{ footer_license }}}
Mention de copyright.

Variable : {{{ footer_copyright }}}
Permet de réécrire entièrement la structure HTML du footer.

Supporte le HTML et les expressions Handlebars.

Confirmer la réinitialisation du pied de page ?

Êtes-vous sûr de vouloir restaurer le pied de page avec les valeurs par défaut ? Attention, toutes vos modifications seront définitivement perdues.

Aide à la rédaction du pied de page DSFR

Gérez l'affichage et le comportement du sommaire généré à partir des titres via la librairie Tocbot.js

Confirmer la réinitialisation du
sommaire ?

Êtes-vous sûr de vouloir restaurer la configuration du sommaire avec les valeurs par défaut ? Attention, toutes vos modifications seront définitivement perdues.

Définissez le titre principal affiché en haut de votre sommaire (ex: "Sommaire" ou "Table des matières").

Mettre à vide pour le cacher.
Personnalisez les couleurs de l'élément actif, des textes secondaires, du survol et de la bordure latérale du sommaire. Le sélecteur de couleur permet d'utiliser des valeurs RGB et RGBA pour ajuster l'opacité de vos éléments.

Ces réglages surchargent les variables CSS suivantes : --toc-primary, --toc-text-muted, --toc-bg-hover et --toc-border.
Accédez aux réglages avancés pour personnaliser le comportement et le rendu de votre sommaire généré par Tocbot.js. Cette libraire analyse la structure de votre page pour créer un sommaire interactif à partir de vos titres.

Le programme génère automatiquement des slugs (identifiants uniques) pour chaque titre afin de créer des ancres de navigation, vous évitant ainsi d'avoir à les définir manuellement dans votre contenu.

Vous pouvez affiner la sélection en utilisant la propriété ignoreSelector pour exclure certains titres spécifiques du rendu final en écrivant en markdown
## Mon titre {.toc-ignore}

Consulter la documentation API Tocbot.js v4.36.4

Optimisez l'affichage de vos blocs de code et profitez d'une coloration syntaxique avancée grâce à la bibliothèque Prism.js.