کدهای کوتاه

پوسته Kita چندین کد کوتاه ارائه می‌دهد.

تا به حال درباره کدهای کوتاه نشنیده‌اید؟ برای اطلاعات بیشتر مستندات Zola را ببینید.

Mermaid

برای استفاده از Mermaid در صفحه خود، باید extra.mermaid = true را در frontmatter صفحه تنظیم کنید.

+++
title = "عنوان صفحه شما"

[extra]
mermaid = true
+++

سپس می‌توانید از کد کوتاه mermaid() استفاده کنید:

{% mermaid() %}

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

{% end %}

این به صورت زیر نمایش داده می‌شود:

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

علاوه بر این، می‌توانید بلوک کد را داخل کد کوتاه mermaid() استفاده کنید و بلوک کد نادیده گرفته می‌شود.

بلوک کد از شکستن قالب‌بندی 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 %}

این به صورت زیر نمایش داده می‌شود:

  
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() یک بنر نمایش می‌دهد تا به شما کمک کند توجه را در صفحه خود قرار دهید.

این روش دیگری برای نوشتن هشدار به سبک GitHub است، اما از عناوین سفارشی پشتیبانی می‌کند.

می‌توانید از کد کوتاه admonition() به صورت زیر استفاده کنید:

{% admonition(type="note", title="نکته") %}
هشدار `note`.
{% end %}

هشدار note.

هشدار tip.

هشدار important.

هشدار warning.

هشدار caution.

گالری

کد کوتاه gallery() یک گالری تصویر قابل کلیک ساده فقط HTML است که تمام تصاویر را از دارایی‌های صفحه نمایش می‌دهد.

این از مستندات Zola گرفته شده است

{{ gallery() }}

SVG درون‌خطی

کد کوتاه inline_svg() برای جاسازی تصاویر SVG مستقیماً در یک صفحه وب استفاده می‌شود، به جای شامل کردن آنها از طریق تگ <img>.

می‌توانید از کدهای کوتاه inline_svg() به صورت زیر استفاده کنید:

{% inline_svg() %}
![Van de Graaf canon](Van_de_Graaf_canon_in_book_design.svg)
{% end %}

اگر نمی‌خواهید زیرنویس زیر تصویر نمایش داده شود، می‌توانید متن alt تصویر Markdown را به رشته خالی، Inline SVG، inline-svg یا inline_svg تنظیم کنید.

{% inline_svg() %}
![](Van_de_Graaf_canon_in_book_design.svg)
{% end %}

{% inline_svg() %}
![Inline SVG](Van_de_Graaf_canon_in_book_design.svg)
{% end %}

{% inline_svg() %}
![inline-svg](Van_de_Graaf_canon_in_book_design.svg)
{% end %}

{% inline_svg() %}
![inline_svg](Van_de_Graaf_canon_in_book_design.svg)
{% end %}