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.

<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.

<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.

---
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 261e231.
jekyll
#jekyll #liquid #pagination #static-site
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 17.04.2022
edited on 02.05.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …

published on 19.02.2022

Önceki yazıda LaTeX kullanmanın avantajlarından ve zorluklarından bahsetmiştim, MS Word gibi WYSIWYG programlar ile karşılaştırıp tavsiyelerimi yazmıştım. Bu yazıda Pandoc yazılımı üzerine konuşacağız. Pandoc’un da yardımıyla LaTeX’in avantajlarını alıp zorluklarını biraz geri de …

published on 12.02.2022

LaTeX bir çeşit döküman hazırlama sistemidir, ancak çoğumuzun alıştığı arayüzlerin aksine bu döküman içerisinde kod yazar gibi bazı komutlar kullanırız. Daha sonra derleyici (compiler) bu dökümanı bizim tanımladığınız kurallara göre PDF’e dönüştürür. […] 1978 yılında, Donald Knuth TeX …

published on 02.01.2022

This post is for fellow students who is studying Operations Research with CPLEX. If you don’t know already, IBM offers free academic license for IBM ILOG CPLEX Optimization Studio. […] First, you have to register IBM Academic Initiative with your academic instituion issued email. (e.g. …