Git

hexo 테마 변경하기

Blog, Git

hexo 폰트 변경

나눔스퀘어라운드 (NanumSquareRound)
https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css

head.ejs 수정하기

1
<%- css('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css') %>
1
vi blog/themes/hueman/layout/common/head.ejs
  • head 부분에 추가

가운데 보면 위의 코드를 넣어 준 것을 볼 수 있다.

css 적용

1
vi blog/themes/hueman/source/css/_variables.styl

  • font-sans 본문 폰트 : NanumSquareRound 추가
  • font-mono 코드 폰트 : D2Coding을 추가

hexo theme color 변경

위와 같이 hueman 테마의 색상을 변경할 수 있다.

1
vi blog/themes/hueman/source/css/_variables.styl

  • color-default: hexo 폴더 안에 있는 _config.yml 파일에서 설정해 줄 수 있는 색상이다. 위에 사진에 보이는 follow 부분에 나타나는 색상을 적용해 줄 수 있다, 여기서 적용하지 말고 _config.yml파일에서 바꿔준다.
  • color-header-background: 위에 보이는 파란색 영역에 색상을 지정해 줄 수 있다.
  • color-border: 위에 보이는 노란색 영역에 색상을 지정해 줄 수 있다.
  • color-nav-background: 검은색 영역에 색상 지정
  • color-footer-background: 맨 밑의 영역에 색상 지정
  • color-sidebar- background: sidebar의 배경색은 모바일에서는 바뀌지만, 데스크탑 사이트에서는 바뀌지 않는다 이 부분의 문제점은 좀 더 찾아봐야할 것 같다.

아래의 링크에서 색상 선택에 도움을 받을 수 있을 것이다.

Hex Color Code

Share