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 layoutlarında çağırabiliriz. {% include tagcloud.html %} Aşağıdaki kısa kod tüm işi yapmaya yeterli. Credits goes to this guy.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{% capture site_tags %}{% for tag in site.tags %}
    {{ tag | first }}
{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}

{% assign site_tags = site_tags | split: ',' %}

{% assign total_tag_count = 0 %}
{% for tag in site_tags %}
{% assign total_tag_count = total_tag_count | plus: site.tags[tag].size %}
{% endfor %}

<div>
{% for tag in site_tags %}
{% assign rel_tag_size = site.tags[tag].size | times: 2.0 | divided_by: total_tag_count | plus: 1 %}
    <a href="/tag/{{ tag }}" style="font-size: {{ rel_tag_size }}rem;">{{ tag }}</a>
{% endfor %}
</div>

site.tags, sitedeki tüm taglerin tutulduğu bir dizi ama sadece tag adlarını tutmuyor, o tagi kullanan dökümanları da saklıyor. Bize sadece unique tag adlarından oluşan bir liste lazım ve ilk adımda bunu yapıyoruz ve site_tags dizisini elde ediyoruz.

İkinci adımda artık herbir tag için görece boyut hesaplayacağız. Toplam geçen tag sayısını buluyoruz (unique değil, tekrarları da sayıyoruz). Bir tagin kaç kere geçtiğini buluyoruz ve buna göre inline css ile font-size’ı değiştiriyoruz. Böylece daha çok kullanılan etiket bulutta daha büyük görünüyor.

Relative Tag Size = Constant + (Tag.Count * ConstantMultiplier / TotalTagCount)

Tag Cloud with Relative Font Size
Tag Cloud with Relative Font Size

Burada dikkat edilmesi gereken iki konu var.

  1. Tag cloud’daki bir etikete tıklandığında userı, o tag ile ilgili bir sayfaya yönlendirmelisiniz. Bunun için, Etiketler‘i okuyabilirsiniz.

  2. Eğer collection yapısı kullanıyorsanız, site.tags yalnızca, posts collection’ı altındaki tagleri döndürecektir. Eğer tüm koleksiyonlardaki etiketleri istiyorsanız aşağıdaki gibi elde edebilirsiniz.

1
2
3
4
5
{% assign all_tags = '' | split: ''%}

{% for document in site.documents %}
    {% assign all_tags = all_tags | concat: document.tags | unique %}
{% endfor %}
You are reading the 13rd of 19 episodes in Jekyll.
Published on 20.01.2019 by Mert Bakır with commit 017b782.
jekyll
#jekyll #tags #web-dev
Next episode:
Sıradaki Yazılar
published on 20.01.2019

Bir postun altına, sıradaki N adet postun linkini nasıl ekleriz? Pagination, ama previous ile next yerine next N post. N, sizin seçeceğiniz bir sayı. Pagination adlı yazıda, önceki ve sonraki yazıları nasıl elde edeceğimizi anlatmıştım. Bir de uzunca ve build time kötü etkileyecek ama teoride …

published on 21.01.2019

Jekyll’da varsayılan olarak gelen yapıda tüm postları _posts/ klasörü altında tutarız. Post sayısı arttıkça postları gruplama, alt klasörlere bölme ihtiyacı duyabilirz. Jekyll hâlâ postları görecek ve site.posts değişkeni, _posts/ ve altındaki tüm alt dizinlerdeki tüm postları getirecektir. …

published on 21.01.2019

Jekyll’da dosyalara front-matter eklerken çoğunlukla tekrara düşebiliriz. Örneğin, birçok dosyaya aynı layoutu, layout: default, layout: post, kategoriyi category: your_category veya koleksiyonunuza özel belirlediğiniz custom attributeları eklerken benzer dosyaların herbirine, aynı satırları …

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 16.06.2018

Eğer yazılarımıza etiket ekleyip arşivimizi de etiketlere göre filtrelemek istiyorsak, ihtiyacımız olanlar; […] 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 …

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, …