기타GitHub Pages

Github pages Hexo 테마 적용하기(hueman)

Github Pages, Hexo

테마(Theme) 적용하기

https://hexo.io/themes/ 에 접속해서 Hexo에서 사용할 수 있는 여러가지 Theme를 확인하고 선택할 수 있다.
여기서는 hueman을 예로 든다.

  1. blog의 root 폴더에서 themes/hueman 폴더로 이동한다.
  2. 아래 명령을 통해 다운받는다.
1
$ git clone https://github.com/ppoffice/hexo-theme-hueman.git themes/hueman
  1. _config.yml 파일에 theme 필드를 수정한다.
1
theme: hueman
  1. theme폴더에 있는 _config.yml.example를 _config.yml로 이름을 수정한다.
  2. Serch 기능을 위해 아래 모듈을 설치한다.
1
$ npm install -S hexo-generator-json-content

테마 설정

themes/hueman 폴더에 있는 _config.yml에서 아래의 테마 설정을 바꿀 수 있다.

  • Theme
    • Menu
    • Customize(Logo, Thema Color, Highlight, Sidebar, Thumbnail, Favicon, Social Links)
  • Widgets : Recent Posts, Category, Archive, Tag, Tag Cloud, Links
  • Search
  • Comment : Disqus
  • Share
  • Plugins
  • Miscellaneous

About의 페이지는 현재 없는 페이지로 나온다.
자신에게 맞는 프로필등의 사이트를 만든 후 링크를 걸어주면된다.
참고로 Post로 hexo generate 명령어를 통해 html을 생성하고 그것을 링크해도 된다.

customize

블로그의 로그를 링크한다. 이미지는 themes\hueman\source\css\images에 저장한다.

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

theme_color

오른쪽 사이드바의 Follow영역의 색을 바꾸게 해준다.
아래 사이트를 이용하면 쉽게 원하는 색상을 찾을 수 있다.
https://html-color-codes.info/

  • 링크 색 바꾸기
    themes/hueman/source/css/_partial 폴더의 article.styl 파일을 수정하면 된다.
1
2
3
4
5
.article-entry
    //...
    a //링크 
        color: "원하는색상" 
    //...

highlight

코드 블락에서 문법에 따라 색을 바꿔 보여주는 것을 뜻함
변경을 원하면 themes\hueman\source\css\_highlight 폴더에 있는 것중 하나를 골라 쓰면 된다.

1
highlight: androidstudio

사이드바의 위치를 조정

1
sidebar: left # sidebar position, options: left, right

thumbnail

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

  • 썸네일 ON

    썸네일 ON

  • 썸네일 OFF

    썸네일 OFF

1
thumbnail: true # enable posts thumbnail, options: true, false

이 썸네일은 포스트 앞에 자동으로 삽입되는 front-matter 부분에 경로를 추가하면 된다.
경로 지정이 없다면 포스트에 있는 가장 처음 그림을 사용한다. 그림이 없는 포스트라면 기본 화면이 출력된다.

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

favicon

파비콘은 URL앞에 붙는 작은 아이콘을 뜻함
png 파일을 추천

1
favicon: favicon.png

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

1
2
3
4
5
social_links: # for more icons, please see http://fontawesome.io/icons/#brand
    #twitter: /
    #facebook: /
    #google-plus: /
    github: https://github.com/Jung-Max

widgets

사이드바에 추가되는 여러가지 위젯을 제공.
사용하지 않는 것은 지우면된다.

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

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

1
2
3
4
# Miscellaneous
miscellaneous:
    links:
        Hexo: http://hexo.io

블로그의 내의 검색 기능.
기본적으로 제공하는 Insight Search를 사용.
기본적으로 hexo-generator-json-content를 설치해야 한다.(위에서 설명함.)

1
$ npm install -S hexo-generator-json-content
공유하기