Hexo 이카루스(icarus) 테마 적용방법

테마변경

landscape 테마가 기본 적용되어 있습니다

테마선택

Hexo Themes 에서 마음에 드는 테마를 선택하세요.

저는 icarus 테마를 적용해보겠습니다

이카루스(icarus) 테마의 장점

1. 꾸준한 업데이트 (가장 중요함, 현재 Hexo 5 를 지원하는 4.1.2 버전 Release)
2. 구글 애드센스를 붙이기 쉽다
3. 구글 Analytics를 붙이기 쉽다
4. 반응형 디자인을 제공한다
5. 여러 가지 comment 기능을 제공한다

설치하기

Hexo v5 부터는 테마 설치도 npm 으로 가능해졌습니다
(예전처럼 git clone 할 필요 없습니다)

  # npm 으로 이카루스 테마를 설치합니다
  $ npm install --save hexo-theme-icarus
  # hexo config 를 icarus 테마로 바꿉니다
  $ hexo config theme icarus

이카루스테마 플러그인

플러그인을 많이 제공하는 데
Disqus, ShareThis, Widgets, Google Analytics를 사용해봤습니다

Comment

Changyan · Disqus · DisqusJS · Facebook · Gitalk · Gitment · Isso · LiveRe · Utterance · Valine

Donate Button

Afdian.net · Alipay · Buy me a coffee · Patreon · Paypal · Wecat

Search

Algolia · Baidu · Google CSE · Insight

Share

AddThis · AddToAny · Baidu Share · Share.js · ShareThis

Widgets

Google Adsense · Archives · Categories · External Site Links · Recent Posts · Google Feedburner · Tags · Table of Contents

Analytics

Baidu Statistics · Bing Webmaster · BuSuanZi Web Counter · CNZZ Statistics · Google Analytics · Hotjar · StatCounter · Twitter Conversion Tracking

Other Plugins

Cookie Consent · LightGallery · Justified Gallery · KaTeX · MathJax · Oudated Browser · Page Loading Animations

설정바꾸기

Hexo v5 버전부터는 테마의 config 를 _config.테마명.yml 로 관리합니다
테마 config 도 관리하기 쉽게 같은 위치에 생성됩니다

_config.yml # Hexo 전체 config 파일
_config.icarus.yml # icarus 테마 config 파일

node_modules 하위로 hexo-theme-icarus 모듈이 설치되고
_config.icarus.yml 파일이 생성되고
Hexo 설정파일 _config.yml 에서 theme 가 이카루스로 바뀝니다

...
theme: icarus
...

이카루스 테마가 bulma 와 inferno 모듈이 필수라서
필요시 설치해줍니다

$ npm install --save bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

이카루스 config 설정

icarus config 파일 구조는

• version : icarus 버전 # 4.0.0
• variant : icarus 테마 선택 default 또는 cyberpunk 선택 가능
• logo : 웹사이트 로고 파일
• head
  • favicon : 즐겨찾기 아이콘
  • manifest : 사이트 URL, 사이트 명 등
  • open_graph : 검색/공유시 URL, 이미지, 저자
  • structured_data : 사이트 정보
• navbar
  • menu : GNB 메뉴
  • links : GNB 오른쪽에 github 링크
• footer
  • links : Creative Commons, icarus 테마 링크
• article
  • highlight : 코드 테마
  • licenses : 글의 저작권 설정
• search : 글 검색기능 insight 로 기본설정
• comment : 글의 댓글 기능 disqus 로 설정함
• donates : 여러 가지 제공하지만 사용안함
• share : 글 공유 기능 sharethis 설정함
• sidebar : 왼쪽/오른쪽 메뉴의 고정여부 설정
• widgets : 왼쪽 오른쪽에 위젯을 표기
  • profile : 기본 개인 정보
  • social_links : 깃허브, 페이스북, 트위터, RSS
  • links : 외부 링크
• plugins
  • google_analytics : 구글 분석
• providers
  • cdn : javascript, css 파일 다운 받는 CDN 설정
  • fontcdn : 인터넷 폰트 사용시
  • iconcdn : icon 사용시

이카루스 적용예제

기본블로그( https://skyksit.com )는 이카루스 테마를 사용하고 있습니다.