DevHexo

Hexo 테마

Blog, Git, GitHub, Hexo, Node.js

Hueman
hexo_example
블로그에 여러가지 테마들을 적용시켜 봤는데, 저는 Hueman 테마가 가장 무난하고 깔끔한거같아서 Hueman을 사용하고 있는데요.
이번 포스트에서는 Hueman을 기준으로 적용시키는법을 적어보겟습니다.

install

Go to your blog root folder, then use the following command to download the theme.

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

Open /blog_root_folder/_config.yml with your preferred text editor and change the following line.

1
2
3
4
old:
    theme:
new:
    theme: hueman

Go to /blog_root_foler/themes/ and rename _config.yml.example into _config.yml then open it.

If you want to use search function (Insight search)) provided by hueman theme, you have to install hexo-generator-json-content with npm.

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

customise

You can customise your blog theme with the blog_root_folder/themes/_config.yml.

menu_bar
You can add your own menu.
If you add categories in front-matter when you write a post, hexo will automatically add your category into menu on the bar. front-matter is located on top of the md file when you create a new post. It includes title, date, and etc.

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

about

You can add a page abour yourself in /about/index.html but there is no page available by default.If you try to access it with out creating one, you will face 404 page not found error.

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

You can modify url to your own logo image. Image url can be one from web, or you can save image into /root_folder/source/images/ then access them by /images/filename.png

theme colour

theme_color
You can modify the colour of your blog.

1
theme_color: '#d35'

highlight

highlight
Highlight setting allow you to adjust colours of your code block. You can use default but you can choose one from hueman/source/css/_highlight.

1
highlight: androidstudio

You can choose where your sidebar will located.

1
sidebar: left # options: left, right

thumbnail

If this option is true, your blog will have thumbnail for each post you make.

1
thumbnail: true

You can add customised thumbnail in front-matter part of your post. Otherwise hexo will add the first photo in the post automatically.

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

favicon

Favicon is a little icon located right next to your URL. image type can be .ico or .png

1
favicon: favicon.png

my favicon is not appearing

In most of the cases, if your favicon is not appearing after you made changes to your favicon, this occurs due to stored cache in your browser.
Solutions can be

  • Delete cache of your browser
  • Use different browser
  • Use incognito mode
    I prefer incognito mode in chrome to see changes.

social links
You can add/delete/modify sns links that you use. You can check the icon list in FontAwesome.

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

widgets

1
2
3
4
5
6
7
widgets:
    - recent_posts
    - category
    - archive
    - tag
    - tagcloud
    - links

You can delete them if you don’t want them on your side menu.

You can add your own custom links at bottom of the _config.yml

1
2
3
4
5
# Miscellaneous
miscellaneous:
    links:
        Hexo: http://hexo.io
        custom_Link: http://custom.blah.com

Insight Search
To use this function, you have to install hexo-generator-json-content prior to activate this.
Also I prefer using Insight search, not sure about other two since they look like chinese search engines.

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

comment

Disqus
This theme provide multiple comment services but I use Disqus because others are chinese services. Signup with disqus and get shorname from them, then copt and paste to _config.yml
Site Identity

1
2
3
4
5
# Comment
comment:
    disqus: futurecreator # copy and paste disqus shortname
    duoshuo:
    youyan:

share

Hueman also provide share option to share the post on sns.

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

Default
addtoany

plugins

They also provide plugin options such as Open Graph, Google analytics and etc.

google_analytics

1
google_analytics: UA-66666666-6

tracking id

open_graph

1
2
3
4
5
open_graph:
    fb_app_id:
    fb_admins:
    twitter_id:
    google_plus:
공유하기