깃허브 블로그 템플릿 선정!
하려고 보니까 마음에 드는 템플릿이 없네..?!
이전 게시글에 정리했던 블로그 템플릿을 선정하는 조건에 따라 열심히 뒤적뒤적 해본 결과,
아쉽게도 제가 원하는 템플릿이 없었습니다.😹
아무래도 제가 주로 진행하는 프로젝트들의 게시글을 작성하려고 보면, 글보다는 사진이 많기 때문에
블로그 홈에 프로젝트를 대표 사진들이 그리드 형태로 나열되어 있길 바랬는데, 마음에 드는 디자인 중에는 없더라구요!
다만, 마음에드는 템플릿인데 조금 수정하면 되어보이는 녀석이 있어 한번 뜯어 고쳐 보겠습니다.
(진짜 내가 이거 하고싶어서 깃허브 블로그 시작함.. 헷)
우선 제가 고른 템플릿은 Jekyll의 Chirpy테마 입니다.
Jekyll의 Chirpy 테마 템플릿, 블로그 데모버전 미리보기
무료 템플릿 이면서도 수정 및 커스텀 가능하고, 여러 기본 기능들을 제공해 준다고 합니다.
예를 들면 ‘라이트/다크모드 설정’, ‘댓글기능’ 등등.
특히 프로젝트의 ‘_layouts’폴더에 Chirpy테마의 .html파일들이 있기 때문에,
html태그를 조금 만져보신 분들이라면 손쉽게 커스텀 가능하다는 점이 있습니다!
Jekyll의 Chirpy 테마 GitHub : https://github.com/cotes2020/jekyll-theme-chirpy
Jekyll의 Chirpy테마 블로그 만들기 설명 관련글 :
동일한 Chirpy 테마를 활용해 깃허브 블로그 만드는 법에 대해 작성되어 있는 블로그 입니다.
보다 설명글을 잘 작성할 자신이 없기 때문에, 만드는 법은 위의 게시글을 참고해 주세요!
[왼쪽] text-focused(텍스트 중심)원래 디자인, [오른쪽] image-focused(이미지 중심) 바꾼 디자인
다만, 저는 기존 ‘text-focused(텍스트 중심)’ 이었던 블로그의 형태를 ‘image-focused(이미지 중심)’로
디자인을 커스텀 해 보았는데요, 그에 대한 이야기를 해보려고 합니다.
블로그 템플릿 뜯어 고칠곳 찾기.
뜯어 고치긴 할건데… 어디를 뜯어 고치면 되는걸까나?
우선 디자인을 커스텀을 하기 위해서는, 커스텀을 할 페이지의 html파일이 어디 있는지 알아야 합니다.
조금 더 고급진 방법이 있을지 모르겠지만, 일단 제가 한 방식을 소개해 드리겠습니다.
chrome브라우저의 ‘개발자 도구’. 현재 보고 있는 페이지의 html, css, js등등 에 대한 정보가 나온다.
요즘 제일 많이 쓰는 chrome브라우저에는 ‘개발자 도구’라는 것을 지원해 줍니다.
[개발자 도구 단축키]
Mac : Command + Shift + c
윈도우 : Window + Shift + c
단축키를 누르면 위에서 보다시피 html코드가 나오는데요, 그중 내가 바꾸고 싶은 부분을 지정해보며
html 코드가 가장 복잡해 보이는(특징이 있어 보이는) 부분을 선택합니다.
1
<div class="post-meta text-muted d-flex">
제가 찾은 가장 복잡해 보이는(특징이 있어 보이는) 문구는 위와 같고,
이를 프로젝트 폴더 내의 모든 html 파일을 대상으로 검색을 해줍니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
---
layout: page
# The Home page layout
---
...생략
<div id="post-list">
<div class="post-preview">
...생략
<div class="post-meta text-muted d-flex">
<div class="mr-auto">
...생략
</div>
</div> <!-- .post-meta -->
</div> <!-- .post-review -->
</div> <!-- #post-list -->
검색을 하다보니, 프로젝트명/_layout/home.html 파일에 해당 문구가 있고,
이제 이 파일을 잘 수정하면 우리가 원하는 디자인으로 바꾸어 낼 수 있다는 것도 알게되었습니다.
그럼 프로젝트명/_layout/home.html 파일에서 어디 부부을 수정해야,
우리가 원하는 템플릿을 완성시킬 수 있을까요?
chrome브라우저의 ‘개발자 도구’를 사용하여, 내가 바꾸고 싶은 정확한 위치를 찾아낼 수 있다.
역시나, 개발자 도구를 사용해서 파일 내 어디를 뜯어 고칠지 정확한 위치를 찾아봅니다.
저는 블로그 템플릿의 홈 화면에서 게시물들이 보여지는 영역(division)만 바꾸고 싶기 때문에,
<div id="post-list">태그가 포함하고 있는 부분을 제 입맛에 맞게 바꾸어 보겠습니다!
image-focused(이미지 중심) 형태로 바꾸기
진짜 내가 이거 하고싶어서 깃허브 블로그 한다 후..
우선은 프로젝트 대표 이미지를 ‘반응형 그리드’ 형태로 나열될 수 있도록 해보겠습니다.
chrome브라우저의 ‘개발자 도구’ 에서 모바일 화면 보기(Toggle device toolbar)기능을 사용하여 테스트.
‘반응형 그리드’ 형태로 하는 이유는,
기기별로 지원하는 해상도에 따라 게시물들을 기분좋게(?) 딱 맞추어 보여지게 하기 위해서 입니다.
grid 반응형 layout 만들기 관련글 :
여러 고수분들의 블로그를 참고하여, 다음과 같이 html을 작성해 주었습니다!
1
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
---
layout: page
# The Home page layout
---
...생략
<div id="post-list">
<div class="post-preview">
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-gap: 25px;">
{% for post in posts %}
<div style="width: auto; height: 340px;">
<div style="height: 70%; position: relative; overflow: hidden;">
<img src="{{ post.image.path }}" alt="썸네일">
</div>
<div style="height: 3%;"></div>
<div style="height: 25%;">
<a href="{{ post.url | relative_url }}">{{ post.title }}</a><br>
{% include datetime.html date=post.date %}
{% if post.pin %}
<i class="fas fa-thumbtack fa-fw"></i>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div> <!-- #post-list -->
기존에 있던 템플릿 태그( {% 어쩌구 %} )의 값들을 최대한 활용하여,
블로그 홈에 보여지고자 하는 정보를 요약하여 볼 수 있도록 코드를 작성해 주었습니다.
여기서 템플릿 태그란, html에 동적인 구문을 삽입할 수 있도록 해주는 태그 입니다.
이제야 깃허브 블로그 다 만들었따!
긴글 읽어주셔서 감사합니다 😉