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 için yorum yapamıyorum. Gerçi, duruma göre sadeleştirmeniz bazı loopları kaldırmanız mümkün. Uzatmayalım, işe koyulalım.

Kodu adım adım açıklamadan önce, algoritmayı özetleyelim.

Durum:

  • Birçok koleksiyonuz var.

Eğer koleksiyon yapısını bilmiyorsanız ve umrunuzda değilse devam edebilirsiniz, konumuzla doğrudan ilgisi yok. Koleyksiyonlar hakkında henüz yazmadım ama okumak isteyenler için:

  • Her post’a ait bir ya da daha fazla etiket var. (post.tags dizisi)
    • Örneğin, bu post için, post.tags = [jekyll, liquid, pagination, tag-filter]
  • Birden fazla post aynı etiketle etikenlemiş olabilir.
    • Örneğin bunun gibi 7 post daha var “jekyll” etiketine sahip.
  • Herhangi iki postun birden fazla etiketi ortak olabilir.
    • Örneğin, hem jekyll, hem liquid etiketlerine sahip 4 ayrı post mevcut.

Jekyll’da “posts” koleksiyonlardan biridir ve “post” o koleksiyondan bir üyeye karşılık gelir. Ancak bu yazıda “post” derken yazılan bir metinden (bir url) bahsediyorum, teknik anlamda herhangir koleksiyonun herhangi bir üyesinden bahsediyorum.

Amaç:

  • Tüm postlar arasından (all_posts) mevcut sayfanın etiketlerinden (page.tags) en az birine sahip olan postları elde etmek.

Adım adım çözüme geçelim.

Tüm Koleksiyonları Birleştir

Öncelikle, tüm koleksiyonları bir tek dizide birleştirmeliyiz. Eğer koleksiyon yapısını kullanmıyorsanız, bu adımı geçip all_posts yazan yerlere site.posts yazabilir ve kendinize göre aşağıdaki kodu uyarlayabilirsiniz.

1
2
3
4
{% for collection in site.collections %}
    {% assign name = collection.label %}
    {% assign all_posts = all_posts | concat: site[name] %}
{% endfor %}

Döngü Mantığı

İç içe iki döngü olacak, all_posts’da herbir post için page.tags’de herbir etiket için. Eğer post etiketi içeriyorsa yazdıracağız.

1
2
3
4
5
6
7
8
{% for item in all_posts %}
    {% for tag in page.tags %}
        {% if item.tags contains tag %}
             <li><a href="{{item.url}}">{{item.title}}</a></li>
             {% break %}
        {% endif %}
    {% endfor %}
{% endfor %}

Burada break olmadığı durumda, herbir ortak etiket için aynı yazıyı tekrar listeleyecektir döngü içinde. break ile bir kere yazdırdıktan sonra döngüden çıkmak istiyoruz. Böylece tekrara düşmeyeceğiz.

Mevcut Sayfayı Dikkate Al

Mevcut sayfa da kendisiyle ortak etiketlere (tamamen aynı) sahip olduğu için eklenecektir. {% if item.url != page.url %} koşulunu ekleyerek ya da all_posts döngüsünde aşağıdaki koşuk eklenerek

1
2
3
{% if item.url == page.url %}
    {% continue %}
{% endif %}

bu problemi kolayca çözebiliriz.

Bir Limit Olmalı

Yüzlerce postunuz olduğunu düşünün, okuyucuyu bütün arşivinizi tavsiye ederek korkutmak istemezsiniz. Ayrıca break statementlar ile döngüyü kısaltatabiliriz.

1
2
3
{% if count == constant_limit %}
    {% break %}
{% endif %}

Ya Limitin Altında Kalırsak ?

Sonuçta bu da mümkün. Hatta hiç yazmadığınız bir konu hakkında yazıyorsanız o kadar işten sonra çıktı alamamınız da mümkün. Bunun için ben son yazılan postlardan sırasıyla eklemeyi düşündüm. Farklı çözümler de üretilebilir.

Kod kendini açıklar nitelikte. Yukarıdaki gibi, aynı sayfayı eklememek, mevcut sayfayı eklememek ve limiti geçmemek için kontroller yapıyoruz. Çıkabildiğimiz zaman döngüden çıkıyoruz, sonuna kadar gitmiyoruz.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{% if count < constant_limit %}
    {% for item in all_posts %}
        {% if item.url == page.url %}
            {% continue %}
        {% endif %}
        <li style="list-style: square"><a href="{{item.url}}">{{item.title}}</a></li>
        {% assign count = count | plus: 1%}
        {% if count == constant_limit %}
            {% break %}
        {% endif %}
    {% endfor %}
{% endif %}

Tüm Kod

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    {% assign constant_limit = 4 %}
    {% assign count = 0 %}

    {% for collection in site.collections %}
        {% assign name = collection.label %}
        {% assign all_posts = all_posts | concat: site[name] %}
    {% endfor %}
    
    {% assign all_posts = all_posts | sort: date | reverse %}

    {% for item in all_posts %}
        {% if item.url == page.url %}
            {% continue %}
        {% endif %}

        {% if count == constant_limit %}
           {% break %}
        {% endif %}

        {% for tag in page.tags %}
            {% if item.tags contains tag %}
                <li style="list-style: square"><a href="{{item.url}}">{{item.title}}</a></li>
                {% assign count = count | plus: 1%}
                {% break %}
            {% endif %}
        {% endfor %}
    {% endfor %}
    
    {% if count < constant_limit %}
        {% for item in all_posts %}
        
            {% if item.url == page.url %}
                {% continue %}
            {% endif %}

            <li style="list-style: square"><a href="{{item.url}}">{{item.title}}</a></li>
            {% assign count = count | plus: 1%}
            
            {% if count == constant_limit %}
                {% break %}
            {% endif %}

        {% endfor %}
    {% endif %}
You are reading the 11st of 19 episodes in Jekyll.
Published on 01.07.2018 by Mert Bakır with commit 5ebb327.
jekyll
#jekyll #liquid #pagination #tags #web-dev
Next episode:
Etiketlere Göre İlgili Yazılar - 2
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 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 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 18.05.2018

Pagination. Sayfalandırma. İsteğimiz her post için ‘önceki’ ve ‘sonraki’ postlara gidecek birer link oluşturmak ve bunu herhangi bir plugin kullanmadan yapmak. Aslında, postları tarihe göre sıralayıp önceki ve sonraki postlar için birer link ekleyeceğiz. Olduça basit bir iş. …

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

published on 24.01.2021
edited on 11.06.2021

Some time ago, I wanted to display image galleries on my Hugo website and searched for Hugo themes for photography and gallery. I can’t say I find much. Then, I met with a javascript library called nanogallery2 which is using another javascript library as an image viewer lightbox2. In this …

published on 23.01.2021
edited on 11.06.2021

Image processing may seem complicated at first but it’s actually easy and definitely worth implementing since it’ll help you decrease page load times. As you probably know, we don’t want to load raw images with huge sizes for small thumbnails or blog-posts. We want to load a small …

published on 31.12.2020
edited on 26.06.2021

I’ve, recently, published a blog post called Perfect Workflow for Publishing Python Notebooks. I talked about some of the benefits of using Rmarkdown and reticulate. In this post, I’ll try HTML widgets and explain how we can embed those in our blog post using nothing but R. […] 1 …

published on 05.12.2020

Resume A4 is a side project of mine. It’s one page Hugo Theme that allows you to write your resume in YAML format and keep track of it using git. Also, you can publish it online as a static site using GitLab, GitHub Pages, Netlify, or some other service you are familiar with. A few months …

published on 30.11.2020

I’ve been searching for a good workflow for publishing Jupyter or RMarkdown Notebooks as static blog posts. I think I’ve found the optimal solution for my use case. In this post, I’ll explain my workflow and why chose this way with examples. […] In reality my main purpose to …

published on 29.11.2020
edited on 05.12.2020

Plotly is a visualization library that allows us to write code in Python, R, or Julia and generates interactive graphs using Javascript. So, we don’t have to deal with Javascript. You can checkout Plotly gallery, there are interesting works. Anyway, last week, I’ve started learning …