Post

Chirpy'de Yazı Yazma Rehberi

Bu rehber, Chirpy şablonunda yazı yazmayı adım adım gösterecek.

Posted Updated
By ademavsar
9 min read

İsimlendirme ve Yol

Yeni bir dosya oluşturun, adını YYYY-MM-DD-TITLE.EXTENSION koyun ve kök dizindeki _posts içine yerleştirin. Lütfen EXTENSION uzantısının md veya markdown olması gerektiğini unutmayın. Dosya oluşturma sürecinden zaman kazanmak istiyorsanız, Jekyll-Compose eklentisini kullanmayı düşünün.

Front Matter

Temelde, yazının başında aşağıdaki gibi Front Matter doldurmanız gerekir:

1
2
3
4
5
6

---
title: BAŞLIK
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [ANA_KATEGORİ, ALT_KATEGORİ]
tags: [ETİKET]     # ETİKET isimleri her zaman küçük harf olmalıdır
---

Yazıların layout‘u varsayılan olarak post olarak ayarlanmıştır, bu yüzden Front Matter bloğunda layout değişkenini eklemenize gerek yoktur.

Tarih Saat Dilimi

Bir yazının yayınlanma tarihini doğru bir şekilde kaydetmek için, sadece _config.yml dosyasındaki timezone ayarını yapmakla kalmayıp, ayrıca Front Matter bloğunda date değişkeninde yazının saat dilimini belirtmelisiniz. Format: +/-TTTT, örneğin +0800.

Kategoriler ve Etiketler

Her yazının categoriesi en fazla iki eleman içerebilir ve tags elemanlarının sayısı sıfırdan sonsuza kadar olabilir. Örneğin:

1
2
3
4

---
categories: [Hayvan, Böcek]
tags: [arı]
---

Yazar Bilgileri

Yazının yazar bilgileri genellikle Front Matter’da doldurulmaz, bunlar varsayılan olarak yapılandırma dosyasındaki social.name ve social.linksin ilk girişinden alınır. Ancak aşağıdaki gibi geçersiz kılabilirsiniz:

_data/authors.yml dosyasına yazar bilgilerini ekleyin (Eğer sitenizde bu dosya yoksa, çekinmeden bir tane oluşturun).

1
2
3
4

<author_id>:
  name: <tam isim>
  twitter: <yazarın_twitter>
  url: <yazarın_anasayfası>

Ardından, author kullanarak tek bir giriş veya authors kullanarak birden fazla giriş belirleyin:

1
2
3
4
5

---
author: <author_id>                     # tek giriş için
# veya
authors: [<author1_id>, <author2_id>]   # birden fazla giriş için
---

Bununla birlikte, author anahtarı birden fazla girişi tanımlayabilir.

_data/authors.yml dosyasından yazar bilgilerini okumanın faydası, sayfada twitter:creator meta etiketinin olmasıdır, bu da Twitter Kartları için iyidir ve SEO açısından faydalıdır.

Yazı Tanımı

Varsayılan olarak, yazının ilk kelimeleri ana sayfada yazı listesinde, Further Reading bölümünde ve RSS beslemesinin XML’inde kullanılır. Yazı için otomatik olarak oluşturulan tanımı göstermek istemiyorsanız, Front Matter‘da description alanını kullanarak özelleştirebilirsiniz:

1
2
3

---
description: Yazının kısa özeti.
---

Ayrıca, description metni, yazının sayfasındaki başlık altında da gösterilir.

İçindekiler Tablosu

Varsayılan olarak, yazının sağ panelinde İçindekiler Tablosu (TOC) gösterilir. Bunu genel olarak kapatmak istiyorsanız, _config.yml dosyasına gidin ve toc değişkeninin değerini false olarak ayarlayın. Belirli bir yazı için TOC’yi kapatmak istiyorsanız, yazının Front Matterına aşağıdakileri ekleyin:

1
2
3

---
toc: false
---

Yorumlar

Yorumların global anahtarı _config.yml dosyasındaki comments.active değişkeni tarafından tanımlanmıştır. Bu değişken için bir yorum sistemi seçtikten sonra, tüm yazılar için yorumlar açık olacaktır.

Belirli bir yazı için yorumu kapatmak istiyorsanız, yazının Front Matterına aşağıdakileri ekleyin:

1
2
3

---
comments: false
---

Matematik

Matematik üretimi için MathJax kullanıyoruz. Web sitesi performansı nedenleriyle, matematik özelliği varsayılan olarak yüklenmez. Ancak şu şekilde etkinleştirilebilir:

1
2
3

---
math: true
---

Matematik özelliği etkinleştirildikten sonra, aşağıdaki sözdizimi ile matematik denklemleri ekleyebilirsiniz:

  • Blok matematik $$ math $$ ile eklenmelidir ve $$ öncesi ve sonrası zorunlu boş satırlar olmalıdır
    • Denklem numarası eklemek $$\begin{equation} math \end{equation}$$ ile eklenmelidir
    • Denklem numarasına başvurma denklem bloğunda \label{eq:label_name} ile ve metin içinde \eqref{eq:label_name} ile yapılmalıdır (aşağıdaki örneğe bakınız)
  • Satır içi matematik (satırlarda) $$ math $$ ile eklenmelidir ve $$ öncesi ve sonrasında boş satır olmamalıdır
  • Satır içi matematik (listelerde) \$$ math $$ ile eklenmelidir
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!-- Blok matematik, tüm boş satırları koruyun -->

$$
LaTeX_math_expression
$$

<!-- Denklem numarası, tüm boş satırları koruyun  -->

$$
\begin{equation}
  LaTeX_math_expression
  \label{eq:label_name}
\end{equation}
$$

\eqref{eq:label_name} olarak başvurulabilir.

<!-- Satır içi matematik satırlarda, BOŞ SATIR YOK -->

"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."

<!-- Satır içi matematik listelerde, ilk `$` kaçın -->

1. \$$ LaTeX_math_expression $$
2. \$$ LaTeX_math_expression $$
3. \$$ LaTeX_math_expression $$

v7.0.0 itibarıyla, MathJax yapılandırma seçenekleri assets/js/data/mathjax.js dosyasına taşındı ve ihtiyaca göre değiştirilebilir, örneğin eklentiler ekleyebilirsiniz. Eğer siteyi chirpy-starter üzerinden inşa ediyorsanız, bu dosyayı gem kurulum dizininden (komutla bundle info --path jekyll-theme-chirpy kontrol edin) aynı dizine kopyalayın.

Mermaid

Mermaid harika bir diyagram oluşturma aracıdır. Yazınızda bunu etkinleştirmek için YAML bloğuna aşağıdakileri ekleyin:

1
2
3

---
mermaid: true
---

Sonra diğer markdown dilleri gibi kullanabilirsiniz: grafik kodunu ```mermaid ve ``` ile çevreleyin.

Resimler

Başlık

Bir resmin altındaki bir sonraki satıra italik ekleyin, o zaman bu başlık olur ve resmin altında görünür:

1
2

![img-description](/path/to/image)
_Resim Başlığı_

Boyut

Sayfa içeriği düzeninin resim yüklendiğinde kaymasını önlemek için, her resim için genişlik ve yükseklik belirlemeliyiz.

1

![Masaüstü Görünümü](/assets/img/sample/mockup.png){: width="700" height="400" }

Bir SVG için, en azından genişliğini belirtmelisiniz, aksi takdirde görüntülenmez.

_Ch

irpy v5.0.0_‘dan itibaren, height ve width kısaltmaları (height → h, width → w) destekler. Yukarıdaki örnekle aynı etkiye sahip aşağıdaki örneğe bakın:

1

![Masaüstü Görünümü](/assets/img/sample/mockup.png){: w="700" h="400" }

Konum

Varsayılan olarak resim ortalanmıştır, ancak normal, left ve right sınıflarından birini kullanarak konumu belirleyebilirsiniz.

Konum belirlendikten sonra, resim başlığı eklenmemelidir.

  • Normal konum

    Aşağıdaki örnekte resim sola hizalanacaktır:

    1

    ![Masaüstü Görünümü](/assets/img/sample/mockup.png){: .normal }

  • Sola yasla

    1

    ![Masaüstü Görünümü](/assets/img/sample/mockup.png){: .left }

  • Sağa yasla

    1

    ![Masaüstü Görünümü](/assets/img/sample/mockup.png){: .right }

Karanlık/Aydınlık Mod

Resimlerin karanlık/aydınlık mod tercihlerine göre takip edilmesini sağlayabilirsiniz. Bunun için karanlık mod ve aydınlık mod için iki resim hazırlamanız gerekir, ardından belirli bir sınıf (dark veya light) atamanız gerekir:

1
2

![Aydınlık mod sadece](/path/to/light-mode.png){: .light }
![Karanlık mod sadece](/path/to/dark-mode.png){: .dark }

Gölge

Program penceresinin ekran görüntülerinin gölge efekti göstermesi düşünülebilir:

1

![Masaüstü Görünümü](/assets/img/sample/mockup.png){: .shadow }

CDN URL

Medya kaynaklarını CDN üzerinde barındırıyorsanız, CDN URL’ini tekrar tekrar yazma zamanından tasarruf edebilirsiniz, _config.yml dosyasındaki cdn değişkenini atayarak:

1

cdn: https://cdn.com

cdn atanmışsa, CDN URL’si tüm medya kaynaklarının (site avatarı, yazıların resimleri, ses ve video dosyaları) yoluna / ile başlayarak eklenir.

Örneğin, resim kullanırken:

1

![Çiçek](/path/to/flower.png)

Ayrıştırma sonucu, resim yolunun önüne otomatik olarak CDN öneki https://cdn.com eklenir:

1

<img src="https://cdn.com/path/to/flower.png" alt="Çiçek" />

Medya Alt Yolu

Bir yazı birçok resim içerdiğinde, medya kaynaklarının yolunu tekrar tekrar tanımlamak zaman alıcı bir iş olacaktır. Bunu çözmek için, bu yolu yazının YAML bloğunda tanımlayabiliriz:

1
2
3

---
media_subpath: /img/yol/
---

Ardından, Markdown resim kaynağını doğrudan dosya adıyla yazabilirsiniz:

1

![Çiçek](flower.png)

Çıktı şu şekilde olacaktır:

1

<img src="/img/yol/flower.png" alt="Çiçek" />

Önizleme Resmi

Yazının üst kısmına bir resim eklemek istiyorsanız, 1200 x 630 çözünürlüğünde bir resim sağlayın. Lütfen, resim en boy oranı 1.91 : 1i karşılamıyorsa, resmin ölçeklendirileceğini ve kırpılacağını unutmayın.

Bu ön koşulları bildiğinizde, resmin özniteliklerini ayarlamaya başlayabilirsiniz:

1
2
3
4
5

---
image:
  path: /path/to/image
  alt: image alternatif metin
---

Not, media_subpath önizleme resmine de geçirilebilir, yani ayarlandığında, path özniteliği yalnızca resim dosya adını içermelidir.

media_subpath

Basit kullanım için, yolu tanımlamak için sadece image kullanabilirsiniz.

1
2
3

---
image: /path/to/image
---

LQIP

Önizleme resimleri için:

1
2
3
4

---
image:
  lqip: /path/to/lqip-file # veya base64 URI
---

LQIP’yi Text and Typography yazısının önizleme resminde gözlemleyebilirsiniz.

Normal resimler için:

1

![Resim açıklaması](/path/to/image){: lqip="/path/to/lqip-file" }

Sabitlenmiş Yazılar

Ana sayfanın üst kısmına bir veya daha fazla yazıyı sabitleyebilirsiniz ve sabitlenmiş yazılar yayınlanma tarihlerine göre tersten sıralanır. Etkinleştirmek için:

1
2
3

---
pin: true
---

İpuçları

Birkaç tür ipucu vardır: tip, info, warning ve danger. Bunlar, alıntıya prompt-{type} sınıfını ekleyerek oluşturulabilir. Örneğin, info türünde bir ipucu şu şekilde tanımlanır:

1
2

> İpucu örneği satırı.
{: .prompt-info }

Sözdizimi

Satır İçi Kod

1

`satır içi kod parçası`

Dosya Yolu Vurgulama

1

`/path/to/a/file.extend`{: .filepath}

Kod Bloğu

Markdown sembolleri ``` ile kolayca bir kod bloğu oluşturabilirsiniz:

1
2
3

```
Bu, düz metin kod parçacığıdır.
```

Dil Belirtme

```{dil} kullanarak sözdizimi vurgusu olan bir kod bloğu elde edersiniz:

1
2
3

```yaml
anahtar: değer
```

Bu tema ile Jekyll etiketi {% highlight %} uyumlu değildir.

Satır Numarası

Varsayılan olarak, plaintext, console ve terminal dışındaki tüm diller satır numaralarını gösterir. Bir kod bloğunun satır numarasını gizlemek istediğinizde, ona nolineno sınıfını ekleyin:

1
2
3
4

```shell
echo 'Artık satır numaraları yok!'
```
{: .nolineno }

Dosya Adını Belirtme

Kod bloğunun üst kısmında kod dilinin gösterildiğini fark etmiş olabilirsiniz. Bunu dosya adıyla değiştirmek istiyorsanız, bunu başarmak için file özniteliğini ekleyebilirsiniz:

1
2
3
4

```shell
# içerik
```
{: file="path/to/file" }

Liquid Kodları

Liquid kod parçacığını göstermek istiyorsanız, liquid kodunu {% raw %} ve {% endraw %} ile çevreleyin:

1
2
3
4
5
6
7

{% raw %}
```liquid
{% if product.title contains 'Pack' %}
  Bu ürünün başlığı 'Pack' kelimesini içerir.
{% endif %}
```
{% endraw %}

Veya yazının YAML bloğuna render_with_liquid: false ekleyin (Jekyll 4.0 veya daha yüksek sürümü gerektirir).

Videolar

Video Paylaşım Platformu

Aşağıdaki sözdizimi ile bir video gömebilirsiniz:

1

{% include embed/{Platform}.html id='{ID}' %}

Burada Platform, platform adının küçük harflidir ve ID, video ID’sidir.

Aşağıdaki tablo, verilen bir video URL’sinde ihtiyacımız olan iki parametreyi nasıl alacağımızı gösterir ve ayrıca şu anda desteklenen video platformlarını da bilebilirsiniz.

Video URLPlatformID
https://www.youtube.com/watch?v=H-B46URT4mgyoutubeH-B46URT4mg
https://www.twitch.tv/videos/1634779211twitch1634779211
[https://www.bilibili.com/video/BV1Q44y1B7Wf  
](https://www.bilibili.com/video/BV1Q44y1B7Wf)bilibiliBV1Q44y1B7Wf

Video Dosyası

Bir video dosyasını doğrudan gömmek istiyorsanız, aşağıdaki sözdizimini kullanın:

1

{% include embed/video.html src='{URL}' %}

Burada URL, bir video dosyasına yönlendiren bir URL’dir, örneğin /assets/img/sample/video.mp4.

Gömülü video dosyası için ek öznitelikler belirleyebilirsiniz. İzin verilen özniteliklerin tam listesi aşağıdadır.

  • poster='/path/to/poster.png' - video indirilirken gösterilen afiş resmi
  • title='Metin' - videonun altında görünen ve resimler için olanla aynı görünen video başlığı
  • autoplay=true - video mümkün olduğu kadar hızlı otomatik olarak oynatılmaya başlar
  • loop=true - video sona erdiğinde otomatik olarak başa sarar
  • muted=true - ses başlangıçta sessiz olur
  • types - ek video formatlarının uzantılarını | ile ayırarak belirtin. Bu dosyaların ana video dosyanızla aynı dizinde olduğundan emin olun.

Tüm yukarıdakileri kullanan bir örneği düşünün:

1
2
3
4
5
6
7
8
9
10

{%
  include embed/video.html
  src='/path/to/video/video.mp4'
  types='ogg|mov'
  poster='poster.png'
  title='Demo video'
  autoplay=true
  loop=true
  muted=true
%}

Video dosyalarını assets klasöründe barındırmak önerilmez çünkü PWA tarafından önbelleğe alınamazlar ve sorunlara neden olabilirler. Bunun yerine, video dosyalarını barındırmak için CDN kullanın. Alternatif olarak, PWA’dan ( _config.yml dosyasındaki pwa.deny_paths ayarına bakın) hariç tutulan ayrı bir klasör kullanın.

Sesler

Ses Dosyası

Bir ses dosyasını doğrudan gömmek istiyorsanız, aşağıdaki sözdizimini kullanın:

1

{% include embed/audio.html src='{URL}' %}

Burada URL, bir ses dosyasına yönlendiren bir URL’dir, örneğin /assets/img/sample/audio.mp3.

Gömülü ses dosyası için ek öznitelikler belirleyebilirsiniz. İzin verilen özniteliklerin tam listesi aşağıdadır.

  • title='Metin' - sesin altında görünen ve resimler için olanla aynı görünen ses başlığı
  • types - ek ses formatlarının uzantılarını | ile ayırarak belirtin. Bu dosyaların ana ses dosyanızla aynı dizinde olduğundan emin olun.

Tüm yukarıdakileri kullanan bir örneği düşünün:

1
2
3
4
5
6

{%
  include embed/audio.html
  src='/path/to/audio/audio.mp3'
  types='ogg|wav|aac'
  title='Demo audio'
%}

Ses dosyalarını assets klasöründe barındırmak önerilmez çünkü PWA tarafından önbelleğe alınamazlar ve sorunlara neden olabilirler. Bunun yerine, ses dosyalarını barındırmak için CDN kullanın. Alternatif olarak, PWA’dan hariç tutulan ayrı bir klasör kullanın ( _config.yml dosyasındaki pwa.deny_paths ayarına bakın).

Daha Fazla Bilgi

Jekyll yazıları hakkında daha fazla bilgi için Jekyll Docs: Posts sayfasını ziyaret edin.

Guides
blog
This post is licensed under CC BY 4.0 by the author.