Zola için temiz ve şık bir blog teması. Linkita, Kita ve Hugo-Paper'ı temel alır ve çok dilli ve SEO uyumludur. Zola 2026-09-13T00:00:00+00:00 https://salif.github.io/linkita/tr/tags/components/atom.xml 2026-09-13T00:00:00+00:00 2026-09-13T00:00:00+00:00 Default Author https://salif.github.io/linkita/tr/components/ <p>Linkita teması çeşitli bileşenler sunar.</p> <p>Bileşenleri hiç duymadınız mı? Daha fazla bilgi için <a rel="external" href="https://keats.github.io/tera/#components">Zola dokümantasyonuna</a> bakın.</p> <h2 id="mermaid-bileseni">Mermaid bileşeni</h2> <p>Sayfanızda Mermaid kullanmak için, sayfanın ön yüzünde <code>extra.mermaid = true</code> olarak ayarlamanız gerekir.</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);"> &quot;</span><span style="color: light-dark(#A31515, #A5D6FF);">Sayfa başlığınız</span><span style="color: light-dark(#A31515, #A5D6FF);">&quot;</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>Ardından <code>&lt;mermaid&gt;</code> bileşenini şu şekilde kullanabilirsiniz:</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 style="color: light-dark(#800000, #E6EDF3);">&lt;</span><span style="color: light-dark(#800000, #7EE787);">mermaid</span><span style="color: light-dark(#800000, #E6EDF3);">&gt;</span><span> %}</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span>graph TD;</span></span> <span class="giallo-l"><span>A--&gt;B;</span></span> <span class="giallo-l"><span>A--&gt;C;</span></span> <span class="giallo-l"><span>B--&gt;D;</span></span> <span class="giallo-l"><span>C--&gt;D;</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span>{% </span><span style="color: light-dark(#800000, #E6EDF3);">&lt;/</span><span style="color: light-dark(#800000, #7EE787);">mermaid</span><span style="color: light-dark(#800000, #E6EDF3);">&gt;</span><span> %}</span></span></code></pre> <p>Bu şu şekilde görüntülenecektir:</p> <pre class="mermaid bg-inherit" translate="no"> graph TD; A-->B; A-->C; B-->D; C-->D; </pre> <p>Ek olarak, <code>&lt;mermaid&gt;</code> bileşenlerinin içinde kod bloğu kullanabilirsiniz ve kod bloğu göz ardı edilecektir.</p> <p>Kod bloğu, biçimlendiricinin mermaid'in biçimlendirmesini bozmasını engeller.</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 style="color: light-dark(#800000, #E6EDF3);">&lt;</span><span style="color: light-dark(#800000, #7EE787);">mermaid</span><span style="color: light-dark(#800000, #E6EDF3);">&gt;</span><span> -%}</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-&gt;&gt;John: Merhaba John, nasılsın?</span></span> <span class="giallo-l"><span> loop Sağlık Kontrolü</span></span> <span class="giallo-l"><span> John-&gt;&gt;John: Hipokondriye karşı savaş</span></span> <span class="giallo-l"><span> end</span></span> <span class="giallo-l"><span> Note right of John: Mantıklı düşünceler &lt;br/&gt;galip geldi!</span></span> <span class="giallo-l"><span> John--&gt;&gt;Alice: Harika!</span></span> <span class="giallo-l"><span> John-&gt;&gt;Bob: Sen nasılsın?</span></span> <span class="giallo-l"><span> Bob--&gt;&gt;John: Çok iyi!</span></span> <span class="giallo-l"><span>```</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span>{%- </span><span style="color: light-dark(#800000, #E6EDF3);">&lt;/</span><span style="color: light-dark(#800000, #7EE787);">mermaid</span><span style="color: light-dark(#800000, #E6EDF3);">&gt;</span><span> %}</span></span></code></pre> <p>Bu şu şekilde görüntülenecektir:</p> <pre class="mermaid bg-inherit" translate="no"> 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! </pre> <h2 id="uyari-kutulari">Uyarı Kutuları</h2> <p><code>&lt;admonition&gt;</code> bileşeni, sayfanıza dikkat çekici notlar yerleştirmenize yardımcı olacak bir başlık görüntüler.</p> <p>Bileşeni şu şekilde kullanabilirsiniz:</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 style="color: light-dark(#800000, #E6EDF3);">&lt;</span><span style="color: light-dark(#800000, #7EE787);">admonition</span><span style="color: light-dark(#E50000, #79C0FF);"> type</span><span>=</span><span style="color: light-dark(#0000FF, #A5D6FF);">&quot;</span><span style="color: light-dark(#0000FF, #A5D6FF);">tip</span><span style="color: light-dark(#0000FF, #A5D6FF);">&quot;</span><span style="color: light-dark(#E50000, #79C0FF);"> title</span><span>=</span><span style="color: light-dark(#0000FF, #A5D6FF);">&quot;</span><span style="color: light-dark(#0000FF, #A5D6FF);">ipucu</span><span style="color: light-dark(#0000FF, #A5D6FF);">&quot;</span><span style="color: light-dark(#800000, #E6EDF3);">&gt;</span><span> %}</span></span> <span class="giallo-l"><span style="color: light-dark(#800000, #79C0FF);">`</span><span style="color: light-dark(#800000, #79C0FF);">ipucu</span><span style="color: light-dark(#800000, #79C0FF);">`</span><span> uyarı kutusu.</span></span> <span class="giallo-l"><span>{% </span><span style="color: light-dark(#800000, #E6EDF3);">&lt;/</span><span style="color: light-dark(#800000, #7EE787);">admonition</span><span style="color: light-dark(#800000, #E6EDF3);">&gt;</span><span> %}</span></span></code></pre> <p>Uyarı kutusu bileşeninin 12 farklı türü vardır:</p> <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>not</strong></span> </div> <div class="pl-4"><p><code>not</code> uyarı kutusu.</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>özet</strong></span> </div> <div class="pl-4"><p><code>özet</code> uyarı kutusu.</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>bilgi</strong></span> </div> <div class="pl-4"><p><code>bilgi</code> uyarı kutusu.</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>ipucu</strong></span> </div> <div class="pl-4"><p><code>ipucu</code> uyarı kutusu.</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>başarılı</strong></span> </div> <div class="pl-4"><p><code>başarılı</code> uyarı kutusu.</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>soru</strong></span> </div> <div class="pl-4"><p><code>soru</code> uyarı kutusu.</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>uyarı</strong></span> </div> <div class="pl-4"><p><code>warning</code> uyarı kutusu.</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>başarısızlık</strong></span> </div> <div class="pl-4"><p><code>failure</code> uyarı kutusu.</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>tehlike</strong></span> </div> <div class="pl-4"><p><code>danger</code> uyarı kutusu.</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>hata</strong></span> </div> <div class="pl-4"><p><code>bug</code> uyarı kutusu.</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>örnek</strong></span> </div> <div class="pl-4"><p><code>example</code> uyarı kutusu.</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>alıntı</strong></span> </div> <div class="pl-4"><p><code>quote</code> uyarı kutusu.</p> </div> </div> <h2 id="galeri">Galeri</h2> <p><code>&lt;gallery /&gt;</code> bileşeni, sayfa varlıklarındaki tüm resimleri görüntüleyen çok basit, yalnızca HTML tabanlı tıklanabilir bir resim galerisidir.</p> <p><a rel="external" href="https://www.getzola.org/documentation/content/image-processing/">Zola dokümantasyonundan</a> alınmıştır.</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 style="color: light-dark(#800000, #E6EDF3);">&lt;</span><span style="color: light-dark(#800000, #7EE787);">gallery</span><span style="color: light-dark(#800000, #E6EDF3);"> /&gt;</span><span> }}</span></span></code></pre><div class="not-prose flex flex-wrap gap-2"> <a href="https://salif.github.io/linkita/tr/components/01-zola.png" target="_blank"> <img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/01-zola.ad0a0355240cda2e.png" alt="Galeri için demo resim" /> </a> <a href="https://salif.github.io/linkita/tr/components/02-zola-manet.png" target="_blank"> <img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/02-zola-manet.548154e0c09eec14.png" alt="Galeri için demo resim" /> </a> <a href="https://salif.github.io/linkita/tr/components/03-zola-cezanne.png" target="_blank"> <img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/03-zola-cezanne.860a70a4e0777688.png" alt="Galeri için demo resim" /> </a> <a href="https://salif.github.io/linkita/tr/components/04-gutenberg.jpg" target="_blank"> <img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/04-gutenberg.1fc322ebc0ee85d5.jpg" alt="Galeri için demo resim" /> </a> <a href="https://salif.github.io/linkita/tr/components/05-example.jpg" target="_blank"> <img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/05-example.cc0357d1d2f74077.jpg" alt="Galeri için demo resim" /> </a> <a href="https://salif.github.io/linkita/tr/components/06-example.jpg" target="_blank"> <img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/06-example.6d44aa1e3272f516.jpg" alt="Galeri için demo resim" /> </a> <a href="https://salif.github.io/linkita/tr/components/07-example.jpg" target="_blank"> <img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/07-example.bc1c6a7baeebcde1.jpg" alt="Galeri için demo resim" /> </a> <a href="https://salif.github.io/linkita/tr/components/08-example.jpg" target="_blank"> <img class="rounded-lg" src="https://salif.github.io/linkita/processed_images/08-example.9d29c5def4caf476.jpg" alt="Galeri için demo resim" /> </a> </div> <h2 id="projeler">Projeler</h2> <p><code>&lt;projects /&gt;</code> bileşeni, projeleriniz için bir sayfa oluşturmanıza olanak tanır.</p> <p>Bir <code>content/pages/projects/index.md</code> dosyası oluşturun:</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 = &quot;Projelerim&quot;</span></span> <span class="giallo-l"><span>description = &quot;&quot;</span></span> <span class="giallo-l"><span>path = &quot;projects&quot;</span></span> <span class="giallo-l"><span>+++</span></span> <span class="giallo-l"></span> <span class="giallo-l"><span>{{ </span><span style="color: light-dark(#800000, #E6EDF3);">&lt;</span><span style="color: light-dark(#800000, #7EE787);">projects</span><span style="color: light-dark(#E50000, #79C0FF);"> path</span><span>=</span><span style="color: light-dark(#0000FF, #A5D6FF);">&quot;</span><span style="color: light-dark(#0000FF, #A5D6FF);">data.toml</span><span style="color: light-dark(#0000FF, #A5D6FF);">&quot;</span><span style="color: light-dark(#E50000, #79C0FF);"> format</span><span>=</span><span style="color: light-dark(#0000FF, #A5D6FF);">&quot;</span><span style="color: light-dark(#0000FF, #A5D6FF);">toml</span><span style="color: light-dark(#0000FF, #A5D6FF);">&quot;</span><span style="color: light-dark(#800000, #E6EDF3);"> /&gt;</span><span> }}</span></span></code></pre> <p>Bir <code>content/pages/projects/data.toml</code> dosyası oluşturun:</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);"> &quot;</span><span style="color: light-dark(#A31515, #A5D6FF);">lorem</span><span style="color: light-dark(#A31515, #A5D6FF);">&quot;</span></span> <span class="giallo-l"><span style="color: light-dark(#001080, #E6EDF3);">desc</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> &quot;</span><span style="color: light-dark(#A31515, #A5D6FF);">Lorem ipsum dolor sit.</span><span style="color: light-dark(#A31515, #A5D6FF);">&quot;</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);">&quot;</span><span style="color: light-dark(#A31515, #A5D6FF);">lorem</span><span style="color: light-dark(#A31515, #A5D6FF);">&quot;</span><span>,</span><span style="color: light-dark(#A31515, #A5D6FF);"> &quot;</span><span style="color: light-dark(#A31515, #A5D6FF);">ipsum</span><span style="color: light-dark(#A31515, #A5D6FF);">&quot;</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);"> &quot;</span><span style="color: light-dark(#A31515, #A5D6FF);">homepage</span><span style="color: light-dark(#A31515, #A5D6FF);">&quot;</span><span>,</span><span style="color: light-dark(#001080, #E6EDF3);"> url</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> &quot;</span><span style="color: light-dark(#A31515, #A5D6FF);">https://example.com</span><span style="color: light-dark(#A31515, #A5D6FF);">&quot;</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);"> &quot;</span><span style="color: light-dark(#A31515, #A5D6FF);">source</span><span style="color: light-dark(#A31515, #A5D6FF);">&quot;</span><span>,</span><span style="color: light-dark(#001080, #E6EDF3);"> url</span><span> =</span><span style="color: light-dark(#A31515, #A5D6FF);"> &quot;</span><span style="color: light-dark(#A31515, #A5D6FF);">https://example.com</span><span style="color: light-dark(#A31515, #A5D6FF);">&quot;</span><span> }</span><span>,</span></span> <span class="giallo-l"><span>]</span></span></code></pre> <p>Bu şu şekilde görüntülenecektir:</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>