Bileşenler

Linkita teması çeşitli bileşenler sunar.

Bileşenleri hiç duymadınız mı? Daha fazla bilgi için Zola dokümantasyonuna bakın.

Mermaid bileşeni

Sayfanızda Mermaid kullanmak için, sayfanın ön yüzünde extra.mermaid = true olarak ayarlamanız gerekir.

+++
title = "Sayfa başlığınız"

[extra]
mermaid = true
+++

Ardından <mermaid> bileşenini şu şekilde kullanabilirsiniz:

{% <mermaid> %}

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

{% </mermaid> %}

Bu şu şekilde görüntülenecektir:

  

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

Ek olarak, <mermaid> bileşenlerinin içinde kod bloğu kullanabilirsiniz ve kod bloğu göz ardı edilecektir.

Kod bloğu, biçimlendiricinin mermaid'in biçimlendirmesini bozmasını engeller.

{% <mermaid> -%}

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Merhaba John, nasılsın?
    loop Sağlık Kontrolü
        John->>John: Hipokondriye karşı savaş
    end
    Note right of John: Mantıklı düşünceler <br/>galip geldi!
    John-->>Alice: Harika!
    John->>Bob: Sen nasılsın?
    Bob-->>John: Çok iyi!
```

{%- </mermaid> %}

Bu şu şekilde görüntülenecektir:

  
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Merhaba John, nasılsın?
    loop Sağlık Kontrolü
        John->>John: Hipokondriye karşı savaş
    end
    Note right of John: Mantıklı düşünceler 
galip geldi!
    John-->>Alice: Harika!
    John->>Bob: Sen nasılsın?
    Bob-->>John: Çok iyi!

Uyarı Kutuları

<admonition> bileşeni, sayfanıza dikkat çekici notlar yerleştirmenize yardımcı olacak bir başlık görüntüler.

Bileşeni şu şekilde kullanabilirsiniz:

{% <admonition type="tip" title="ipucu"> %}
`ipucu` uyarı kutusu.
{% </admonition> %}

Uyarı kutusu bileşeninin 12 farklı türü vardır:

Galeri

<gallery /> bileşeni, sayfa varlıklarındaki tüm resimleri görüntüleyen çok basit, yalnızca HTML tabanlı tıklanabilir bir resim galerisidir.

Zola dokümantasyonundan alınmıştır.

{{ <gallery /> }}

Projeler

<projects /> bileşeni, projeleriniz için bir sayfa oluşturmanıza olanak tanır.

Bir content/pages/projects/index.md dosyası oluşturun:

+++
title = "Projelerim"
description = ""
path = "projects"
+++

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

Bir content/pages/projects/data.toml dosyası oluşturun:

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

Bu şu şekilde görüntülenecektir: