Blog Design

I wanted to change the category of my tech blog but I didn’t know how. I’ve looked up for modifying design on minimal mistakes through the keyword of ‘minimal mistakes 사이드바’. The bottom url is the site which I’ve followed.

Steps

1. /_data/navigation.yml

Modify the navigation.yml file. In my case, it looks like following. Top main is for upper bar. Ignore it.

# main links
main:
#   - title: "Quick-Start Guide"
#     url: https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/
#   - title: "About"
#     url: https://mmistakes.github.io/minimal-mistakes/about/
#   - title: "Sample Posts"
#     url: /year-archive/
#   - title: "Sample Collections"
#     url: /collection-archive/
#   - title: "Sitemap"
#     url: /sitemap/
sidebar-category:
  - title: "Category"
    children:
      - title: "Artificial Intelligence"
        url: "/AI"
      - title: "LeetCode"
        url:  "/LeetCode"
      - title: "App Development"
        url:  "/App"
      - title: "Other Projects"
        url:  "/Others"

2. Add categories for the _posts

Modify the post’s category. It took a long time and mucn errors on github because I have to modify all the files.

---
title:  "Blog Design"
categories:
  - Others
---

3. Add _pages directory

If there is no _pages directory, add one and make a file inside that directory named category-{name}. You need to modify every part of code which I’ve written ‘Others’ in the file.

---
title: "Others"
layout: archive
permalink: /Others
---


 



<div class="list__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/others/BlogDesign/" rel="permalink">Blog Design
</a>
      
    </h2>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          1 분 소요
        
      </span>
    
  </p>


    <p class="archive__item-excerpt" itemprop="description">
I wanted to change the category of my tech blog but I didn’t know how. I’ve looked up for modifying design on minimal mistakes through the keyword of ‘minim...</p>
  </article>
</div>
  



<div class="list__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/others/iOSRelease/" rel="permalink">iOS Release
</a>
      
    </h2>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          2 분 소요
        
      </span>
    
  </p>


    <p class="archive__item-excerpt" itemprop="description">

</p>
  </article>
</div>
  



<div class="list__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/others/raycaster3/" rel="permalink">C Raycaster Breakdown3
</a>
      
    </h2>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          6 분 소요
        
      </span>
    
  </p>


    <p class="archive__item-excerpt" itemprop="description">

</p>
  </article>
</div>
  



<div class="list__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/others/raycaster2/" rel="permalink">C Raycaster Breakdown2
</a>
      
    </h2>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          5 분 소요
        
      </span>
    
  </p>


    <p class="archive__item-excerpt" itemprop="description">

</p>
  </article>
</div>
  



<div class="list__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
    
    <h2 class="archive__item-title no_toc" itemprop="headline">
      
        <a href="/others/raycaster1/" rel="permalink">C Raycaster Breakdown1
</a>
      
    </h2>
    

  <p class="page__meta">
    

    

    
      
      

      <span class="page__meta-readtime">
        <i class="far fa-clock" aria-hidden="true"></i>
        
          1 분 소요
        
      </span>
    
  </p>


    <p class="archive__item-excerpt" itemprop="description">

</p>
  </article>
</div>
 

4. Modify _config.yml

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: # true
      share: true
      related: true
      sidebar:                  # Added
        nav: "sidebar-category" # Added

https://x2info.github.io/minimal-mistakes/카테고리_만들기/