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

Previously, I’ve published a blog post about deploying static content on heroku with basic authentication. You can find the link here. In that post, we hosted the source code on GitLab and configured a CI/CD pipeline to render the static content a.k.a html files and push these files to Heroku. …

published on 28.05.2022

Each git commit has a field called Author which consists ‘user.name’ and ‘user.email’. We usually set these variables once, after installing git, with git config --global so that each repo gets the variables from the global definition. We can also set them locally for a …

published on 25.05.2022

In this post, I’ll first walk through hosting static content with basic authentication. Then, we’ll look into deploying to Heroku using GitLab Pipelines, more specifically deploying a certain sub-directory within the project instead of pushing the whole project. Also, I’ll share …

published on 17.04.2022
edited on 15.07.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 …