블로그 테마 적용하기

이 사이트에 가면 여러가지 테마를 찾을 수 있다. 내가 현재 사용하는 테마는 Chic테마이다.
테마를 다운받고 테마를 설정하는 방법은 README.md에 자세하게 나와있다.

1
$ hexo server

위 코드를 실행하여 server를 돌리고 localhost에 접속해보면 테마가 적용되어 있는 것을 알 수 있다.

테마 설정 변경

favicon이나 프로필 사진, 테마에 보이는 링크, 블로그 이름 등을 _config.yml 파일을 수정하여 변경할 수 있다. /blog/themes/다운한 테마 이름/_config.yml 이 경로에 있는 config 파일을 수정하면 좀 더 나만의 블로그를 만들어 낼 수 있다.

글꼴 적용하기

개발자들이 주로 Hueman테마를 사용해서 그런지 Chic테마의 글꼴 적용 방법은 찾기가 힘들었다.
나름 다른 테마들에 글꼴 적용하는 방법들을 적용해보면서 글꼴을 적용할 수 있었다.
나는 나눔스퀘어라운드 폰트를 사용하기로 했다.

폰트 cdn주소를 head.ejs에 적용해준다.

head.ejs 파일 안에 <#% css list %> 밑에 아래 코드를 추가해 주었다.

1
2
3
4
<link rel="stylesheet" type="text/css" href="">
<%- css('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css') %>
<%- css('https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css') %>
<%- css('css/style') %>

폰트 스타일을 나눔스퀘어라운드로 변경해준다.

font.styl 파일에서 $font-family 코드를 아래의 코드로 수정해준다.

원래 코드를 지우는 것 보단 주석처리를 해주었다. 아래의 두 부분만 수정해 주었다.

1
2
3
4
5
6
7
8
9
10
11
12
@font-face
  font-family 'NanumSquareRound' //이부분
  src: url('../fonts/lanting/lanting.eot'); /* IE9 */
  src: url('../fonts/lanting/lanting.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/lanting/lanting.woff2') format('woff2'),
          url('../fonts/lanting/lanting.woff') format('woff'),
          url('../fonts/lanting/lanting.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  font-weight 300
  font-display swap

//이부분
// $font-family = 'Microsoft Jhenghei',Lantinghei SC, 'lanting', PingFang SC, Seguo UI, Microsoft Yahei, Arial
$font-family = 'NanumSquareRound', "Helvetica Neue", sans-serif

이렇게 변경 후 테마를 적용했을 때와 같이 hexo server을 실행해서 로컬에서 변경이 되었으면 반영해주면 끝이다!