published on 16.06.2018

Eğer yazılarımıza etiket ekleyip arşivimizi de etiketlere göre filtrelemek istiyorsak, ihtiyacımız olanlar;

  • tüm postları listelediğimiz genel bir arşiv sayfası,
  • her post için etiketleri tanımlamak,
  • ve tanımladığımız her etiket için o etiketi kullanan tüm postları listeleyeceğimiz birer sayfa oluşturmak.

Arşiv Sayfası Oluştur

Oldukça kolaydır, aşağıdaki gibi oluşturulabilir:

1
2
3
4
{% assign posts = site.posts | sort: "date" | reverse %}
{% for post in posts %}
    <li><a href="{{post.url}}">{{post.title}}</a></li>
{% endfor %}

Burada basitçe, tüm postları sırasıyla listeledik. Tabii ki, yalnızca başlıkları yazdırmak güzel olmayacaktır, nasıl düzenlemek istediğiniz size kalmış. Benim çözümüm _include/post_header.html adında bir include dosyası oluşturup sırasıyla post.title, post.date, post.tags, post.description gibi paremetleri orada düzenleyip istediğim yerde istediğim şekilde çağırmak olmuştu. Ancak, konu ile doğrudan ilgisi olmadığı için ve aşağıdaki kodlarda gereksiz karmaşa yaratacağı için burayı tek satır ile geçiyorum. (bknz: Include.html)

Bu sayfanın permalinkini “/tag/” şeklinde belirledim. Bu sayfa doğrudan ilgili olmasa da neden önemli olduğunu aşağıda açıklayacağım. [1]

Post Etiketlerini Tanımla

Beklediğiniz gibi, etiketlemek istenilen postun front-matterına aşağıdaki satıra benzer bir satır eklemeliyiz.

1
tags: tag1 tag2 tag3

Ayrıca, ilgili layoutlara (örneğin _layouts/post.html) bu etiketleri, üçüncü adımda oluşturacağımız ilgili etiket sayfalarına yönlendirecek linkler şeklinde eklemeliyiz.

Ben, tagleri birazdan fazla yerde, farklı parametreler ile çağırdığım için, burada bir include dosyası (_include/get_tags.html) oluşturdum. Basitleştirilmiş içeriği aşağıdadır:

1
2
3
4
{% for tag in page.tags %}
    {% capture tag_name %}{{ tag }}{% endcapture %}
    <a href="/tag/{{ tag_name }}">#{{ tag_name }}</a>
{% endfor %}

page.tags içindeki herbir tag‘i yakalayıp “/tag/tag_name” referansı ile link şeklinde yazdırıyoruz.

[1] /tag/ permalinki ile oluşturduğumuz arşiv sayfasının önemi burada ortaya çıkıyor. /tag/ sayfası olmadan da /tag/tag_name/ sorunsuz şekilde çalışacaktır. Teknik anlamda bağlantılı değil; ancak hiyerarşik anlamda hoş olmayacaktır. Herhangi bir etiket için sondaki /tag_name/ kısmını sildiğimizde /tag/ tek başına 404 verecektir.

Örnek kullanım: _layouts/post.html’de {% include get_tags.html %} şekinde kullanıldığında, tags: tagx tagy etiketlerine sahip sayfa için, #tagx #tagy çıktısını verecektir. Bunlar sırasıyla /tag/tagx/ ve /tag/tagy/ sayfalarına gidecek bağlantılardır.

Etiket Sayfalarını Oluştur

Sıra geldi, yukarıda bahsettiğim /tag/tag_name sayfalarını oluşturmaya. Sitede kullandığınız herbir etiket için ayrı sayfaya (ayrı dosyaya) ihtiyacınız var. Herhangi bir özel içeriği olmayacak sadece aynı layoutu kullanarak ilgili yazıları listeleyecek bu sayfaları bir çeşit script kullanarak otomatik oluşturabilirsiniz ya da elle ekleyebilirsiniz. Windows kullanılıyorsanız, C# ile yazdığım konsol uygulamasını kullanabilirsiniz. Tag Page Generator

Bu sayfalar şu dizinde your_jekyll_directory/tag/tag_name.md aşağıdaki örnek front-matter ile oluşturulmalıdır:

1
2
3
4
5
---
layout: tag
title: "Tag: tag_name"
tag: tag_name
---

layout: tag

Arşiv sayfasındaki koda basit bir if koşulu eklememiz yeterli olacaktır:

1
2
3
4
5
6
{% assign posts = site.posts | sort: "date" | reverse %}    
{% for post in posts %}
    {% if post.tags contains page.tag %}
        <li><a href="{{post.url}}">{{post.title}}</a></li>
    {% endif %}
{% endfor %}
You are reading the 6th of 19 episodes in Jekyll.
Published on 16.06.2018 by Mert Bakır with commit 7858b9b.
jekyll
#jekyll #tags #web-dev
Next episode:
Liquid: String Operasyonları
published on 31.05.2018

Daha önce Liquid: Sayfalandırma ve Dizi Filtreleme konusunda birkaç dizi operasyonundan ve döngülerden bahsetmiştim. Şimdi stringler ile oynayacağız. Öncelikle belirteyim, liquid syntax’ı kesinlikle matematikte iyi değil, zaten amacı da o değil. Buna bağlı olarak jekyll ile dinamik yapılar …

published on 03.07.2018

Bu yazıda liquid syntaxında forloop’dan bahsedeceğiz. Yeni başlayanların da ilk karşılaştıkları klasik yapı, for döngüsü. […] 1 2 3 {% for post in site.posts%} // Do something here {% endfor %} Hemen karşınıza çıkmayan bazı incelikleri var. Onları paylaşalım: […] 1 2 3 {% for …

published on 03.07.2018

Bu yazıda, liquid syntax’ı ile diziler üzerinde yapılabilecek bazı işlemler üzerinde duracağım. Etiketlere Göre İlgili Yazılar Devam konusundaki inadım üzerine liquid’in array yapısı ile epey içli dışlı oldum. Öğrendiklerimi burada not alacağım. […] Doğru cevap: …

published on 20.01.2019

Tag Cloud. Bloglarda karşımıza çıkan klişe yapı. Wordpress kullananlar automatic generate ediyorlardır, Jekyll için ise belki vardır plugin ama biz kendimiz oluşturacağız. Öncelikle tag-cloud.html adı altında bir include dosyası oluşturalım. Böylece daha sonra arşiv sayfasında, tag ya da post …

published on 03.07.2018

Bu yazıda daha önce yazdığım Etiketlere Göre İlgili Yazılar konusundaki yapıyı eleştirip iyileştireceğiz. En azından başlangınçta öyle düşünüyordum. Kısaca hatırlayalım, ne yaptığımızı: […] Amaç: Tüm postlar arasından (all_posts) mevcut sayfanın etiketlerinden (page.tags) en az birine sahip …

published on 01.07.2018

Oldukça uzun, bir o kadar da gerekliliği tartışılır kod parçasını paylaşmak üzereyim. Baştan söyleyelim, biraz döngüler dönecek if statementlar kontrol edilecek. Bunlara bağlı olarak, eğer blogunuzda çok post varsa build time kötü derecede etkilenecek. Ne kadar etkisi olur, 11 postluk blogta şu an …

published on 29.08.2020

My experience with Hugo has been pretty good so far. It’s fast and flexible. Ever since I started using Hugo, I’ve been improving my website with small tweaks. In this post, I am going to share some tricks and workarounds I’ve found online while working with Hugo. Besides that, …