[blog] Hexo icarus 테마 적용하기

테마

블로그에서 테마라고 하면 작게는 글자 폰트,크기,색부터 시작하여 헤더와 푸터 그리고 좌우 사이드 메뉴의 구성과 크기까지라고 여러가지 요소가 있다.
테마가 중요한이유는 사용자에게 제일 먼저 다가오는 이미지를 좌우하기 때문에다. 심플하다, 화려하다, 실용적이다… 목적에 따라 그리고 작성자의 취향에따라 선택할수 있는 폭도 넓다.

hexo theme

hexo 공식 홈페이지에 등록된 테마는 2020-02월 기준으로 약 300개가량 되고 이를 적용하면 아주 간단하게 테마를 적용 할 수 있다

먼저 아래 홈페이지에서 마음에 드는 테마를 하나 선택하도록하자.
개발자를 위한 테마도 있지만, 사진이나 동영상블로그를 하는분들을 위한 테마도 다양하게 준비되어있다.
이번 글에서는 이 블로그에 적용되어있는 icarus라는 테마를 기준으로 설명한다.

https://hexo.io/themes/

icarus theme

일반적으로 테마는 오픈소스로 git으로 관리하는 경우가 많다. icarus 테마의 경우도 마찬가지이다. git repository에 들어가보면 해당 테마의 적용방법이 소개되어있고, 설정을 할 수 있도록 공식 문서가 준비되어있는 경우가 일반적이다. issue탭에서는 궁금한점이나 공식문서에 나와있지 않은것들도 질문할 수 있다.

https://github.com/ppoffice/hexo-theme-icarus

A simple, delicate, and modern theme for the static site generator Hexo.

적용방법

파일 다운로드

적용방법은 모든 hexo theme가 동일하다. hexo init 에서 생성된 폴더중 theme에 해당 테마의 코드를 clone 받는다.

git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

이후 theme 폴더 내부에는 icarus라는 폴더가 생성되어있는것을 볼 수 있다.

테마 변경 설정

이전 블로그 만들기 포스팅에서 진행된 상황에서는 기본으로landscape라는 테마가 설정되어있다. 새로 받은 icarus테마로 변경해보자.
이 또한 매우 간단하다.

1. 먼저 git page home 디랙토리에 있는 _config.yml 파일을 연다.
2. 그리고 theme : landscape 라고 설정되어있는 분을 찾아 icarus로 변경한다

_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: icarus

실행해보기 & 라이브러리 오류수정

hexo server 명령어를 통해 잘 변경되었는지 확인해보자.

icarus 라는 로고가 올라오는것을 보니 설정은 잘 되었다는것을 알 수 있다.
테마들은 각자 구성에 필요한 라이브러리의 종류가 다르다. 의존성을 가지는 라이브러리가 설치가 되어있지않은 경우 오류가 날 수 있고. 필자의경우 cheerio 라는 라이브러리가 필요했다.

git page home 디렉토리에 돌아가서 npm install cheerio 를 실행해주자.
이후 hexo server를 실행하면 themes/icarus/_config.yml파일을 생성한다는 메시지가 나오고,
한번더 실행하면 localhost:4000으로 성공적으로 실행된다.

테마 입맛대로 바꾸기

테마는 기본적인 구성일 분 블로그 운영자가 원하는대로 바꿀 수 있어야한다.
각 테마의 공식 문서를 확인 하면서 바꾸는것이 정석이라고 할 수 있다.

icarus테마에서는 themes/icarus/_config.yml 파일을 수정하여 원하는 대부분기능을 수행 할 수 있다.
widget만 어느정도 설정하면 겉으로보이는 테마설정은 거의 마무리되었다고 보아도 된다.

widget (sidebar)

icarus테마에서 왼쪽 오른쪽에 있는 박스영역을 widget이라고 부르며 설정에서 이 항목들을 제어할수 있다.
사용할 항목이라면 이름과 위치(왼쪽, 오른쪽)을 필수로 입력한다. 사용하고싶지 않다면 해당항목을 지우도록 하자. 위치 이 외에 세부적으로 설정할 수 있는것은 2가지이다.

profile

가장 먼저 자신을 알릴수 있는 프로필이다. 공식문서는 다음 url을 참고하도록 하자.
https://blog.zhangruipeng.me/hexo-theme-icarus/Widgets/profile-sidebar-widget/

link

링크항목같은경우 필자는 사용하고있지않다. 이또한 공식문서를 참고하도록하자.
https://blog.zhangruipeng.me/hexo-theme-icarus/Widgets/links-sidebar-widget/

추가사항

이외에 광고나 댓글같은경우는 별도의 포스트를 준비할 예정입니다.
겉으로 보이지 않는 web master도구나, google analytics또한 준비예정입니다
sidebar의 폭설정이나 로고변경같은 세부적인 내용은 넣지않았습니다. 궁금한경우 댓글로 남겨주시면 감사하겠습니다.