HEXO - THEME(ICARUS)

HEXO 테마 설치하기

hexo를 설치하면 기본적으로 landscape 테마가 설치되어 있습니다.
하지만 직접 테마를 만들어 쓸 수 있도록 가이드를 제공하고 있습니다.
기본 설정을 수정해서 직접 테마를 만들어 사용하고 싶으시다면 HEXO THEME를 확인 해 주세요.

테마찾기

기본 테마보다 이미 만들어진 다양한 스타일의 테마를 찾고 싶다면 Themes에서 찾을 수 있습니다.
저는 ICARUS 테마를 설치하였습니다. 설치방법 및 사용방법은 비슷하기 문에 테마들 중 원하는 테마가 있는지 찾아보시기 바랍니다.

• ICARUS GITHUB
• 블로그 미리보기

설치하기

• hexo init을 했던 폴더로 이동해서 clone 해주세요.

환경설정

• hexo의 _config.yml의 THEME를 기본이었던 landscape에서 icarus로 수정해주세요.

  1 2	## Themes: https://hexo.io/themes/ theme: icarus

  • icarus의 기본 테마 설치가 끝났습니다.
  • hexo s로 로컬서버에서 확인 할 수 있습니다.

• Profile Sidebar Widget

  1 2 3 4 5 6 7 8 9 10 11

  - type: profile position: # show in left or right sidebar author: # your name author_title: # your title location: # where are you avatar: # path or url to your avatar image gravatar: # your gravatar email follow_link: # path or url to any page you want social_links: # add links to your social network here

  • profile 설정을 할 수 있습니다.

• Sidebar Widgets Overview

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  widgets: - type: category position: left - type: tagcloud position: left - type: recent_posts position: right - type: archive position: right - type: tag position: right

  • 위젯의 위치를 설정할 수 있습니다.
  • 왼쪽과 오른쪽으로 나눌 수 있으며, 한쪽으로 정렬할 경우 제 블로그처럼 컨텐츠 영역을 더욱 넢게 사용 할 수 있습니다.

• Make a Sidebar Sticky When Page Scrolls

  1 2 3 4 5

  sidebar: left: sticky: false right: sticky: true

  • 양쪽 위젯의 position sticky 값을 설정할 수 있습니다.
  • true : top 고

활용

Thumbnail

• thumbnail의 사용 유무를 설정 할 수 있습니다.

  • _config.yml

    1 2	article: thumbnail: true

  • post의 front-matter

    1 2 3 4

    title: Getting Started with Icarus thumbnail: /gallery/thumbnails/desert.jpg --- 내용

Table of Contents / Catalogue

• Post 내 컨텐츠의 목차를 보여줄 수 있습니다. 오른쪽에 보이는 CATALOGUE의 형태로 보여집니다.

  • post의 front-matter

    1 2 3 4

    title: Table of Contents Example toc: true --- 내용

  • _config.yml

    1 2 3 4

    widgets: - type: toc position: left

Block Quote

• blockquote 타입의 컨텐츠를 보여줄 수 있습니다.

  • No arguments

    1 2 3

    {% blockquote %} Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem. {% endblockquote %}

    
    

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

    
    

  • Quote from an article on the web

    1 2 3

    {% blockquote Seth Godin https://alleyful.github.io/2019/07/07/tools/hexo/hexo-guide-01/ HEXO - 시작하기 %} HEXO - 시작하기 {% endblockquote %}

    
    

    HEXO - 시작하기

  
  

Code Block

• code형태의 컨텐츠를 보여줄 수 있습니다.

  • 기본형태

    1 2 3

    {% codeblock [title] [lang:language] [url] [link text] %} code snippet {% endcodeblock %}

    
    

  • Adding a caption to the code block

    1 2 3

    {% codeblock Array.map %} array.map(callback[, thisArg]) {% endcodeblock %}

    
    

    1	array.map(callback[, thisArg])

    
    

  • Adding a caption and a URL

    1 2 3 4

    {% codeblock _.compact http://underscorejs.org/#compact Underscore.js %} _.compact([0, 1, false, 2, '', 3]); => [1, 2, 3] {% endcodeblock %}

    
    

    1 2	_.compact([0, 1, false, 2, '', 3]); => [1, 2, 3]

ETC.

• Pull Quote
• jsFiddle
• Gist
• iframe
• Image
• Link
• YouTube
• Vimeo

등 많은 helper 들의 사용법을 여기에서 확인 할 수 있습니다.

HEXO BLOG 검색 엔진 최적화(SEO)

내가 만든 블로그가 검색 될 수 있도록 해보도록 할까요?
다음글에서는 HEXO BLOG의 검색 최적화에 도전해 보도록 하겠습니다.