Linkita
Un thème de blog propre et élégant pour Zola. Linkita est basé sur Kita et Hugo-Paper, il est multilingue et optimisé pour le SEO.
Zola
2025-04-20T00:00:00+00:00
https://salif.github.io/linkita/fr/atom.xml
Guide de la syntaxe Markdown
2022-10-20T00:00:00+00:00
2022-10-20T00:00:00+00:00
sample_username
https://salif.github.io/linkita/fr/markdown-syntax/
<p>Cet article présente un échantillon de la syntaxe Markdown de base utilisable dans les fichiers de contenu Zola, et montre également comment les éléments HTML de base sont mis en forme par le CSS du thème Linkita.</p>
Typographie Mathématique
2022-10-20T00:00:00+00:00
2022-10-20T00:00:00+00:00
sample_username
https://salif.github.io/linkita/fr/math-typesetting/
<p>Le thème Linkita prend en charge les formules mathématiques $\LaTeX$ en utilisant <a rel="external" href="https://katex.org/">KaTeX</a>.</p>
Shortcodes
2022-10-20T00:00:00+00:00
2025-04-20T00:00:00+00:00
sample_username
https://salif.github.io/linkita/fr/shortcodes/
<p>Le thème Linkita fournit plusieurs shortcodes.</p>
<p>Jamais entendu parler des shortcodes ? Consultez la <a rel="external" href="https://www.getzola.org/documentation/content/shortcodes/">documentation de Zola</a> pour plus d'informations.</p>
<h2 id="mermaid-header">Mermaid</h2>
<p>Pour utiliser Mermaid dans votre page, vous devez définir <code>extra.mermaid = true</code> dans le frontmatter de la page.</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="toml"><span class="giallo-l"><span style="color: light-dark(#CD3131, #FFA198);">+++</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">title</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">Le titre de votre page</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>[</span><span style="color: light-dark(#000000, #FFA657);">extra</span><span>]</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">mermaid</span><span> =</span><span style="color: light-dark(#0000FF, #79C0FF);"> true</span></span>
<span class="giallo-l"><span style="color: light-dark(#CD3131, #FFA198);">+++</span></span></code></pre>
<p>Ensuite, vous pouvez utiliser les shortcodes <code>mermaid()</code> comme ceci :</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>{% mermaid() %}</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>graph TD;</span></span>
<span class="giallo-l"><span>A-->B;</span></span>
<span class="giallo-l"><span>A-->C;</span></span>
<span class="giallo-l"><span>B-->D;</span></span>
<span class="giallo-l"><span>C-->D;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>{% end %}</span></span></code></pre>
<p>Ceci sera rendu comme :</p>
<pre class="mermaid bg-inherit" translate="no">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</pre>
<p>De plus, vous pouvez utiliser un bloc de code à l'intérieur des shortcodes <code>mermaid()</code> et le bloc de code sera ignoré.</p>
<p>Le bloc de code empêche le formateur de casser la mise en forme de Mermaid.</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>{% mermaid() %}</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>```</span><span>mermaid</span></span>
<span class="giallo-l"><span>sequenceDiagram</span></span>
<span class="giallo-l"><span> participant Alice</span></span>
<span class="giallo-l"><span> participant Bob</span></span>
<span class="giallo-l"><span> Alice->>John: Hello John, how are you?</span></span>
<span class="giallo-l"><span> loop Healthcheck</span></span>
<span class="giallo-l"><span> John->>John: Fight against hypochondria</span></span>
<span class="giallo-l"><span> end</span></span>
<span class="giallo-l"><span> Note right of John: Rational thoughts <br/>prevail!</span></span>
<span class="giallo-l"><span> John-->>Alice: Great!</span></span>
<span class="giallo-l"><span> John->>Bob: How about you?</span></span>
<span class="giallo-l"><span> Bob-->>John: Jolly good!</span></span>
<span class="giallo-l"><span>```</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>{% end %}</span></span></code></pre>
<p>Ceci sera rendu comme :</p>
<pre class="mermaid bg-inherit" translate="no">
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
</pre>
<h2 id="admonition">Admonition</h2>
<p>Le shortcode <code>admonition()</code> affiche une bannière pour vous aider à mettre en évidence une notice sur votre page.</p>
<p>Vous pouvez utiliser le shortcode <code>admonition()</code> comme ceci :</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>{% admonition(type="tip", title="conseil") %}</span></span>
<span class="giallo-l"><span>L'admonition </span><span style="color: light-dark(#800000, #79C0FF);">`</span><span style="color: light-dark(#800000, #79C0FF);">tip</span><span style="color: light-dark(#800000, #79C0FF);">`</span><span>.</span></span>
<span class="giallo-l"><span>{% end %}</span></span></code></pre>
<p>Le shortcode admonition a 12 types différents :</p>
<link rel="stylesheet" href="https://salif.github.io/linkita/admonition.css?h=98c1477488c4b2c9d71a" type="text/css">
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-note);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/note.svg);"
>
note
</div>
<span><strong>note</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>note</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-abstract);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/abstract.svg);"
>
abstract
</div>
<span><strong>abstract</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>abstract</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-info);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/info.svg);"
>
info
</div>
<span><strong>info</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>info</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-tip);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/tip.svg);"
>
tip
</div>
<span><strong>conseil</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>tip</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-success);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/success.svg);"
>
success
</div>
<span><strong>succès</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>success</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-question);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/question.svg);"
>
question
</div>
<span><strong>question</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>question</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-warning);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/warning.svg);"
>
warning
</div>
<span><strong>attention</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>warning</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-failure);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/failure.svg);"
>
failure
</div>
<span><strong>échec</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>failure</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-danger);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/danger.svg);"
>
danger
</div>
<span><strong>danger</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>danger</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-bug);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/bug.svg);"
>
bug
</div>
<span><strong>bug</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>bug</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-example);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/example.svg);"
>
example
</div>
<span><strong>exemple</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>example</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-quote);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/quote.svg);"
>
quote
</div>
<span><strong>citation</strong></span>
</div>
<div class="pl-4"><p>L'admonition <code>quote</code>.</p>
</div>
</div>
<h2 id="galerie">Galerie</h2>
<p>Le shortcode <code>gallery()</code> est une galerie d'images cliquables très simple, en HTML uniquement, qui affiche toutes les images des ressources de la page.</p>
<p>Il provient de la <a rel="external" href="https://www.getzola.org/documentation/content/image-processing/">documentation de Zola</a></p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>{{ gallery() }}</span></span></code></pre><div class="not-prose flex flex-wrap gap-2">
<a href="https://salif.github.io/linkita/fr/shortcodes/01-zola.png" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/01-zola.b673627618ae4d9e.png" alt="Image de démo pour la galerie" />
</a>
<a href="https://salif.github.io/linkita/fr/shortcodes/02-zola-manet.png" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/02-zola-manet.6cacdaa0a00675f4.png" alt="Image de démo pour la galerie" />
</a>
<a href="https://salif.github.io/linkita/fr/shortcodes/03-zola-cezanne.png" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/03-zola-cezanne.7278afdd982f9c0d.png" alt="Image de démo pour la galerie" />
</a>
<a href="https://salif.github.io/linkita/fr/shortcodes/04-gutenberg.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/04-gutenberg.870b88ab978bdf22.jpg" alt="Image de démo pour la galerie" />
</a>
<a href="https://salif.github.io/linkita/fr/shortcodes/05-example.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/05-example.fa7cb105347c93cf.jpg" alt="Image de démo pour la galerie" />
</a>
<a href="https://salif.github.io/linkita/fr/shortcodes/06-example.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/06-example.eb57cde378878205.jpg" alt="Image de démo pour la galerie" />
</a>
<a href="https://salif.github.io/linkita/fr/shortcodes/07-example.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/07-example.6ba4bc34b155528f.jpg" alt="Image de démo pour la galerie" />
</a>
<a href="https://salif.github.io/linkita/fr/shortcodes/08-example.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/08-example.13c3f7440797b6ed.jpg" alt="Image de démo pour la galerie" />
</a>
</div>
<h2 id="projets">Projets</h2>
<p>Le shortcode <code>projects()</code> vous permet de créer une page pour vos projets.</p>
<p>Créez un fichier <code>content/pages/projects/index.md</code> :</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>+++</span></span>
<span class="giallo-l"><span>title = "Mes Projets"</span></span>
<span class="giallo-l"><span>description = ""</span></span>
<span class="giallo-l"><span>path = "projets"</span></span>
<span class="giallo-l"><span>+++</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>{{ projects(path="data.toml", format="toml") }}</span></span></code></pre>
<p>Créez un fichier <code>content/pages/projects/data.toml</code> :</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="toml"><span class="giallo-l"><span>[[</span><span style="color: light-dark(#000000, #FFA657);">project</span><span>]]</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">name</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">lorem</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">desc</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">Lorem ipsum dolor sit.</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">tags</span><span> =</span><span> [</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span style="color: light-dark(#A31515, #A5D6FF);">lorem</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span>,</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">ipsum</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span>]</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">links</span><span> =</span><span> [</span></span>
<span class="giallo-l"><span> {</span><span style="color: light-dark(#001080, #E6EDF3);"> name</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">homepage</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span>,</span><span style="color: light-dark(#001080, #E6EDF3);"> url</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">https://example.com</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span> }</span><span>,</span></span>
<span class="giallo-l"><span> {</span><span style="color: light-dark(#001080, #E6EDF3);"> name</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">source</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span>,</span><span style="color: light-dark(#001080, #E6EDF3);"> url</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">https://example.com</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span> }</span><span>,</span></span>
<span class="giallo-l"><span>]</span></span></code></pre>
<p>Ceci sera affiché comme :</p>
<div class="not-prose text-base leading-7 block-bg my-4 flex w-full flex-col rounded-lg px-5 py-1.5">
<h2 class="my-2 text-xl font-bold text-black dark:text-white">lorem</h2>
<p>Lorem ipsum dolor sit.</p>
<div class="my-2 flex flex-wrap items-center justify-between">
<div class="flex flex-wrap gap-x-2 text-sm opacity-80">
<span>#lorem</span>
<span>#ipsum</span>
</div>
<div class="flex flex-wrap gap-x-2">
<a
class="underline"
href="https://example.com"
target="_blank"
>homepage</a>
<a
class="underline"
href="https://example.com"
target="_blank"
>source</a>
</div>
</div>
</div>