Membuat Paginasi Web Jekyll
Integrasi dependensi penomoran halaman pada web Jekyll
Posted by Erwindo SianiparFeb 9, 2020 (7 years ago) · 7 min read
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 .
cd ~/Projects/jekyll/blog
Setelah masuk ke dalam folder tempat proyek halaman web Jekyll, selanjutnya buka dengan kode editor, di sini saya menggunakan Visual Studio Code.
code .
Menambah fungsional dengan dependensi
Pada fail
Gemfile tambahkan dependensi jekyll-paginate pada grup dependensi Jekyll.group :jekyll_plugins do gem 'jekyll-feed', '0.12' gem 'jekyll-seo-tag' gem 'jekyll-sitemap' gem 'jekyll-paginate' end
Perbarui Dependensi Manajer
Selanjutnya lakukan pembaruan dependensi untuk mengunduh semua dependensi yang diperlukan khususnya untuk proyek Jekyll.
bundle update
Bundel akan selesai diperbarui dan memunculkan pesan berhasil seperti di bawah.
Bundle updated
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.# count item on each pages paginate: 5 # route for each pages paginate_path: "/blog/page/:num/"
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.# build settings plugins: - jekyll-feed - jekyll-seo-tag - jekyll-sitemap - jekyll-paginate
Menambahkan fungsional di halaman web
Dalam fail
index.html pada folder blog tambahkan kode berikut untuk memunculkan tautan ke penomoran halaman.<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>
Jalankan halaman web
Setelah konfigurasi sudah terpasang dan kode sudah dituliskan dengan baik dan benar, maka selanjutnya lihat perubahan dengan menjalankan halaman web.
bundle exec jekyll serve
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
