hexo로 만들어진 블로그들을 구경하다가 ‘Tranquilpeak’ 테마를 발견하고 따라서 적용해보았다. 그 과정에서 많은 시행착오를 겪었고 나같은 사람들이 더 이상 생기지 않길 바라는 마음에서 정리해보았다.

#Tranquilpeak 테마 설치하기

최신버전 다운로드

다른 테마들과 다르게 Tranquilpeak 테마는 github에서 바로 clone해서 적용하면 안된다.
아래 링크에 가서 최신버전의 .zip 파일을 다운받은 뒤 themes 폴더에 압축을 풀고 tranquilpeak으로 이름을 변경한다.
Download

설정파일 수정

hexo 환경설정 파일인 _config.yml에서 테마 관련내용을 수정한다.

1
theme: tranquilpeak

node-sass, hexo-renderer-sass 설치

hexo 루트폴더에 설치해준다.

1
2
3
npm install --save node-sass

npm install --save hexo-renderer-sass

테마를 처음 적용하면 home 페이지 좌측에 커다란 sidebar가 고정되어있다.
테마폴더의 _config.xml을 수정하면 sidebar의 크기를 줄이거나 버튼이 눌렀을 때만 sidebar가 나오도록 할 수 있다.
이 블로그는 현재 4로 설정되어 있다.

1
sidebar_behavior: 4

#프로필 사진과 설명 변경하기

테마폴더의 _config.xml에서 다음과 같이 수정하면 sidebar에 표시되는 프로필 사진이 변경된다.

1
2
author:
    picture: image.png

이때 hexo 루트폴더의 source 폴더아래 assets/images 폴더를 만들고 image.png 파일을 넣어주어야 한다.
사진 아래 표시되는 설명내용은
themes/tranquilpeak/languages 경로아래 en.yml 파일을 통해 수정해준다.

1
2
3
author:
    bio: "기억력을 믿지 못해 블로그를 시작했다."
    job: "student"

#front matter(머리말) 레이아웃 설정하기

scaffolds 폴더의 post.md에서 레이아웃을 설정해주면 새로운 post를 만들때마다 설정한대로 머리말이 생성된다.
기본은 다음과 같고 테마에 따라 다양한 옵션을 추가할 수 있다.

1
2
3
4
5
---
title: {{ title }}
date: {{ date }}
tags:
---

tags

글 내용과 관련된 tag

1
2
3
tags:
- 태그명1
- 태그명2

categories

글의 카테고리

1
2
3
categories:
- 카테고리명1
- 카테고리명2

keywords

search engine을 위한 키워드

1
2
3
keywords:
- 키워드1
- 키워드2

이 외에 다양한 옵션들은 여기서 확인가능

#썸네일 적용하기

front matter에 다음 내용을 추가한다.

1
2
thumbnailImage: image.png
thumbnailImagePosition: right

  • 썸네일의 위치는 right, left, bottom 중 하나를 선택한다.
  • 썸네일의 적용을 위해서는 _post 폴더아래 post의 파일명과 같은 폴더를 생성하고 그 안에 thumbnailImage를 넣어주어야 한다.
  • 예를들어, post1.md에 썸네일을 적용하고 싶은 경우 _post 폴더에 post1 폴더를 만들고 그 안에 image.png를 넣는다. 이때, post1.md는 post1이 아닌 _post 폴더에 있어야 함.
  • 마지막으로 루트폴더의 _config.yml에서 다음과 같이 수정해주어야 썸네일이 적용된다.
    1
    post_asset_folder: true

#Continue reading 버튼

포스트를 길게 작성하고 인덱스 페이지에 가보면 글의 내용이 전부 표시되어 글 목록을 한눈에 파악하기 어렵다.
<!-- more -->과 <!-- excerpt -->를 이용하면 포스트의 일부내용만 표시되도록 할 수 있다.

  • <!-- more -->
    1
    2
    3
    어쩌고 저쩌고1
    <!-- more -->
    어쩌고 저쩌고2

포스트 중간에 <!-- more -->을 넣어주면 인덱스 페이지에서는 어쩌고 저쩌고1의 내용만 표시된다.
포스트에서는 어쩌고 저쩌고1과 어쩌고 저쩌고2의 내용 모두 보여진다.

  • <!-- excerpt -->
    1
    2
    3
    어쩌고 저쩌고1
    <!-- excerpt -->
    어쩌고 저쩌고2

포스트 중간에 <!-- excerpt -->을 넣어주면 인덱스 페이지에서는 어쩌고 저쩌고1의 내용만 표시된다.
포스트에서는 어쩌고 저쩌고1의 내용은 표시되지 않고 어쩌고 저쩌고2의 내용만 보여진다.