Hexo Theme Hueman

Hexo Theme Hueman

지금 Hexo Theme Hueman 설정을 어떻게 하는지 알아보도록 하겠습니다.
테마를 적용하시려면 아래의 링크를 들어가서 확인 부탁드리겠습니다. 제가 Hexo 시작할때 큰 도움을 받은 곳 입니다.
Hexo Hueman 테마 적용하기

hueman manu

메뉴는 마카이브, 카테고리, 커스텀 페이지로 직접 연결합니다. 메뉴는 간단하게 이름을 추가하거나 링크 주소를 메뉴에 추가합니다.

1
2
3
4
menu:
Home: /hexo-theme-hueman/
About: /hexo-theme-hueman/about/index.html
+ GitHub: https://github.com

상대주소와 절대주소를 모두 사용할 수 있습니다.

Hueman은 메뉴안 카테고리에 쉽게 추가할 수 있습니다. 그냥 카테고리를 추가하세요 그리면 메뉴와 서브 카테고리가 추가될 것 입니다.

1
2
3
4
menu:
Home: /hexo-theme-hueman/
+ Categories:
About: /hexo-theme-hueman/about/index.html

커스터마이즈

테마를 수정해서 커스터마이즈 할 수 있습니다.

Logo 로고

원하는 이미지를 가지고 로고를 바꿀 수 있습니다. 이미지 크기는 픽셀로 설정되있습니다. 그리고 url에 파일 경로를 입력해주세요.

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

‘width’와 ‘height’에 숫자만 입력해세요. 다른 설정을 입력해도 작동하지 않습니다.

Theme Color 테마 컬러

링크의 색과 소셜링크 색을 변경할 수 있습니다. RGB로 색을 바꿀 수 있습니다.

theme color

1
theme_color: '#d35'

Highlight 하이라이트

Highlight

60가지 넘는 하이라이트 설정을 할 수 있습니다. 코드 블럭안에 색 설정을 말합니다. ‘hueman/source/css/_highlight’ 폴더에 들어가면 가능한 옵션을 확인 할 수 있습니다.

1
2
- highlight: androidstudio
+ highlight: tomorrow

사이드바의 위치를 조정할 수 있습니다. 옵션은 ‘left’ & ‘right’ 2가지 입니다..

1
sidebar: left

Thumbnail 썸네일

포스트의 썸네일 표시를 사용하지 않을 수도 있습니다. 옵션은 ‘true’와 ‘false’ 입니다.

1
thumbnail: true
어떻게 썸네일 이미지를 넣을 수 있을까요?

Hueman은 자동으로 당신의 포스트의 첫번째 이미지를 썸네일로 사용할 것입니다. 아니면 포스트의 자동으로 추가되는 front-matter부분에서 이미지를 직접 지정할 수 있습니다.

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

Favicon 파비콘

파비콘을 사이트에 추가해 봅시다.

1
2
favicon: favicon.png
e.g: 만약 파비콘 이미지를 source/css/images에 넣었다면, Path 설정을 "css/image/favicon.png" 으로 설정합니다.

Social Links

소셜링크는 사이드 바 위쪽에서 확인 할 수 있습니다. 링크 이름과 링크 주소를 설정에 추가 할 수 있고 FontAwesome icon 에서 고를 수 있습니다.

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