minimal mistake 블로그를 원하는대로 꾸미는 방법.

category 기능 추가

1. navigation.yml 수정

/_data/navigation.yml

	- title: "Category"
	  url: /categories/

2. categories.md 생성

/_pages/categories.md

---
title: "Category"
permalink: /categories/
layout: categories
author_profile: true
---


아래와 같이 오른쪽 상단에 Category 메뉴가 생성되었고 클릭하면 게시글이 카테고리별로 분류된 페이지가 나타난다.

simple category

똑같은 방법으로 Tag 메뉴도 만들 수 있다.

article 영역 너비 조정

_variables.scss 파일에서 article 양 옆의 sidebar 너비를 줄이면 article 영역이 넓어진다.

자세한 방법

이미지 확대 기능 만들기

/assets/css/main.scss 파일에 다음 코드를 추가

// 2 확대 
.zoom-2:hover {
    transform: scale(2.0);
}
// 1.5 확대
.zoom-1-5:hover {
    transform: scale(1.5);
}

css 파일별 역할

_reset.scss

/_sass/minimal-mistakes/_reset.scss

  • font size

_variables.scss

/_sass/minimal-mistakes/_variables.scss

  • sidebar 너비
  • 파일 이름처럼 여러 가지 변수를 관리하고 있다.

_pages.scss

/_sass/minimal-mistakes/_pages.scss

  • 각 페이지별 배치

_sidebar.scss

/_sass/minimal-mistakes/_sidebar.scss

  • sidebar (left, right) margin 수정

references

  • https://eona1301.github.io/github_blog/GithubBlog-Category/
  • https://eona1301.github.io/github_blog/GithubBlog-Content-Width/

  • https://mmistakes.github.io/minimal-mistakes/docs/configuration/#archive-settings

Comments