Composants

Le thème Linkita fournit plusieurs composants.

Jamais entendu parler des composants ? Consultez la documentation de Zola pour plus d'informations.

Composant Mermaid

Pour utiliser Mermaid dans votre page, vous devez définir extra.mermaid = true dans le frontmatter de la page.

+++
title = "Le titre de votre page"

[extra]
mermaid = true
+++

Ensuite, vous pouvez utiliser le composant <mermaid> comme ceci :

{% <mermaid> %}

graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

{% </mermaid> %}

Ceci sera rendu comme :

  

graph TD;
A-->B;
A-->C;
B-->D;
C-->D;

De plus, vous pouvez utiliser un bloc de code à l'intérieur des composants <mermaid> et le bloc de code sera ignoré.

Le bloc de code empêche le formateur de casser la mise en forme de Mermaid.

{% <mermaid> -%}

```mermaid
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!
```

{%- </mermaid> %}

Ceci sera rendu comme :

  
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 
prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Admonition

Le composant <admonition> affiche une bannière pour vous aider à mettre en évidence une notice sur votre page.

Vous pouvez utiliser le composant comme ceci :

{% <admonition type="tip" title="conseil"> %}
L'admonition `tip`.
{% </admonition> %}

Le composant admonition a 12 types différents :

Galerie

Le composant <gallery /> est une galerie d'images cliquables très simple, en HTML uniquement, qui affiche toutes les images des ressources de la page.

Il provient de la documentation de Zola

{{ <gallery /> }}

Projets

Le composant <projects /> vous permet de créer une page pour vos projets.

Créez un fichier content/pages/projects/index.md :

+++
title = "Mes Projets"
description = ""
path = "projets"
+++

{{ <projects path="data.toml" format="toml" page config /> }}

Créez un fichier content/pages/projects/data.toml :

[[project]]
name = "lorem"
desc = "Lorem ipsum dolor sit."
tags = ["lorem", "ipsum"]
links = [
    { name = "homepage", url = "https://example.com" },
    { name = "source", url = "https://example.com" },
]

Ceci sera affiché comme :