Линкита - salif
Линкита е многоезична, оптимизирана за търсачки, изчистена и елегантна блог тема за Зола.
Zola
2025-04-20T00:00:00+00:00
https://salif.github.io/linkita/bg/authors/salif/atom.xml
Ръководство за синтаксиса на Маркдаун
2022-10-20T00:00:00+00:00
2024-10-24T00:00:00+00:00
sample_username
https://salif.github.io/linkita/bg/markdown-syntax/
<p>Тази статия предлага пример за основния синтаксис на Маркдаун, който може да се използва във файлове със съдържание в Зола, също така показва дали основните HTML елементи са декорирани със CSS в темата Линкита.</p>
Математика
2022-10-20T00:00:00+00:00
2024-10-24T00:00:00+00:00
sample_username
https://salif.github.io/linkita/bg/math-typesetting/
<p>Темата Линкита поддържа $\LaTeX$ математически формули, използвайки <a rel="external" href="https://katex.org/">KaTeX</a>.</p>
Шорткодове
2022-10-20T00:00:00+00:00
2025-04-20T00:00:00+00:00
sample_username
https://salif.github.io/linkita/bg/shortcodes/
<p>Темата Линкита предоставя множество шорткодове.</p>
<p>Ако не сте чували за шорткодове, вижте <a rel="external" href="https://www.getzola.org/documentation/content/shortcodes/">документацията на Зола</a> за повече информация.</p>
<h2 id="mermaid-header">Mermaid</h2>
<p>За да използвате Mermaid във вашата страница, трябва да зададете <code>extra.mermaid = true</code> в предните данни (frontmatter) на страницата.</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="toml"><span class="giallo-l"><span style="color: light-dark(#CD3131, #FFA198);">+++</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">title</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">Заглавие</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>[</span><span style="color: light-dark(#000000, #FFA657);">extra</span><span>]</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">mermaid</span><span> =</span><span style="color: light-dark(#0000FF, #79C0FF);"> true</span></span>
<span class="giallo-l"><span style="color: light-dark(#CD3131, #FFA198);">+++</span></span></code></pre>
<p>След това можете да използвате шорткодовете <code>mermaid()</code> ето така:</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>{% mermaid() %}</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>graph TD;</span></span>
<span class="giallo-l"><span>A-->B;</span></span>
<span class="giallo-l"><span>A-->C;</span></span>
<span class="giallo-l"><span>B-->D;</span></span>
<span class="giallo-l"><span>C-->D;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>{% end %}</span></span></code></pre>
<p>Това ще бъде изобразено така:</p>
<pre class="mermaid bg-inherit" translate="no">
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
</pre>
<p>Освен това, можете да използвате блок с код вътре в шорткодовете <code>mermaid()</code> и блокът с код ще бъде игнориран.</p>
<p>Блокът с код предотвратява форматирането на Mermaid от форматиращия инструмент.</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>{% mermaid() %}</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>```</span><span>mermaid</span></span>
<span class="giallo-l"><span>sequenceDiagram</span></span>
<span class="giallo-l"><span> participant Alice</span></span>
<span class="giallo-l"><span> participant Bob</span></span>
<span class="giallo-l"><span> Alice->>John: Hello John, how are you?</span></span>
<span class="giallo-l"><span> loop Healthcheck</span></span>
<span class="giallo-l"><span> John->>John: Fight against hypochondria</span></span>
<span class="giallo-l"><span> end</span></span>
<span class="giallo-l"><span> Note right of John: Rational thoughts <br/>prevail!</span></span>
<span class="giallo-l"><span> John-->>Alice: Great!</span></span>
<span class="giallo-l"><span> John->>Bob: How about you?</span></span>
<span class="giallo-l"><span> Bob-->>John: Jolly good!</span></span>
<span class="giallo-l"><span>```</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>{% end %}</span></span></code></pre>
<p>Това ще бъде изобразено така:</p>
<pre class="mermaid bg-inherit" translate="no">
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!
</pre>
<h2 id="preduprezhdenie">Предупреждение</h2>
<p>Шорткодът <code>admonition()</code> показва банер, който ви помага да поставите известие на вашата страница.</p>
<p>Можете да използвате шорткодът <code>admonition()</code> по този начин:</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>{% admonition(type="tip", title="съвет") %}</span></span>
<span class="giallo-l"><span>Предупреждението </span><span style="color: light-dark(#800000, #79C0FF);">`</span><span style="color: light-dark(#800000, #79C0FF);">tip</span><span style="color: light-dark(#800000, #79C0FF);">`</span><span>.</span></span>
<span class="giallo-l"><span>{% end %}</span></span></code></pre>
<p>Шорткодът <code>admonition</code> има 12 различни типа:</p>
<link rel="stylesheet" href="https://salif.github.io/linkita/admonition.css?h=98c1477488c4b2c9d71a" type="text/css">
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-note);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/note.svg);"
>
note
</div>
<span><strong>бележка</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>note</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-abstract);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/abstract.svg);"
>
abstract
</div>
<span><strong>резюме</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>abstract</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-info);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/info.svg);"
>
info
</div>
<span><strong>информация</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>info</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-tip);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/tip.svg);"
>
tip
</div>
<span><strong>съвет</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>tip</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-success);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/success.svg);"
>
success
</div>
<span><strong>успех</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>success</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-question);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/question.svg);"
>
question
</div>
<span><strong>въпрос</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>question</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-warning);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/warning.svg);"
>
warning
</div>
<span><strong>предупреждение</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>warning</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-failure);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/failure.svg);"
>
failure
</div>
<span><strong>грешка</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>failure</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-danger);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/danger.svg);"
>
danger
</div>
<span><strong>опасност</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>danger</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-bug);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/bug.svg);"
>
bug
</div>
<span><strong>бъг</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>bug</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-example);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/example.svg);"
>
example
</div>
<span><strong>пример</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>example</code>.</p>
</div>
</div>
<div
class="my-4 flex flex-col rounded-lg bg-(--admonition-bg)"
style="--admonition-bg: var(--admonition-quote);"
>
<div class="flex items-center rounded-t-lg bg-(--admonition-bg) p-1">
<div
class="mx-2 h-4 w-4 text-[0px] [background:var(--url)_center_center_no-repeat] dark:invert"
style="--url: url(icons/quote.svg);"
>
quote
</div>
<span><strong>цитат</strong></span>
</div>
<div class="pl-4"><p>Предупреждението <code>quote</code>.</p>
</div>
</div>
<h2 id="galeriia">Галерия</h2>
<p>Шорткодът <code>gallery()</code> е много проста, само с HTML, галерия с изображения, която показва всички изображения от „assets“ на страницата.</p>
<p>Взето е от <a rel="external" href="https://www.getzola.org/documentation/content/image-processing/">документацията на Зола</a></p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>{{ gallery() }}</span></span></code></pre><div class="not-prose flex flex-wrap gap-2">
<a href="https://salif.github.io/linkita/bg/shortcodes/01-zola.png" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/01-zola.b673627618ae4d9e.png" alt="Демо изображение за галерията" />
</a>
<a href="https://salif.github.io/linkita/bg/shortcodes/02-zola-manet.png" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/02-zola-manet.6cacdaa0a00675f4.png" alt="Демо изображение за галерията" />
</a>
<a href="https://salif.github.io/linkita/bg/shortcodes/03-zola-cezanne.png" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/03-zola-cezanne.7278afdd982f9c0d.png" alt="Демо изображение за галерията" />
</a>
<a href="https://salif.github.io/linkita/bg/shortcodes/04-gutenberg.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/04-gutenberg.870b88ab978bdf22.jpg" alt="Демо изображение за галерията" />
</a>
<a href="https://salif.github.io/linkita/bg/shortcodes/05-example.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/05-example.fa7cb105347c93cf.jpg" alt="Демо изображение за галерията" />
</a>
<a href="https://salif.github.io/linkita/bg/shortcodes/06-example.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/06-example.eb57cde378878205.jpg" alt="Демо изображение за галерията" />
</a>
<a href="https://salif.github.io/linkita/bg/shortcodes/07-example.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/07-example.6ba4bc34b155528f.jpg" alt="Демо изображение за галерията" />
</a>
<a href="https://salif.github.io/linkita/bg/shortcodes/08-example.jpg" target="_blank">
<img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/08-example.13c3f7440797b6ed.jpg" alt="Демо изображение за галерията" />
</a>
</div>
<h2 id="proekti">Проекти</h2>
<p>Шорткодът <code>projects()</code> ви позволява да създадете страница за вашите проекти.</p>
<p>Създайте файл <code>content/pages/projects/index.md</code>:</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="markdown"><span class="giallo-l"><span>+++</span></span>
<span class="giallo-l"><span>title = "Моите проекти"</span></span>
<span class="giallo-l"><span>description = ""</span></span>
<span class="giallo-l"><span>path = "projects"</span></span>
<span class="giallo-l"><span>+++</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span>{{ projects(path="data.toml", format="toml") }}</span></span></code></pre>
<p>Създайте файл <code>content/pages/projects/data.toml</code>:</p>
<pre class="giallo" style="color-scheme: light dark; color: light-dark(#000000, #E6EDF3); background-color: light-dark(#FFFFFF, #0D1117);"><code data-lang="toml"><span class="giallo-l"><span>[[</span><span style="color: light-dark(#000000, #FFA657);">project</span><span>]]</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">name</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">lorem</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">desc</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">Lorem ipsum dolor sit.</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">tags</span><span> =</span><span> [</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span style="color: light-dark(#A31515, #A5D6FF);">lorem</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span>,</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">ipsum</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span>]</span></span>
<span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">links</span><span> =</span><span> [</span></span>
<span class="giallo-l"><span> {</span><span style="color: light-dark(#001080, #E6EDF3);"> name</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">homepage</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span>,</span><span style="color: light-dark(#001080, #E6EDF3);"> url</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">https://example.com</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span> }</span><span>,</span></span>
<span class="giallo-l"><span> {</span><span style="color: light-dark(#001080, #E6EDF3);"> name</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">source</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span>,</span><span style="color: light-dark(#001080, #E6EDF3);"> url</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> "</span><span style="color: light-dark(#A31515, #A5D6FF);">https://example.com</span><span style="color: light-dark(#A31515, #A5D6FF);">"</span><span> }</span><span>,</span></span>
<span class="giallo-l"><span>]</span></span></code></pre>
<p>Това ще бъде показано така:</p>
<div class="not-prose text-base leading-7 block-bg my-4 flex w-full flex-col rounded-lg px-5 py-1.5">
<h2 class="my-2 text-xl font-bold text-black dark:text-white">lorem</h2>
<p>Lorem ipsum dolor sit.</p>
<div class="my-2 flex flex-wrap items-center justify-between">
<div class="flex flex-wrap gap-x-2 text-sm opacity-80">
<span>#lorem</span>
<span>#ipsum</span>
</div>
<div class="flex flex-wrap gap-x-2">
<a
class="underline"
href="https://example.com"
target="_blank"
>homepage</a>
<a
class="underline"
href="https://example.com"
target="_blank"
>source</a>
</div>
</div>
</div>