Shortcodes

El tema Linkita proporciona múltiples shortcodes.

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

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 los shortcodes mermaid() así:

{% mermaid() %}

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

{% end %}

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

{% end %}

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

Admonition

El shortcode admonition() muestra un banner para ayudarte a poner avisos en tu página.

Puedes usar el shortcode admonition() así:

{% admonition(type="tip", title="consejo") %}
La admonition de tipo `tip`.
{% end %}

El shortcode de admonition tiene 12 tipos diferentes:

Galería

El shortcode 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 shortcode projects() te permite crear una página para tu proyecto.

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

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

{{ projects(path="data.toml", format="toml") }}

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: