Cara Setup Post Category di Jekyll Website

Assalamu’alaikum.

Bagi kamu yang lagi nyoba-nyoba bikin blog menggunakan Jekyll dan ingin menambah fitur post by category maka artikel ini cocok untuk kamu karena aku akan bantu jelasin cara membuat post category dengan cara termudah menurutku.

Misahin artikelmu berdasarkan kategori sangat membantu pembaca untuk berselancar di blogmu. Ini dia langkah-langkah untuk menambah fitur category di blog Jekyll mu.

1. Buat file “categories.html” di folder _layouts/

---
layout: default
---

<div class="category">
  <h1 class="page-title">{{ page.title }}</h1>
  <div class="page-line"></div>
  <div id="archives">
    {% for category in site.categories %}
      <div class="archive-group">
        {% capture category_name %}{{ category | first }}{% endcapture %}
        <div id="#{{ category_name | slugize }}"></div>
        <p></p>
    
        <h3 class="category-head">{{ category_name }}</h3>
        <a name="{{ category_name | slugize }}"></a>
        {% for post in site.categories[category_name] %}
        <article class="archive-item">
          <h4><a href="{{ site.baseurl }}{{ post.url }}">{{post.title}}</a></h4>
        </article>
        {% endfor %}
      </div>
    {% endfor %}
    </div>
</div>

Isi kode di atas ke dalam file categories.html mu ya. Kode digunakan untuk tampilan halaman website.com/categories/ nantinya akan berisi list kategori dan setiap artikel yang kamu punya di dalam kategori tersebut.

2. Buat file “categories.md” di folder _pages/

---
layout: categories
title: Categories
permalink: /categories/
---

Isi kode di atas ke dalam file categories.md, kode tersebut adalah Front Matter yang nantinya akan diproses oleh Jekyll dan diperlakukan sebagai file spesial.

3. Tambahkan “categories: namakategori” di Front Matter setiap artikelmu

---
layout: post
title:  "Cara Setup Post Category di Jekyll Website"
author: "dhiyaulhaqza"
comments: false
categories: [Tech]
---

Tambahkan categories: [NamaKategori], kode ini digunakan Jekyll untuk memproses dan mengklasifikasikan artikelmu. Jika artikelmu berisi lebih dari 1 kategori maka kamu cukup memisahkan menggunakan koma saja seperti ini.

---
layout: post
title:  "Hello World"
author: "dhiyaulhaqza"
comments: false
categories: [Personal, Tech]
---

Ok sebenarnya sampai tahap ini kamu sudah mengkategorikan setiap artikelmu, dan juga nantinya halaman list kategori bisa diakses di website.com/categories/ .

4. Cara menampilkan nama kategori di artikelmu.

<div class="page-categories">
    <span>Post category </span>
    {% if post %}
    {% assign categories = post.categories %}
    {% else %}
    {% assign categories = page.categories %}
    {% endif %}
    {% for category in categories %}
    <a href="{{site.baseurl}}/categories/#{{category|slugize}}">{{category}}</a>
    {% unless forloop.last %},{% endunless %}
    {% endfor %}
</div>

Taruh kode ini di layout untuk artikelmu, dalam kasus ini layout blogku ada di post.html di dalam folder _layouts. Kamu bisa taruh di posisi mana pun sesuai design atau tema blogmu. Kode ini berguna untuk menampilkan nama kategori di artikelmu. Apabila artikelmu memiliki lebih dari 1 kategori, nantinya akan ada pemisah yaitu koma.

5. Cara menambahkan Category di navigasi website

Tambahkan kode ini di folder _includes pada file navigation.html

<li><a href="{{ '/categories' | prepend: site.baseurl }}">Category</a></li>

Kode di atas berguna untuk menambahkan navigasi Category di websitemu, apabila diklik nantinya akan langsung membuka website.com/categories/ yang isinya adalah list kategori dan artikel-artikelnya.

Ok, itu tadi adalah cara untuk menambahkan fitur pengkategorian artikel. Ngoding itu asik kalo kalian mau bereksperiment, hehe. Untuk contoh hasilnya bisa buka DEMO.

Nah, itu saja yang bisa aku bagiin di artikel ini tentang cara setup post category di website Jekyll. Terima kasih ya, semoga bermanfaat.

Wasalamu’alaikum.

← → Top