Guide d’écriture

Mise en forme

Le site utilise Kirby 4 avec un thème personnalisé.

Le contenu est à rédiger en Markdown (Markdown Extra avec des Kirbytags) et peut accepter le HTML brut.

Notes de pied de page

Les notes de bas de page ne suivent pas les règles de rédaction de Markdown Extra ¹ .

Pour faire une note de bas de page, il faut précéder le texte de la note par un circonflexe ^ et encadrer le tout de crochets :

Voilà un texte [\^ et voilà la note]

La note sera automagiquement ajoutée en fin de page.
Il est possible d’utiliser du markdown et du KirbyText dans les notes, si vous souhaitez utiliser un crochet fermant il faut le faire précéder d’un backslash : \] (sinon c’est celui-ci qui fermera la note).

Pas de lettrine

Par défaut, une lettrine est appliquée en tout début d’article. Si ce n’est pas souhaité, on peut désactiver cet effet en ajoutant une classe no-cap-please sur le paragraphe correspondant.

<p class="no-cap-please">Exemple.</p>

Code

La mise en forme d’exemples de code se fait avec Prism et son thème Tomorrow Night. Le site inclut la coloration syntaxique pour les langages suivants (tels que définis dans Prism) : markup, css, clike, javascript, css-extras, markup-templating, http, php, scss, ruby.

Pour créer un bloc de code, il faut utiliser la syntaxe Markdown (```), et insérer l’extension du langage souhaité. Par exemple, en écrivant le texte suivant :

```js
console.log("Exemple.")
```

le bloc suivant sera affiché :

console.log("Exemple.")

Section

Il est possible de marquer visuellement différentes sections au sein d’un article afin de rendre la mise en page moins monotone, en particulier sur les articles les plus longs. Pour cela, on englobe la partie concernée d’une balise div avec la class section :

<div class="section" markdown="1">…</div>

Par souci de compatibilité avec la syntaxe Markdown à l’intérieur de la balise div, il ne faut pas oublier le markdown=1.

Cette notion de section n’a pas de rapport avec la balise HTML <section>.

Citation

Il est possible de mettre en valeur des citations :

Qui ne tente rien n’a rien ! Même si souvent, qui tente n’a rien quand même.
— Personne pragmatique, dans Proverbe

Pour ce faire, il vous suffit simplement d’utiliser la balise <blockquote> dans laquelle le titre de l’œuvre citée devrait être encadrée par la balise <cite> — mais pas l’auteur ou l’autrice, utilisant plutôt un traitement en gras.

<blockquote>
    <p>Qui ne tente rien n’a rien ! Même si souvent, qui tente n’a rien quand même.<br>
    — <strong>Personne pragmatique</strong>, dans <cite>Proverbe</cite></p>
</blockquote>

Mise en avant

Pour mettre visuellement en avant une portion de texte qui n’est pas une citation ou n’a pas de valeur sémantique particulière, vous pouvez utiliser la classe pullquote.

<p class="pullquote">Ceci est un texte mis en avant visuellement.</p>

Le code ci-dessus s’affichera ainsi :

Ceci est un texte mis en avant visuellement.

Image et Légende

Pour insérer une image, la meilleure manière est d’utiliser le KirbyTag image (voir la Doc sur Kirby). La valeur initiale doit être le nom de l’image tel que listé parmi les fichiers et médias disponibles, et non l’URL de l’image. Par exemple (\image: mon_image.jpg alt: texte alternatif), et non (\image: /media/pages/recommandations/mon_image.jpg alt: texte alternatif). La bonne valeur sera donnée au tag en faisant un glisser-déplacer depuis la liste de fichiers et médias vers le champ de texte, ou en utilisant le menu « Fichier » dans le menu du champ de texte.

Ce tag doit avoir un attribut alt pour l’alternative textuelle, et sera restitué vide s’il est omis. Il peut aussi avoir l’attribut link, qui peut avoir comme valeur une URL (pour que l’image ait un lien qui renvoie vers cette URL) ou le mot-clé self (pour que l’image ait un lien vers le fichier de l’image).

(\image: mon_image.jpg alt: Texte alternatif link: self)

Les images peuvent être annotées d’une légende qui sera visible juste en dessous, en utilisant l’attribut caption dans le KirbyTag (si nécessaire on peut également créer manuellement un texte de légende qui héritera de la même présentation en ajoutant une classe caption-text).

(\image: mon_image.jpg alt: Texte alternatif caption: Légende de l’image, affichée juste dessous)

Vous pouvez aligner une petite image à gauche ou à droite de la page en utilisant les classes alignleft et alignright dans l’attribut class, la centrer avec la classe aligncenter, et étendre une grande image au delà des marges en utilisant la classe size-large.

(\image: mon_image.jpg alt: Texte alternatif class: alignright)

(\image: mon_image.jpg alt: Texte alternatif class: aligncenter)

(\image: mon_image.jpg alt: Texte alternatif class: size-large)

Les images alignées sur un côté ont une marge négative pour agrémenter la mise en page, ne vous en étonnez pas.

Vidéos

Pour insérer une vidéo externe au sein d’un article, vous pouvez utiliser le KirbyTag video. Ce tag fonctionne avec les principaux hébergeurs de vidéos (YouTube, Vimeo…) mais aussi avec les fichiers téléversés dans le CMS, et il accepte un grand nombre d’arguments (voir la Doc sur Kirby).

(\video: https://vimeo.com/…)

Mention sur le lien dans Mastodon

Les serveurs Mastodon permettent d’ajouter un lien vers le profil de l’auteurice d’un lien qui est partagé sur le Fediverse blog.joinmastodon.org/2024/07/highlighting-journalism-on-mastodon.

Pour tirer parti de cette possibilité sur vos articles, vous devez d’abord renseigner le champ « Pseudo sur le Fediverse » sur la page de profil d’auteurice, puis vous devez ajouter le domaine www.24joursdeweb.fr dans les préférences de votre profil sur Mastodon (Profil → onglet Vérification → partie Attribution de l’auteur·e)