Hexo 이카루스 테마 레이아웃 바꾸기

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

현상

이카루스 테마가 좋기는 한데 글에 대한 레이아웃이 너무 작다

수정방법

환경

icarus 4.1.2 버전 기준

본문 글의 크기 조정

이카루스 v4 부터는 node_modules 에 설치 됩니다
본인이 설정한 column 수에 맞춰서 조절합니다

node_modules/hexo-theme-icarus/layout/common/widgets.jsx
1
2
3
4
5
6
7
8
9
10
function getColumnSizeClass(columnCount) {
    switch (columnCount) {
        case 2: //위젯 1개만 사용할 때는 여기  수정
-           return 'is-4-tablet is-4-desktop is-4-widescreen';
+           return 'is-3-tablet is-3-desktop is-3-widescreen';
        case 3:
            return 'is-4-tablet is-4-desktop is-3-widescreen';
    }
    return '';
}
node_modules/hexo-theme-icarus/layout/layout.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="columns">
    <div class={classname({
        column: true,
        'order-2': true,
        'column-main': true,
        'is-12': columnCount === 1,
-       'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
+       'is-9-tablet is-9-desktop is-9-widescreen': columnCount === 2,  //위젯 1개만 사용할 때는 여기  수정
        'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
    })} dangerouslySetInnerHTML={{ __html: body }}></div>
    <Widgets site={site} config={config} helper={helper} page={page} position={'left'} />
    <Widgets site={site} config={config} helper={helper} page={page} position={'right'} />
</div>
node_modules\hexo-theme-icarus\include\style\base.styl
1
2
3
4
5
6
7
8
$gap ?= 64px
$tablet ?= 769px
-$desktop ?= 1088px
+$desktop ?= 1288px
-$widescreen ?= 1280px
+$widescreen ?= 1480px
-$fullhd ?= 1472px
+$fullhd ?= 1672px

구글 검색 콘솔 지적사항 해결하기

문제

구글 검색 콘솔의 모바일 친화성 테스트를 진행하면

  • 텍스트가 너무 작아 읽을 수 없음
  • 클릭할 수 있는 요소가 서로 너무 가까움

2개가 문제라고 나오고 있다

해결방법

제목 위의 설명의 font 를 7 => 9 로 키운다

node_modules\hexo-theme-icarus\layout\common\article.jsx
1
2
-{page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
+{page.layout !== 'page' ? <div class="article-meta is-size-9 is-uppercase level is-mobile">

생성일과 수정일 삭제

1
2
3
4
5
6
7
8
-{/* Creation Date */}
-{page.date && <span class="level-item" dangerouslySetInnerHTML={{
    __html: _p('article.created_at', `<time dateTime="${date_xml(page.date)}" title="${new Date(page.date).toLocaleString()}">${date(page.date)}</time>`)
-}}></span>}
-{/* Last Update Date */}
-{page.updated && <span class="level-item" dangerouslySetInnerHTML={{
    __html: _p('article.updated_at', `<time dateTime="${date_xml(page.updated)}" title="${new Date(page.updated).toLocaleString()}">${date(page.updated)}</time>`)
-}}></span>}