Membuat Pagination Di Jekyll

Membuat Paginator Di Jekyll

Hari ini tanggal 15 November 2024 aku sedang membuat fungsi paginasi untuk web ini, ya walaupun aku benar-benar tidak faham dengan kode nya, aku membuat dengan penuh kepercayaan diri dan ilmu copy paste yang selalu aku andalkan 😅, ya yang penting berjalan. so jadi yang suka copas code langsung comot aja disini.

Setting dulu `_config.yml` nya

Penting, jangan lupakan ini:

paginate: 5
paginate_path: "/page:num/"
plugins:
  - jekyll-paginate

jangan tanya saya fungsinya untuk apa🤣 aku belum begitu faham, tapi jika anda ingin tahu lebih dalam bisa kunjungi dokumentasi jekyll di sini Pagination | Jekyll • Simple, blog-aware, static sites

Code Untuk index.html

aku kurang tahu juga, katanya hanya berlaku dan berfungsi di index.html, dan aku juga sudah coba di beberapa halaman tidak berfungsi, tapi ketika di taruh di index.html ini berfungsi, dan ya anda bisa lihat di menu utama halaman ini. berikut ini kode yang bisa kalian gunakan:

<!-- Content Section -->
<div id="content">
    {% for post in paginator.posts %}
    <div>
        <h2><a href="{{ post.url | relative_url }}" aria-label="Read '{{ post.title }}'">
            {{ post.title }}
        </a></h2>
        <p><small>{{ post.date | date: "%d %B %Y" }}</small></p>
        <p>{{ post.excerpt | truncatewords: 30 }}</p>
        <a href="{{ post.url | relative_url }}">Read More</a>
    </div>
    <hr>
    {% endfor %}
</div>
<!-- Pagination Section -->
{% if paginator.total_pages > 1 %}
<nav>
    <ul>
        <!-- Previous Page Link -->
        <li {% if paginator.previous_page == null %}class="disabled"{% endif %}>
            {% if paginator.previous_page %}
            <a href="{{ paginator.previous_page_path | relative_url }}" aria-label="Previous">&laquo; Prev</a>
            {% else %}
            <span aria-hidden="true">&laquo; Prev</span>
            {% endif %}
        </li>
        <!-- Page Numbers -->
        {% for page in (1..paginator.total_pages) %}
        <li {% if page == paginator.page %}class="active"{% endif %}>
            {% if page == paginator.page %}
            <span>{{ page }}</span>
            {% elsif page == 1 %}
            <a href="{{ '/' | relative_url }}">{{ page }}</a>
            {% else %}
            <a href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
            {% endif %}
        </li>
        {% endfor %}
        <!-- Next Page Link -->
        <li {% if paginator.next_page == null %}class="disabled"{% endif %}>
            {% if paginator.next_page %}
            <a href="{{ paginator.next_page_path | relative_url }}" aria-label="Next">Next &raquo;</a>
            {% else %}
            <span aria-hidden="true">Next &raquo;</span>
            {% endif %}
        </li>
    </ul>
</nav>
{% endif %}

Atau yang sama persis dengan website ini

Jika ingin sama persis dengan halaman ini, berikut kodenya, tapi gunakan bootstrap agar sama:

<!-- Content Section -->
<div id="content">
    {% for post in paginator.posts %}
    <div class="article-preview mb-4">
        <h2><a href="{{ post.url | relative_url }}" class="article-link" aria-label="Read '{{ post.title }}'">
            {{ post.title }}
        </a></h2>
        <p class="text-muted"><small>{{ post.date | date: "%d %B %Y" }}</small></p>
        <p>{{ post.excerpt | truncatewords: 30 }}</p>
        <a href="{{ post.url | relative_url }}" class="btn btn-link p-0">Read More</a>
    </div>
    <hr class="my-4">
    {% endfor %}
</div>
<!-- Pagination Section -->
{% if paginator.total_pages > 1 %}
<nav class="pagination-nav mt-4">
    <ul class="pagination justify-content-center">
        <!-- Previous Page Link -->
        <li class="page-item {% if paginator.previous_page == null %}disabled{% endif %}">
            {% if paginator.previous_page %}
            <a class="page-link" href="{{ paginator.previous_page_path | relative_url }}" aria-label="Previous">&laquo; Prev</a>
            {% else %}
            <span class="page-link" aria-hidden="true">&laquo; Prev</span>
            {% endif %}
        </li>
        <!-- Page Numbers -->
        {% for page in (1..paginator.total_pages) %}
        <li class="page-item {% if page == paginator.page %}active{% endif %}">
            {% if page == paginator.page %}
            <span class="page-link">{{ page }}</span>
            {% elsif page == 1 %}
            <a class="page-link" href="{{ '/' | relative_url }}">{{ page }}</a>
            {% else %}
            <a class="page-link" href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
            {% endif %}
        </li>
        {% endfor %}
        <!-- Next Page Link -->
        <li class="page-item {% if paginator.next_page == null %}disabled{% endif %}">
            {% if paginator.next_page %}
            <a class="page-link" href="{{ paginator.next_page_path | relative_url }}" aria-label="Next">Next &raquo;</a>
            {% else %}
            <span class="page-link" aria-hidden="true">Next &raquo;</span>
            {% endif %}
        </li>
    </ul>
</nav>
{% endif %}

Siapa Saya? (Spoiler: Bukan Superhero) 🦸‍♂️

Hai, saya adalah seorang pembelajar web yang selalu merasa seperti seorang ilmuwan gila! Saya nggak bisa berhenti mencatat hal-hal keren dan random yang saya pelajari setiap hari. Website ini adalah tempat saya menulis catatan belajar yang sepertinya hanya saya yang paham, tapi tetap saja saya harap kalian bisa menemukan sesuatu yang bermanfaat di sini. Di setiap sudut situs ini, kalian akan menemukan berbagai macam eksperimen—dari coding yang terasa seperti sihir, sampai penemuan aneh yang muncul dari inspirasi saat tengah malam, yang mungkin hanya saya yang mengerti. Bisa dibilang, ini adalah dunia saya, tempat saya menggabungkan kreativitas, kegilaan, dan sedikit logika yang mungkin kadang hilang begitu saja 😆.

Apa Tujuan Website Ini? (Selain Menjadi Tempat Membuang Waktu) 🕒

Tujuan utama website ini adalah untuk merekam perjalanan belajar saya yang penuh warna—tapi dengan gaya yang sangat bebas! Saya suka kebebasan dalam segala hal, termasuk dalam mencatat dan belajar. Jadi, jangan kaget kalau tiba-tiba kalian menemukan sesuatu yang super terstruktur dan rapi, lalu selanjutnya malah menemukan catatan yang seolah-olah ditulis oleh seorang alien. Website ini adalah tempat saya melepaskan semua ide gila yang tiba-tiba muncul, meski terkadang bisa berubah drastis dari satu topik ke topik lainnya. Ini adalah eksperimen berkelanjutan tentang apa yang bisa saya pelajari, apa yang menarik minat saya, dan bagaimana saya bisa memecah rutinitas sehari-hari. Saya tidak ingin website ini hanya menjadi tempat belajar yang biasa, tapi juga tempat saya untuk berkreasi dan menemukan hal baru setiap hari! Jadi, jika kalian merasa kontennya nggak sesuai dengan yang kalian harapkan, yaa, itu mungkin karena saya baru saja mendapat ide baru yang lebih menyenangkan 🌟.

Kenapa Konten Bisa Berubah-ubah? (Karena Saya Mood-nya Cepat Berganti) 😜

Karena website ini adalah dunia milik saya, saya merasa bebas untuk mengubah-ubah isinya sesuai dengan apa yang sedang saya pelajari atau minati pada saat itu. Kadang saya bisa jadi sangat serius dan memikirkan konsep pengembangan web yang sangat mendalam—lalu tiba-tiba berubah jadi cerita tentang eksperimen aneh yang tidak ada hubungannya dengan coding. Jadi, jika kalian menemui halaman yang terasa super teknis di satu waktu dan kemudian menemukan halaman penuh dengan hal-hal random yang menggelikan pada waktu lain, itu karena saya, pembelajar yang mood-nya cepat berubah!. Website ini tidak mengikuti aturan baku atau standar lainnya—itu adalah catatan pribadi saya yang terus berkembang, dan jika saya merasa ingin mengubah desain atau menulis tentang hal-hal yang tidak terduga, ya saya akan melakukannya tanpa ragu! Mungkin nanti saya akan menulis tentang hal-hal seperti bagaimana memprogram robot untuk memasak mie instan, siapa yang tahu? Yang pasti, website ini adalah tempat yang penuh kejutan!