Hexo 에 icarus 테마 적용하기

Posted on Edited on In Word count in article: 368 Reading time ≈ 1 mins.

Hexo 의 테마를 바꾸자

Hexo 는 기본으로 landscape 테마가 적용되어 있다
Hexo Themes 에서 마음에 드는 테마로 변경해보자

여기서는 icarus 테마를 선택했다

icarus 테마의 장점

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

설치하기

Hexo v5 부터는 테마 설치가 간단해졌다 (예전처럼 git clone 할 필요 없다)

1
2
3
4
# npm 으로 설치 가능하다
$ npm install hexo-theme-icarus
# hexo config 를 icarus 테마로 설정한다
$ hexo config theme icarus

설치 끝~

icarus Plugins

플러그인을 많이 제공하는 데 내가 사용하는 건
Disqus, ShareThis, Widgets, Google Analytics 정도다

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

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

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

config 설정하기

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

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

icarus 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 사용시

연관포스트