Hexo 추천 테마, Hueman 적용하기

🗓 2016/06/14 ⏰ 소요시간 21 분

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

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도 가능합니다.

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

위젯

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

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

링크

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

# Miscellaneous
miscellaneous:
    links:
        Hexo: http://hexo.io
        Naver blog: http://blog.naver.com/future_creator

검색

Insight Search

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

# Search
search:
    insight: true
    swiftype:
    baidu: false

Disqus

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

Site Identify

# 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 번호, 트위터와 구글플러스 아이디를 입력할 수 있습니다.

open_graph:
    fb_app_id:
    fb_admins:
    twitter_id:
    google_plus:

Google Analytics

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

tracking id

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

Hexo