Creating categories in Jekyll blog with permalink

Reference

https://devyurim.github.io/development%20environment/github%20blog/2018/08/12/blog-8.html

1. Change _includes/navbar.html

I wanted to make dropdown menu as image below and added some lines in navbar.html. You can change header.html or other files depending on your Jekyll themes.

dropdown

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about">About</a>
        </li>
        <li class="nav-item" id="site-category">
          <a class="nav-link" href="/posts">Posts</a>
          <ul>
            <li><a href="/posts/spring">Spring</a></li>
            <li><a href="/posts/jekyll">Jekyll</a></li>
        </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>

2. Add css code in

/assets/vendor/startbootstrap-clean-blog/scss/_navbar.scss

or in other files as necessary.

#site-category li a{
  display:block;
  font-weight:normal;
  line-height:50px;
  margin: 0px;
  padding:0px 25px;
  text-align:center;
  text-decoration:none;
  }

#site-category a:hover{
  background: rgb(71,71,71);
  color:#FFFFFF;
  text-decoration:none;
  }

#navbarResponsive li ul{
  background: rgb(109,109,109);
  display:none;
  height:auto;
  padding:0px;
  margin:0px;
  border:0px;
  position:absolute;
  width:200px;
  z-index:200;
  /*top:1em;
  /*left:0;*/
  }

#navbarResponsive li:hover ul{
  display:block;
  }

#navbarResponsive li li {
  display:block;
  float:none;
  margin:0px;
  padding:0px;
  width:200px;
  }

#navbarResponsive li:hover li a{
  background:none;
  }

  #navbarResponsive li ul a{
    display:block;
    height:50px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 20px;
    text-align:left;
    }

  #navbarResponsive li ul a:hover{
    background: rgb(71,71,71);
    border:0px;
    color:#ffffff;
    text-decoration:none;
    }

3. Create category folder under /root directory and md files

Created category folder under /root directory, for example, hskim2019.github.io/category

categoryfolder

Also, created markdown files containing layout, title and permalink as image below.

You can create more markdown files depending on categories you want to make. Below is an example.


---
layout: category
title: posts/jekyll
permalink: '/posts/jekyll'
---

/root/category/Jekyll.md

4. Create category.html in _layouts

This is for the layout of category pages.

category.html

---
layout: page
---

<ul class="posts-list">
  
  {% assign category = page.category | default: page.title %}
  {% for post in site.categories[category] %}
    <li>
      <h3>
        <a href="{{ site.baseurl }}{{ post.url }}">
          {{ post.title }}
        </a>
        <small>{{ post.date | date_to_string }}</small>
      </h3>
    </li>
  {% endfor %}
  
</ul>

/root/_layouts/category.html

5. Create or modify index.html in _includes.

Clean-blog Jekyll theme doesn´t have index.html so created index.html and added lines as below.

index.html

<header class="site-category">
  <ul>
    
    {% assign pages_list = site.pages %}
    {% for node in pages_list %}
      {% if node.title != null %}
        {% if node.layout == "category" %}
          <li><a class="category-link {% if page.url == node.url %} active{% endif %}"
          href="{{ site.baseurl }}{{ node.url }}">{{ node.title }}</a></li>
        {% endif %}
      {% endif %}
    {% endfor %}
    
</ul>
</header>

/_includes/index.html

6. Set category when you post.

Set category when you post. Below is the example.


---
layout: post
title: "How to setup categories in Jekyll"
subtitle: "Creating categories in Clean Blog Jekyll with permalink"
date: 2019-08-23
background: '/img/posts/01.jpg'
categories : posts/jekyll
sitemap :
changefreq : daily
priority : 1.0
---

← Previous Post Next Post →