• Erwindo Sianipar
    Interaction designer
    Software Engineer
  • blog
    craft
    portfolio
    snippet
    guestbook
    update
    login
ES
Caritas in VeritateMade with love from Jakarta
© 2019-2025 Erwindo Sianipar. All Rights Reserved.
termspoliciescookiesanalytics

Membuat Paginasi Web Jekyll

Integrasi dependensi penomoran halaman pada web Jekyll

avatar
Posted by Erwindo SianiparFeb 9, 2020 (5 years ago) · 4 min read
id
EngineeringJekyll
https://images.unsplash.com/photo-1474546652694-a33dd8161d66
Photo by Austris Augusts on Unsplash

⚠️
Tulisan artikel ini mengacu pada saat halaman web ini masih menggunakan Jekyll.
Ini adalah cara sederhana untuk mengaktifkan penomoran pada halaman web berbasis Jekyll. Hal Ini telah saya terapkan terhadap halaman web ini. Caranya cukup mudah karna Jekyll telah menyediakan desain penomoran halaman yang dapat langsung digunakan.

Fundamental Proyek

Dengan aplikasi terminal, silahkan masuk ke dalam folder proyek Jekyll berada, berikut adalah perintah yang saya gunakan untuk masuk ke dalam folder proyek di lokal komputer saya .
Setelah masuk ke dalam folder tempat proyek halaman web Jekyll, selanjutnya buka dengan kode editor, di sini saya menggunakan Visual Studio Code.

Menambah fungsional dengan dependensi

Pada fail Gemfile tambahkan dependensi jekyll-paginate pada grup dependensi Jekyll.

Perbarui Dependensi Manajer

Selanjutnya lakukan pembaruan dependensi untuk mengunduh semua dependensi yang diperlukan khususnya untuk proyek Jekyll.
Bundel akan selesai diperbarui dan memunculkan pesan berhasil seperti di bawah.

Konfigurasi Proyek

Selanjutnya buat konfigurasi. Konfigurasi ini adalah inti pemasangan dari penomoran halaman dalam halaman web. Untuk menambahkan penomoran halaman pada halaman web, silahkan buka fail _config.yml dan tambahkan baris kode di bawah ini untuk konfigurasi awal.
Fungsi paginate adalah total item artikel yang akan ditampilkan dalam setiap halaman, sedangkan paginate_path adalah lokasi folder di mana Jekyll akan membuat halaman statis untuk dijadikan sebagai penomoran halaman.
Untuk pagination_path akan membaca fail index.html yang berada di dalam folder blog. Jika ada kesalahan dalam konfigurasi kemungkinan akan terjadi pesan kesalahan.
Selanjutnya tambahkan jekyll-paginate dalam daftar dependensi.

Menambahkan fungsional di halaman web

Dalam fail index.html pada folder blog tambahkan kode berikut untuk memunculkan tautan ke penomoran halaman.

Jalankan halaman web

Setelah konfigurasi sudah terpasang dan kode sudah dituliskan dengan baik dan benar, maka selanjutnya lihat perubahan dengan menjalankan halaman web.
Perintah di atas akan menjalankan halaman web, dan silahkan kunjungi halaman web dan lihat perubahannya, di mana halaman web akan memiliki penomoran.
More from Erwindo SianiparSee all

https://images.unsplash.com/photo-1457301353672-324d6d14f471

Artikel Pertamaku dalam blog ini

Menuangkan ide dari hasil belajar dan riset
Dec 25(5 years ago)
https://images.unsplash.com/photo-1474546652694-a33dd8161d66

Membuat Paginasi Web Jekyll

Integrasi dependensi penomoran halaman pada web Jekyll
Feb 09(5 years ago)
subtitle
Integrasi dependensi penomoran halaman pada web Jekyll
comments
title
Membuat Paginasi Web Jekyll
slug
membuat-paginasi-web-jekyll
published
Feb 9, 2020
tags
All
Engineering
Jekyll
image
https://images.unsplash.com/photo-1474546652694-a33dd8161d66
active
active
lang
id
type
blog
cd ~/Projects/jekyll/blog
code .
group :jekyll_plugins do gem 'jekyll-feed', '0.12' gem 'jekyll-seo-tag' gem 'jekyll-sitemap' gem 'jekyll-paginate' end
bundle update
Bundle updated
# count item on each pages paginate: 5 # route for each pages paginate_path: "/blog/page/:num/"
# build settings plugins: - jekyll-feed - jekyll-seo-tag - jekyll-sitemap - jekyll-paginate
<div class="pagination"> {% if paginator.previous_page %} <a href="{{ paginator.previous_page_path }}" class="previous"> « Prev </a> {% else %} <span class="previous"> « Prev </span> {% endif %} <span class="page_number"> {{ paginator.page }} of {{ paginator.total_pages }} </span> {% if paginator.next_page %} <a href="{{ paginator.next_page_path }}" class="next"> Next » </a> {% else %} <span class="next"> Next » </span> {% endif %} </div>
bundle exec jekyll serve