Komponentoj

La temo Linkita provizas plurajn komponentojn.

Ĉu vi neniam aŭdis pri komponentoj? Vidu la dokumentaron de Zola por pli da informoj.

Mermaid-komponento

Por uzi Mermaid en via paĝo, vi devas agordi extra.mermaid = true en la antaŭaĵo (frontmatter) de la paĝo.

+++
title = "Titolo"

[extra]
mermaid = true
+++

Tiam vi povas uzi la komponenton <mermaid> jene:

{% <mermaid> %}

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

{% </mermaid> %}

Ĉi tio estos montrata tiel:

  

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

Krome, vi povas uzi kodblokon ene de la komponentoj <mermaid> kaj la kodbloko estos ignorata.

La kodbloko malhelpas ke la formatilo rompu la formatadon 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> %}

Ĉi tio estos montrata tiel:

  
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!

Admono

La komponento <admonition> montras rubandon por helpi vin meti atentigon en vian paĝon.

Vi povas uzi la komponenton jene:

{% <admonition type="tip" title="konsileto"> %}
La admono `konsileto`.
{% </admonition> %}

La komponento de admono havas 12 diversajn tipojn:

Galerio

La komponento <gallery /> estas tre simpla nur-HTML-a klakebla bildgalerio, kiu montras ĉiujn bildojn el la paĝaj aktivaĵoj (assets).

Ĝi estas el la dokumentaro de Zola

{{ <gallery /> }}

Projektoj

La komponento <projects /> ebligas al vi krei paĝon por viaj projektoj.

Kreu dosieron content/pages/projects/index.md:

+++
title = "Miaj Projektoj"
description = ""
path = "projects"
+++

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

Kreu dosieron 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" },
]

Ĉi tio estos montrata jene: