Minimal Mistakes 테마 커스터마이징
Minimal Mistakes 테마 커스터마이징 방법
Warning
아래 내용은 블로그에 처음에 적용했던 Minimal Mistakes 테마를 커스터마이징 했던 내용들이다. 현재 테마와는 관련 없다.
1. 각종 블로그 스타일 수정¶
1-1. 스킨 수정¶
스킨을 수정하고 싶을 때는
1. /assets/css/main.scss에 입력해서 오버라이드 하거나
1. /_sass/minimal-mistakes/skins에서 각 스킨들을 직접 건드리면 된다.
나는 default 스킨만 조금 수정하고 다른 스킨들은 건드리기 싫어서 /_sass/minimal-mistakes/skins/_default.scss에 아래와 같은 내용을 추가해줬다.
// customize skin color
$background-color: #eeeeee !default;
$text-color: #2a2231 !default;
$muted-text-color: #403946 !default;
$primary-color: #3d3d3d !default;
$border-color: mix(#fff, #393e46, 75%) !default;
$footer-background-color: mix(#fff, $primary-color, 80%) !default;
$link-color: #39006e !default;
$masthead-link-color: $text-color !default;
$masthead-link-color-hover: $text-color !default;
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
.pagination--pager:hover {
background-color: $link-color !important; //override
// color: #fff;
}
// customize remote buttons color
.fa-h-square:before {
color: #a3a3a3;
}
.fa-caret-square-up:before {
color: #a3a3a3;
}
.fa-caret-square-down:before {
color: #a3a3a3;
}
1-2. 줄간격 조정¶
Minimal Mistakes는 기본 줄간격이 너무 좁아 가독성이 떨어진다. 줄간격을 조정하려면 /_sass/_page.scss를 수정해주면 된다.
나는 아래와 같이 .page__content의 p에 line-height를 추가해서 문단 스타일을 수정했다.
1-3. 좌우 여백 조정¶
Minimal Mistakes 테마의 좌우 여백은 /_sass/minimal-mistakes/_variables.scss에 정의된 $right-sidebar-width, Breakpoints 변수를 수정해서 조절할 수 있다.
$right-sidebar-width-narrow: 200px !default; // default 200px
$right-sidebar-width: 250px !default; // default 300px
$right-sidebar-width-wide: 250px !default; // default 400px
기본 좌우 여백이 거슬려서 Breakpoints도 아래와 같이 수정해봤는데, 막상 최소한으로 줄이니 답답한 느낌이 들어 기본값으로 되돌렸다.
/*
Breakpoints
========================================================================== */
$small: 768px !default; // default 600px
$medium: 900px !default; // default 768px
$medium-wide: 1024px !default; // default 900px
$large: 1280px !default; // default 1024px
$x-large: 1440px !default; // default 1280px
$max-width: $x-large !default;
1-4. 프로필 사진 칸 수정¶
/_sass/minimal-mistakes/_sidebar.scss의 .author__avatar 항목 수정
1-5. 링크 밑줄 설정¶
/_sass/minimal-mistakes/_base.scss의 /* links */ 수정
1-6. 업로드 날짜 보이기¶
Minimal Mistakes는 기본 설정으로 읽는 시간이 표시되어 있도록 구성되어 있는데, 영 쓸모가 없다. 읽는 시간 대신 업로드 날짜를 보이게 하려면, 아래와 같이 /_config.yml에서 read_time을 false로, show_date를 true로 수정해주면 된다.
defaults:
# _posts
- scope:
path: ""
type: posts
values:
read_time: false
show_date: true
# _pages
- scope:
path: ""
type: pages
values:
read_time: false
show_date: true
2. 단축 버튼 만들기¶
홈페이지, 맨 위로, 맨 아래로 보내는 단축 버튼 만드는 방법
/_sass/minimal-mistakes/_sidebar.scss에 아래 내용 추가
.sidebar__home {
position: fixed;
bottom: 0.5em;
right: 6.2em;
z-index: 10;
}
.sidebar__top {
position: fixed;
bottom: 0.5em;
right: 3.7em;
z-index: 10;
}
.sidebar__bottom {
position: fixed;
bottom: 0.5em;
right: 1.2em;
z-index: 10;
}
/layouts/default.html의 <body>에 아래 내용 추가
<html>
<body>
<aside class="sidebar__home">
<a href="/recent/">
<div style="font-size: 0.5rem;"><i class="fas fa-h-square fa-5x"></i></div>
</a>
</aside>
<aside class="sidebar__top">
<a href="#site-nav">
<div style="font-size: 0.5rem;"><i class="fas fa-caret-square-up fa-5x"></i></div>
</a>
</aside>
<aside class="sidebar__bottom">
<a href="#footer">
<div style="font-size: 0.5rem;"><i class="fas fa-caret-square-down fa-5x"></i></div>
</a>
</aside>
3. MathJax로 수학식 표시하기¶
GitHub Pages에 수학식을 출력하는 방법은 여러 가지가 있는데, 페이지 로딩이나 작성 편의성 등을 고려했을 때 아래 방식이 제일 좋은 것 같다.
/_includes/mathjax.html 생성 및 아래 내용 입력
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
/_layouts/default.html의 <head> 부분에 아래 내용 추가
수식을 사용할 포스트의 YFM을 아래와 같이 설정
글 작성 시 수식 입력 방법은 여기에서 확인할 수 있다.
4. favicon 설정¶
/assets/images/logo.ico 폴더에 favicon 파일들 저장 후 /_includes/head/custom.html에 아래 내용 추가
<link rel="apple-touch-icon" sizes="180x180" href="/assets/logo.ico/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/logo.ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/logo.ico/favicon-16x16.png">
<link rel="manifest" href="/assets/logo.ico/site.webmanifest">
<link rel="mask-icon" href="/assets/logo.ico/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
6. Posts by Month 작성¶
/_layouts/monthly.html 생성 후 아래 내용 입력
---
layout: archive
---
{{ content }}
<ul class="taxonomy__index">
{% assign postsInMonth = site.posts | group_by_exp: 'post', 'post.date | date: "%Y/%m"' %}
{% for month in postsInMonth %}
<li>
<a href="#{{ month.name }}">
<strong>{{ month.name }}</strong> <span class="taxonomy__count">{{ month.items | size }}</span>
</a>
</li>
{% endfor %}
</ul>
{% assign postsByMonth = site.posts | group_by_exp: 'post', 'post.date | date: "%Y/%m"' %}
{% for month in postsByMonth %}
<section id="{{ month.name }}" class="taxonomy__section">
<h2 class="archive__subtitle">{{ month.name }}</h2>
<div class="entries-{{ page.entries_layout | default: 'list' }}">
{% for post in month.items %}
{% include archive-single.html type=page.entries_layout %}
{% endfor %}
</div>
<a href="#page-title" class="back-to-top">{{ site.data.ui-text[site.locale].back_to_top | default: 'Back to Top' }} ↑</a>
</section>
{% endfor %}
/_pages/archive-monthly.md 생성 후 아래 내용 입력
---
title: "Posts by Month"
permalink: /month-archive/
layout: monthly
author_profile: true
---
/_data/navigation.yml의 main항목에 아래 내용 추가
7. Home 화면 설정¶
블로그의 첫 화면에 대한 설정은 root의 index.html에서 변경할 수 있다.
현재 설정은 아래와 같다.
---
layout: splash
author_profile: true
---
<br>
<p align="center">
<a href="/recent/"><img src="/assets/images/standing_on_the_shoulders_of_giants.png" alt="Visit the Homepage">
</p>
8. timezone 설정¶
/_config.yml에 timezone이 설정된 경우 /Gemfile에 아래 코드를 넣어줘야 local에서 Jekyll을 구동시킬 수 있다.
Minimal Mistakes의 Configuration 문서에 따르면 default는 os에 설정된 local timezone으로 설정되어 있기 때문에 어지간해서는 굳이 설정할 필요는 없다.