Componentes

El tema Linkita proporciona múltiples componentes.

¿Nunca has oído hablar de los componentes? Consulta la documentación de Zola para más información.

Componente Mermaid

Para usar Mermaid en tu página, tienes que establecer extra.mermaid = true en el frontmatter de la página.

+++
title = "El título de tu página"

[extra]
mermaid = true
+++

Luego puedes usar el componente <mermaid> así:

{% <mermaid> %}

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

{% </mermaid> %}

Esto se renderizará como:

  

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

Además, puedes usar un bloque de código dentro de los componentes <mermaid> y el bloque de código será ignorado.

El bloque de código evita que el formateador rompa el formato 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> %}

Esto se renderizará como:

  
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

El componente <admonition> muestra un banner para ayudarte a poner avisos en tu página.

Puedes usar el componente así:

{% <admonition type="tip" title="consejo"> %}
La admonition de tipo `tip`.
{% </admonition> %}

El componente de admonition tiene 12 tipos diferentes:

Galería

El componente <gallery /> es una galería de imágenes clicable muy simple, solo con HTML, que muestra todas las imágenes de los assets de la página.

Proviene de la documentación de Zola

{{ <gallery /> }}

Proyectos

El componente <projects /> te permite crear una página para tus proyectos.

Crea un archivo content/pages/projects/index.md:

+++
title = "Mis Proyectos"
description = ""
path = "projects"
+++

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

Crea un archivo 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" },
]

Esto se mostrará como: