Компоненти

Темата Линкита предоставя множество компоненти.

Ако не сте чували за компоненти, вижте документацията на Зола за повече информация.

Mermaid диаграми

За да използвате Mermaid във вашата страница, трябва да зададете extra.mermaid = true в предните данни (frontmatter) на страницата.

+++
title = "Заглавие"

[extra]
mermaid = true
+++

След това можете да използвате компонента <mermaid> ето така:

{% <mermaid> %}

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

{% </mermaid> %}

Това ще бъде изобразено така:

  

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

Освен това, можете да използвате блок с код вътре в компонентите и блокът с код ще бъде игнориран.

Блокът с код предотвратява форматирането на 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> %}

Това ще бъде изобразено така:

  
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> показва банер, който ви помага да поставите известие на вашата страница.

Можете да използвате компонента по този начин:

{% <admonition type="tip" title="съвет"> %}
Предупреждението `tip`.
{% </admonition> %}

Компонентът има 12 различни типа:

Галерия

Компонентът <gallery /> е много проста галерия с изображения, която показва всички изображения от „assets“ на страницата.

Взето е от документацията на Зола

{{ <gallery /> }}

Проекти

Компонентът <projects /> ви позволява да създадете страница за вашите проекти.

Създайте файл content/pages/projects/index.md:

+++
title = "Моите проекти"
description = ""
path = "projects"
+++

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

Създайте файл 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" },
]

Това ще бъде показано така: