Hexo 추천 테마, Hueman 적용하기

🗓 ⏱ 소요시간 5 분

Hexo를 시작한 후 여러가지 테마를 적용해봤지만 이만한 테마가 없더군요. Hueman 이라는 테마로 깔끔하고 기능도 굉장히 다양합니다. 위젯이나 애드센스 이런 건 나중에 다루도록 하고 일단 테마에서 제공하는 기능들부터 살펴보겠습니다.

설치하기

블로그 루트 폴더에서 명령어로 테마를 받습니다.

1
$ git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman

그리고 블로그의 _config.yml을 수정합니다.

1
theme: hueman

블로그의 _config.yml 말고 테마 폴더 안에 있는 _config.yml.example의 이름을 _config.yml로 수정합니다.

테마에서 제공하는 검색 기능 (Insight earch)를 이용하기 위해서는 hexo-generator-json-content를 설치해야 합니다. npm 을 이용해서 설치합니다.

1
$ npm install -S hexo-generator-json-content

커스터마이징

아까 이름을 변경했던 _config.yml 파일을 수정해서 각종 설정을 변경할 수 있습니다.

메뉴

메뉴

필요한 것은 추가/ 수정할 수 있습니다. 하지만 포스팅할 때 front-matter에 카테고리를 추가하면 여기에 등록하지 않아도 자동으로 추가됩니다. front-matter는 포스트 첫머리에 있는 제목, 생성일자 등이 들어가는 부분을 말합니다.

Example
1
2
3
4
menu:
Home: /hexo-theme-hueman/
About: /hexo-theme-hueman/about/index.html # 상대경로
GitHub: https://github.com # 절대 경로

About.me

기본적으로 About 메뉴가 있는데 /about/index.html 이 없기 때문에 About 을 눌러 접속 시 404 에러가 나게 됩니다. About 페이지는 보통 블로그 주인에 대한 자기소개 페이지죠. 저는 굳이 따로 페이지를 만들지 않고 About.me 라는 사이트를 이용해서 만들었습니다. About.me 는 온라인 상의 자기 프로필, 자기소개 페이지입니다. 가입해서 프로필 이미지와 관심사, 디자인 등을 설정하면 자동으로 프로필 페이지를 만들어줍니다. 생성된 프로필 URL 을 여기에 입력하면 됩니다.

로고

url을 해당 경로로 바꿔주면 됩니다. public 밑에 있는 img 폴더는 root폴더명/img라는 이름으로 접근 가능하고, 웹 상 이미지의 url도 가능합니다.

1
2
3
4
logo:
width: 165
height: 60
url: images/logo-header.png

테마 색깔

테마 색깔

테마 색깔이라고 해봐야 작은 부분이지만… 변경 가능합니다.

1
theme_color: '#d35'

하이라이트

하이라이트

하이라이트는 코드 블락에서 문법에 따라 내용의 색을 바꿔 보여주는 것을 말합니다 (Code Highlight). 그냥 기본적인 것으로 쓰셔도 좋고, 변경을 원하시면 hueman/source/css/_highlight 폴더에 있는 것들 중 골라서 사용하셔도 됩니다.

1
highlight: androidstudio

사이드바

사이드바의 위치를 조정할 수 있습니다.

1
sidebar: left # options: left, right

썸네일

포스트의 썸네일을 표시를 끄고 켤 수 있습니다.

1
thumbnail: true

이 썸네일은 포스트 앞에 자동으로 삽입되는 front-matter 부분에 경로를 추가하면 됩니다.

1
2
3
title: Hello World
date: 2013/7/13 20:46:25
thumbnail: https://example.com/image.jpg

파비콘 (Favicon)

파비콘은 URL앞에 붙는 작은 아이콘을 말합니다. ico는 잘 안되는 것 같고 png 파일로 했더니 잘 됩니다. 파비콘 파일의 경로를 지정해줍니다.

1
favicon: favicon.png

파비콘이 안 바뀌는 경우

파비콘을 제대로 설정해도 변경이 안되는 것처럼 보일 수 있습니다. 그럴 때는 다른 브라우저를 이용해서 확인해보시거나 크롬 브라우저의 파비콘 파일을 삭제한 후에 확인할 수 있습니다. 이럴 경우 다른 파비콘도 모두 삭제됩니다. 운영체제별 파비콘 파일 위치는 다음과 같습니다. 해당 폴더 안에 보시면 파비콘 파일이 있습니다.

Windows 7 or Vista
1
C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default
Mac OS X
1
~/Library/Application Support/Google/Chrome/Default
Linux
1
~/.config/google-chrome/Default

소셜 링크

소셜 링크

내가 사용하는 여러가지 SNS 주소를 표시할 수 있습니다. 아이콘은 FontAwesome에서 골라서 이름을 적고 링크될 url을 적으면 됩니다.

1
2
3
social_links:
github: https://github.com/ppoffice/hexo-theme-hueman
youtube: https://youtube.com

위젯

1
2
3
4
5
6
7
widgets:
- recent_posts # 최근 포스트
- category # 카테고리
- archive # 어카이브
- tag # 태그
- tagcloud # 태그클라우드. 사용된 태그들을 빈도수에 따라 구름처럼 표시
- links # 링크

사이드바에 추가되는 여러가지 위젯을 제공합니다. 사용하지 않는 것은 지워주면 되고 사용하려면 추가하면 됩니다. 이름만 보면 무슨 기능인지 아실 겁니다.

링크

그 중에 링크는 _config.yml 하단에서 다음과 같이 추가 가능합니다.

1
2
3
4
5
# Miscellaneous
miscellaneous:
links:
Hexo: http://hexo.io
Naver blog: http://blog.naver.com/future_creator

검색

Insight Search

블로그의 내의 검색 기능입니다. 몇가지 종류가 있는데 기본적으로 제공하는 Insight Search를 사용하시면 됩니다. 전에 살펴본 것처럼 기본적으로 hexo-generator-json-content를 설치해야 합니다.

1
2
3
4
5
# Search
search:
insight: true
swiftype:
baidu: false

댓글

Disqus

댓글은 기본적으로 Disqus를 제공합니다. 몇가지 더 제공하는데 중국 서비스라서 일단 Disqus를 사용하겠습니다. 디스커스에 먼저 가입하고 다음과 같이 아이디를 확인하고 _config.yml에 입력합니다.

Site Identify

1
2
3
4
5
# Comment
comment:
disqus: futurecreator # disqus shortname 을 찾아 입력합니다.
duoshuo:
youyan:

공유

해당 포스트를 공유하기 위한 기능도 제공합니다. 몇가지 옵션이 있습니다. 이미지를 보시고 원하시는 스타일을 사용하시면 됩니다.

  • default
  • addtoany
  • jiathis (중국)
  • bdshare (중국)
1
2
# Share
share: addtoany # options: jiathis, bdshare, addtoany, default

default

addtoany

플러그인

이외에도 Open Graph, ScrollLoading, Fancybox 등의 플러그인을 제공합니다.

1
google_analytics: UA-66666666-6

ScrollLoading

한번에 모든 페이지를 로딩하는 게 아니고 스크롤에 따라서 로딩하는 플러그인입니다.

Fancybox

맥 스타일로 이미지를 보여주는 플러그인이라고 하네요.

블로그 검색 관련 기능

Open Graph와 Google Analytics와 연동 등을 제공합니다. 이 부분은 얘기가 또 길어지니까 다음번 포스트 때 자세히 다뤄보죠.

Open Graph

페이스북의 앱 아이디나 admin 번호, 트위터와 구글플러스 아이디를 입력할 수 있습니다.

1
2
3
4
5
open_graph:
fb_app_id:
fb_admins:
twitter_id:
google_plus:

Google Analytics

Google Analytics 아이디를 적으면 됩니다.

tracking id

이런 기능들을 그냥 옵션으로 바로 적용할 수 있으니 정말 편합니다. 쓸수록 마음에 드는 테마입니다. 다음번에는 Hexo에 있는 플러그인들 중 쓸만한 걸 살펴보겠습니다.