hexo 테마 중 하나인 icarus 테마를 설치하고 커스텀하는 방법을 알아본다.
블로그를 만들고, hexo 테마 중 icarus 테마를 적용하면서 장단점을 각각 느끼게 되었는데, 설치 방법과 커스텀 방법에 대해 알아보도록 하겠다.
hexo 테마 고르기
https://hexo.io/themes/
로 들어가면 hexo 블로그 테마가 다양하게 들어가 있는 것을 볼 수 있다.
그 중 icarus 테마를 결정했는데 결정 기준은
- 디자인이 이뻐야한다.
- javascript, react 등의 코드를 많이 올릴것이므로 코드를 보여줄 수 있는 공간이 있고, 보기 편해야한다. (코드 복사도 된다면 굿)
- 이미지 클릭 시 크게 보이는 silder가 있었으면 좋을거 같다.
였고, 이 세가지 기준을 icarus 테마가 만족시켰기에 결정하게 되었다.
icarus icarus 테마 설치
git bash에서 hexo 블로그가 설치된 경로로 들어가서, icarus 테마를 설치한다.
icarus 테마 github 주소 : https://github.com/ppoffice/hexo-theme-icarus
1
2
| cd blog
git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
|
이렇게하면 themes 폴더 안에 icarus 테마 폴더가 다운로드 된다.
테마 설정
루트폴더의 _config.yml으로 들어가서 테마 설정을 바꾼다.
1
2
3
4
| # Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: icarus //테마를 icarus로 설정
|
icaurs 테마 불편한 점 개선하기
icarus 테마를 다운받으면서 느낀 불편한 점은 다음과 같다.
글 쓰는 공간이 작아 자꾸 가로 스크롤이 생긴다.
무슨 말인고 하니 다음을 들어가보면 알겠지만, 좌우 공간에 무언가 너무 많아? 코드가 조금만 길어지면 금방 스크롤이 생긴다는 것이다.
https://blog.zhangruipeng.me/hexo-theme-icarus/uncategorized/getting-started-with-icarus/
이 문제는 다음과 같이 2가지 절차를 거쳐 개선하게 되었다.
1. md파일 상단에 포스팅 설정 넣기
파일 상단에 정보넣기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| ---
title: 글제목
date: 2019-10-20
tags:
categories:
- 카테고리명
/* 옵션 넣기 */
toc: true
widgets:
- type: toc
position: right
- type: category
position: right
- type: tagcloud
position: right
sidebar:
right:
sticky: true
---
|
이렇게 md 파일 상단에 정보를 넣게되면 왼쪽에 있는 내용들이 날라가게되면서 포스팅 부분이 넓어지게 된다.
하다보니 저 설정 넣은 후에도 불만이 하나 있었는데,좌우 여백이 더 좁아서 포스팅하는 하얀색 블럭?의 크기가 더 커도 될거 같다는 거였다.
어찌할까 하다가 다음과 같은 3가지 절차로 해결했다.
1) layout.ejs 개선
themes/icarus/layout/layout.ejs 경로로 들어가서 ejs 파일을 약간 수정해주었다.
layout.ejs는 말 대로 글쓰는 부분의 layout인데
저 is-8-tablet is-8-desktop is-8-widescreen이 마치 부트스트랩의 col같은 느낌이 들어 저기 숫자를 증가시켜 줌으로써 layout의 크기를 넓혔다.
layout.ejs1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <!DOCTYPE html>
<html <%- has_config('language') ? ' lang="' + get_config('language').substring(0, 2) + '"' : '' %>>
<head>
<%- partial('common/head') %>
</head>
<body class="is-<%= column_count() %>-column">
<%- partial('common/navbar', { page }) %>
<% function main_column_class() {
switch (column_count()) {
case 1:
return 'is-12';
case 2:
//기존 코드 : return 'is-8-tablet is-8-desktop is-8-widescreen';
return 'is-12-tablet is-8-desktop is-9-widescreen';
case 3:
return 'is-8-tablet is-8-desktop is-6-widescreen'
}
return '';
} %>
<section class="section">
<div class="container">
<div class="columns">
<div class="column <%= main_column_class() %> has-order-2 column-main"><%- body %></div>
<%- partial('common/widget', { position: 'left' }) %>
<%- partial('common/widget', { position: 'right' }) %>
</div>
</div>
</section>
<%- partial('common/footer') %>
<%- partial('common/scripts') %>
<% if (has_config('search.type')) { %>
<%- partial('search/' + get_config('search.type')) %>
<% } %>
</body>
</html>
|
themes/icarus/layout/common/widget.ejs 경로로 들어가서 ejs 파일을 약간 수정해주었다.
widget.ejs는 오른쪽에 붙어있는 위젯의 크기를 조절해주는 부분인것 같아 마찬가지로 수정해주었다.
widjet.ejs1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <% if (get_widgets(position).length) { %>
<% function side_column_class() {
switch (column_count()) {
case 2:
return 'is-4-tablet is-4-desktop is-3-widescreen';
case 3:
return 'is-4-tablet is-4-desktop is-3-widescreen';
}
return '';
} %>
<% function visibility_class() {
if (column_count() === 3 && position === 'right') {
return 'is-hidden-touch is-hidden-desktop-only';
}
return '';
} %>
<% function order_class() {
return position === 'left' ? 'has-order-1' : 'has-order-3';
} %>
<% function sticky_class(position) {
return get_config('sidebar.' + position + '.sticky', false) ? 'is-sticky' : '';
} %>
<div
class="column <%= side_column_class() %> <%= visibility_class() %> <%= order_class() %> column-<%= position %> <%= sticky_class(position) %>">
<% get_widgets(position).forEach(widget => {%>
<%- partial('widget/' + widget.type, { widget, post: page }) %>
<% }) %>
<% if (position === 'left') { %>
<div class="column-right-shadow is-hidden-widescreen <%= sticky_class('right') %>">
<% get_widgets('right').forEach(widget => {%>
<%- partial('widget/' + widget.type, { widget, post: page }) %>
<% }) %>
</div>
<% } %>
</div>
<% } %>
|
3) style.styl 수정
style.styl 폴더에서 screen-widescreen부분과 screen-fullhd 부분의 max-width 값을 지정해줘서 전체 크기를 늘려주었다. 저 /* custom */부분이 내가 새로 넣은 값이다.
style.styl1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| family-sans = "Ubuntu", "Roboto", "Open Sans", "Microsoft YaHei", sans-serif
family-mono = "Source Code Pro", monospace, "Microsoft YaHei"
gap = 64px
screen-tablet = 769px
screen-desktop = 1088px
screen-widescreen = 1280px
screen-fullhd = 1472px
html
font-size: 14px
body
background-color: #f7f7f7
body, button, input, select, textarea
font-family: family-sans
@media screen and (min-width: screen-widescreen)
.is-1-column .container
.is-2-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
/*custom*/
max-width:1100px;
width:100%;
@media screen and (min-width: screen-fullhd)
.is-2-column .container
max-width: screen-widescreen - 2 * gap
width: screen-widescreen - 2 * gap
/*custom*/
max-width:1250px;
width:100%;
.is-1-column .container
max-width: screen-desktop - 2 * gap
width: screen-desktop - 2 * gap
max-width:1250px;
width:100%;
(...중략...)
|
결과
