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ş. Hatta jekyll daha da basitleştirmiş ve bizim için önceden tanımlı birkaç değişken eklemiş.

post.previous ile önceki postu, post.next bir sonraki postu elde edebiliriz.

1
2
<a href="{{page.previous.url}}">{{page.previous.title}}</a>
<a href="{{page.next.url}}">{{page.next.title}}</a>

Yalnız burada herhangi bir filtreleme yok. Mevcut koleksiyon site.posts içinde tarihe göre önceki ve sonraki yazıyı veriyor. Ben aynı sayfalandırmayı aynı kategori içerisinde sınırlandırmak istiyorum. Diğer bir deyişle, ‘jekyll’ kategorisinden bir yazı okurken önceki ve sonraki postların da yine ‘jekyll’ kategorisinden olmasını istiyorum.

Aşağıdaki gibi bir yapı kullanarak sayfalandırmanın (pagination) kategoriler arası geçişini engelleyebiliriz.

 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
<div class="PageNavigation">
  {% assign posts = site.posts | where:'category', page.category | sort:'date'%}
  {% for post in posts %}
    {% if post.title == page.title %}
      {% assign previous_index = forloop.index0 | minus: 1 %}
      {% assign next_index = forloop.index0 | plus: 1 %}

      {% if previous_index >= 0 and posts[previous_index].url %}
        <a href="{{posts[previous_index].url}}">{{posts[previous_index].title}}</a>
        {% else %}
        {% assign last = posts | last %}
        <a href="{{last.url}}">{{last.title}}</a>
      {% endif %}

      {% if posts[next_index].url %}
        <a href="{{posts[next_index].url}}">{{posts[next_index].title}}</a>
        {% else %}
        {% assign first = posts | first %}
        <a href="{{first.url}}">{{first.title}}</a>
      {% endif %}

    {% break %}
    {% endif %}
  {% endfor %}
</div>

Post’ların front-matter’ında aşağıdaki satırlar mevcut olmalıdır.

1
2
3
4
---
title: test_title
category: test_category
---

Gelelim yukarıdaki kodun mantığına;

  • Mevcut sayfanın category’sine göre sitedeki tüm postları filtrelenir ve date’e göre sıralanır. Bu diziye “posts” adı atanır.

Bu dizi içerisinde istediğimiz indexi (mevcut sayfa) bulmalı ve onu kullanarak bir önceki ile bir sonraki indexleri elde etmeliyiz. Tabii ki .IndexOf(object) yapamayacağımız için;

  • Posts içindeki herbir post için döngü döner ve title değişkenlerinin eşit olduğu yerde forloop.index0 değişkenini kullanarak mevcut index elde edilir. [1]
  • Mevcut index üzerinden previous_index ve next_index değerleri elde edilir.
  • Linkleri oluşturmadan önce mevcut olup olmadıklarını if posts[index].url ile kontrol edilir.
  • break ile döngünün boşuna dönmeye devam etmemesi gerektiğini söylenir ve bitirilir.

[1] burada şuna dikkat etmeliyiz; eğer ki aynı başlığa sahip birden fazla post var ise kod istediğimiz gibi çalışmayacaktır. Onun için burada title özelliği herbir post için unique bir değer olmalıdır. Eğer aynı başlıkta postlar yazma ihtimaliniz var ise yine front-matter kısmına bir çeşit unique identifier ekleyip aynı mantık ile devam edebilirsiniz.

Aynı işi yapan, yani bir kategori içerisinde önceki ve sonraki postları veren, bir plugin ile karşılaştım. Denemedim ama büyük ihtimalle çok daha verimli çalışıyordur, yukarıdaki koddan. Link aşağıda.

İlgili bağlantılar:

You are reading the 10th of 19 episodes in Jekyll.
Published on 18.05.2018 by Mert Bakır with commit 7858b9b.
jekyll
#jekyll #liquid #pagination #web-dev
Next episode:
Etiketlere Göre İlgili Yazılar
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 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 21.08.2020

Hugo için rss-feed-in-hugo yazısını paylaştıktan sonra fark ettim ki jekyll için yazmamışım. İki yol göstereceğim, birincisi eklenti ile ikincisi liquid kodu ile. […] Eklenti ile yapmak oldukça kolay. Gemfile’ınıza gem 'jekyll-feed' satırını ekleyin ve _config.yml dosyasına ise …

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 …