Membuat Paginasi Web Jekyll

Integrasi pemasangan dependensi penomoran halaman pada halaman web berbasis Jekyll

Posted by Erwindo SianiparFeb 9, 2020 (5 years ago) · 4 min read

id Engineering Jekyll

https://images.unsplash.com/photo-1474546652694-a33dd8161d66

subtitle

Integrasi pemasangan dependensi penomoran halaman pada halaman web berbasis Jekyll

comments

title

Membuat Paginasi Web Jekyll

slug

membuat-paginasi-web-jekyll

published

Feb 9, 2020

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.

Teknologi yang saya gunakan

Alat yang membantu mempermudah penulisan kode dan manajemen tugas

Jan 05(5 years ago)

https://images.unsplash.com/photo-1578335371893-da19ce4ba0cc

Belajar Merilis Aplikasi di Docker

Menjalankan aplikasi dengan kontainer Docker

Feb 13(5 years ago)