hexo icarus 테마로 변경하기

한동안 바쁘다는 핑계로 블로그에 포스팅을 하지 않던 사람이 왠일로 블로그를 다시 잡게 되었다. 스승님 같은 분께서 블로그는 해두면 그것이 자산이 된다고 했으니 조금이라도 해보는 것이 낫지 않나 해서 다시 시작해본다.

새로 시작하는 마음으로 테마를 바꿔보도록 하자.

들어가기 전에

icarus 테마 다운로드

cmd

npm install -S hexo-theme-icarus

테마 적용

_config.yml

...
theme: icarus
...

변경 확인

cmd

hexo server

icarus 설정

가독성과 다크모드 적용을 위해 변경, 적용 방법은 링크에서 파일을 다운받고 theme/icarus에 붙여넣기로 적용 끝

한글 폰트 설정

나눔스퀘어라운드, 넥슨메이플스토리체 CDN import

themes/icarus/source/css/defualt.styl

@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.css');
@import url('https://webfontworld.github.io/NexonMaplestory/NexonMaplestory.css');

폰트 적용

themes/icarus/include/style/base.styl

// $family-sans-serif ?= Ubuntu, Roboto, 'Open Sans', 'Microsoft YaHei', sans-serif
$family-sans-serif ?= 'NexonMaplestory', "nanumsquareround", sans-serif

profile 변경

코드 삭제

themes/icarus/layout/widget/profile.jsx

{followLink ? <div class="level">
<a class="level-item button is-primary is-rounded" href={followLink} target="_blank" rel="noopener">{followTitle}</a>
</div> : null}

prifile 사진 라운드 설정

themes/icarus/layout/widget/profile.jsx

<figure class="image mx-auto mb-2">
  <img style={{'border-radius': '20px'}} class={'avatar' + (avatarRounded ? ' is-rounded' : '')} src={avatar} alt={author} />
</figure>

article 스타일 변경

포스트 제목 스타일 변경

themes/icarus/include/style/article.styl

&.article
    .title
        font-size: 2.2em
        font-weight: 700
        letter-spacing: -1.4px;

포스트 내용 스타일 변경

themes/icarus/include/style/article.styl

.content
    font-size: $article-font-size
		font-weight: 350
    line-height: 1.9em;
    letter-spacing: -0.3px;
    margin-top: 20px;

head 1, 2 스타일 변경

themes/icarus/include/style/article.styl

h1
    font-size: 1.95em
    font-weight: 600
    margin-top: 50px;

h2
    font-size: 1.5em
		font-weight: 500
    margin-top: 35px;

일단 기본적인 설정은 끝냈고 만약 사용하다가 불편하거나 고쳐야 될 부분은 나중에 고치도록 하자