Grav Makdown İçerik Yazımı

Bir sonraki aşamaya geçerek içerik üretiminde nelere dikkat etmeniz gerektiğine değinebiliriz. Tabi, markdown ile ilgili temel bir bilginiz olduğunu varsayıyorum. Çünkü bu yazıda markdown yazım kurallarında değil, bu yazım kurallarının Grav temelinde nasıl ele alınabileceğinden bahsedeceğim.

Grav İçerik Üretimi

Grav kurulumuna dair bilgiler verirken de bahsettiğim üzere, tema, eklenti ve içerikler user klasörü altında tutulmaktadır. Aslında, oyun alanımızın tamamen bu klasör içeriğinden oluştuğunu söylemek yanlış bir ifade olmayacaktır.

.
├── accounts
├── config
├── data
├── pages
├── plugins
└── themes

6 directories

Görüldüğü üzere hesap bilgilerimiz, sistem ayarlarımız, verilerimiz, eklenti ve temaslarımız dışında içeriklerimizin tamamı da burada yer almktadır. İçerikler bağlamında ilerlediğimizde göre pages içeriğine bir göz atalım.

.
├── 01.home
├── 02.about
├── 03.posts
├── 04.trainings
├── 05.projects
└── 06.contact

6 directories

Klasör isimlendirmesinde rakamlar klasörün sırasını ifade eder ve ardından gelen ifade site yöneticisi tarafından atanır. Bu rakamları id olarak nitelendiremeyiz, çünkü bir benzersizlik şartı bulunmamakta. Ben içerikler olarak ifade ettiğim içerik akışı için posts tanımını kullandım. Bu klasörün içeriğini de aşağıdaki gibi özetleyebiliriz.

.
├── 1.freecodecamp
├── 10.wppostpagemanager
├── 100.tableau-nedir
├── 101.weka-nedir
├── 102.knime-nedir
├── 103.rapidminer-nedir
├── 104.alteryx-nedir
├── ...
├── ...
├── ...
├── ...
└── 99.yasaksiz-guvenli-internet

454 directories

En temel haliyle, her içerik bir klasör olarak tanımlıdır ve klasör içeriğinde bir markdown dosyası yer alır. Eğer çoklu dil özelliğinden faydalanmıyorsanız markdown dosyası post.md adını alır, diğer durumda post.en.md gibi dosya ismi dil ifadesiyle birlikte oluşturulur. Görsellerin klasör içerisinde bulundurulma zorunluluğu yoktur. destination olarak ifade edilen bu tanım user/plugins/my-plugin/assets gibi bir bir yol değeri alabileceği gibi self@ , theme@:/assets gibi tanımlar da alabilmektedir. self@ yazı içerisine eklenen görselin yazıya ait klasörde bulundurulacağını belirtir¹ ².

Yukarıda bir içeriğin nasıl konumlandırılacağına değinmiş olduk. Şimdi de içeriğin kendi sürecine geçebiliriz.

Yazım Kuralları

Markdown içerisinde bulunan YAML satırları içeriğin kendisi ile de bütünlük taşır. Örneğin, <h1>...</h1> etiketi bildiğiniz üzere içerisinde bulunduğu section için öncelik şartı taşır³. Top-level heading olarak ifade edilen bu etiket çoğu zaman yazının ana başlığını tanımlar⁴. Bu sebeple SEO çalışmalarında da genel içerik süreçlerinde benzersiz bir değer olmasına özen gösterilir⁵.

---
title: 'Grav Makdown İçerik Yazımı'
---

# Grav Makdown İçerik Yazımı

Yukarıdaki kullanımda YAML satırı olarak tanımlı title ile # ile işaretlenmiş metin aynı heading seviyesindedir. Dolayısıyla, uyarı almanıza sebep olabilir. Bu nedenle, yazı içerisinde bir sonraki level olan <h2>...</h2> yani ## ile devam etmeniz daha sağlıklı olacaktır.

---
title: 'Grav Makdown İçerik Yazımı'
---

## Grav Makdown İçerik Üretimi

Toparlamak gerekirse, markdown içeriklerinde heading level'larına dikkat edilmesi gerekmektedir. Ek olarak, her heading benzersiz bir değer almalıdır.

---
title: 'Grav Makdown İçerik Yazımı'
---

## Grav Makdown İçerik Üretimi

### Makdown Kuralları

#### Makdown

Bağlantı Oluşturmak

Bir yazı içerisinden başka bir yazıya URI şeklinde bağlantı verilebilir. Bu şekilde dil tanımı yapmanıza da gerek kalmaz.

[URI](../uri-url-urn)

Şimdi, bir de bu bu bağlantıya özellik ekleyelim.

[URI](../uri-url-urn?target=_blank&rel=noopener&class=has-text-green&id=new-link)

Bu bağlantı tanımı yorumlandıktan sonra şu hale gelir.

<a href="/tr/uri-url-urn" target="_blank rel=noopener" class="has-text-green" id="new-link">URI</a>

Şimdi, bağlantı yerine bir de görsel ekleme işlemi yapalım ve yine çeşitli özellikler tanımlayalım⁶.

![Test Image 3](1.png)
![Test Image 3](1.png?class=image,is-fullwidth&cropResize=400,200&grayscale)

Dipnot

Genelde yazı içerisindeki bağlantıları mümkün olduğu kadar sınırlı tutmaya çalışıyor ve ekstra bağlantıları yazı sonlarına yerleştiriyorum. Bu nedenle referans bağlantılar benim için daha kıymetli hale geliyor. Bir ifadeyi ilgili bir kaynak ile ilişkilendirildiğinde bu dipnot olarak ifade edilen alan ile ilişkilendirilir. Verilen bu referans bağlantılar konunun akışına göre bir benzersiz ve hiyerarşik olarak konumlandırılır. Markdown yazımında bu tanımlar [^<index> ya da <id>] şeklinde eklenir.

Mesela, yazımız içerisinde bir alıntımız olsun ve alıntının sonuna da bir referans bağlantı ekleyelim.

İçeriklerinizi Visual Studio Code üzerinden yönetebilirsiniz. Markdown içerikleriniz için Prettier, Markdown All in One, Markdown Table Prettifier, Markdown Notes ve Markdown Footnote eklentilerini öneririm.⁷

[^7] olarak verdiğim bu index tanımını [^csv-eklentileri] şeklinde id olarak da ekleyebiliriz. İlgili referans bağlantısı eğer dipnot olarak karşılığı yoksa bağlantı haline getirilmez. Karşılığı var ise sizin belirttiğiniz index kontrol edilir ve gerekiyorsa düzenlenerek bağlantı olarak sunulur. Örneğin, siz yazı akışında [^1] sonrasında [^6] tanımında bulunursanız ve ayrıca [^6] için başka bir yerde referans oluşturmadıysanız yorumlanma sonrasında ilgili referans için [^2] değeri verilir ve dipnot bu sıraya göre sunulur. Ek olarak, [^id] tanımları da yine verildikleri sıraya göre sayısal değer alırlar. Yani, siz ilgili satırda [^csv-eklentileri] şeklinde ilgili dipnotu işaret edebilirsiniz, ancak sayfa yorumlandığında bu id tanımı verildiği sıraya göre #anchor tanımını alır.

[^1]: [WordPress - GRAV CMS Geçişi](../wordpress-grav-cms-gecisi)
[^csv-eklentileri]: [WordPress - GRAV CMS Geçişi](../wordpress-grav-cms-gecisi)

Kısaltma Kullanımı ve abbr Etiketi

Metinler içerisinde kısaltmalar kullanıyor olabilirsiniz. Normal şartlarda bu kısaltmalar abbr etiketi ile işaretlenir ve title özelliği ile açılımı belirtilir.

<abbr title="HyperText Markup Language">HTML</abbr>

Markdown içeriğimizde bu tanımları yazı sonunda ve tek satırda yaparız, yazı yorumlandığında eşleşen her alan için abbr etiketi otomatik olarak oluşturulur. Bir nevi değişken tanımlama olarak ifade edebiliriz.

*[dipnot]: footnote
*[CMS]: Content Management System

Bu satırlar sayfa yorumlanırken kullanılırlar, herhangi bir şekilde içerik içerisinde yer almazlar.

Twig Kodları

Grav ön tanımlı olarak markdown yazım biçimini yorumlar.

process:
    markdown: true

Ancak, gerektiği durumlarda, yazı içerisinde belirtmek koşulu ile twig kodları ile de işlemler gerçekleştirebilmekteyiz.

process:
    markdown: true
    twig: true

Hatta, yazımız yorumlanırken markdown öncesinde twig kodumuzun yorumlanmasını da sağlayabiliriz.

process:
    markdown: true
    twig: true
twig_first: true

Bu satırları yazımızın header olarak ifade edilen YAML bölümüne eklememiz yeterli. Örneğin, aşağıdaki kutucuk içerisindeki metin ön tanımlı 3 metin arasından rastgele getirilmekte. Farklı bir metin görüntülemek için sayfayı yenilemeniz yeterli.

Bonjour!

Bu işlemi gerçekleştirmek için random fonksiyonunu yazı içerisinde tanımlamam yeterli oldu.

Hello!

Şayet, gerçekleştireceğiniz işlem her defasında yeniden üretilecek ise ayrıca never_cache_twig: true satırını eklemelisiniz.

process:
    markdown: true
    twig: true
twig_first: true
never_cache_twig: true

Kod Vurgulama (Highlight)

Satır içi kodları bildiğiniz üzere `` ve blok olarak ``` şeklinde ifade etmekteyiz.

Satır içi kod örneği `...`
Blok kod örneği

``` html
    ...
    ...
```

Ancak bazı durumlarda sayfa yorumlanırken hatalarla karşılaşılabilmekte. Örneğin, aşağıdaki kod hata almanıza neden olacaktır.

Çünkü yazım biçimi css veya html ile uyumlu olarak yorumlanmaz. Bu gibi durumlarda kod tipini text ya da php olarak belirleyebilirsiniz. Özellikle php olarak tanımlarsanız kod renklendirme işlemi html gibi gerçekleştirilecektir. Son olarak, az önceki örneği göstermek için gist kodu eklemem gerekti. Bu ekleme işlemini yine twig kodu ile gerçekleştirdim.

gist('3f678d21c0e6c481ca1001d6c44c95ad')

Şimdilik karşılaştığım ve çözümlediğim durumlar bunlar, zamanla yeni eklemeler yapacağım. Siz de ürettiğiniz çözümleri yorum olarak paylaşırsanız yazı içerisinde yer vermek isterim.