Hexo 이카루스 테마 수정방법

이카루스 레이아웃 변경하기

이카루스 테마가 좋은데 글에 대한 레이아웃 폭이 너무 작아서 늘려보려고 합니다.

수정방법

환경

icarus 4.1.2 버전 기준

본문 글의 크기 조정

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

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 '';
}

<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>

$gap ?= 64px
$tablet ?= 769px
-$desktop ?= 1088px
+$desktop ?= 1288px
-$widescreen ?= 1280px
+$widescreen ?= 1480px
-$fullhd ?= 1472px
+$fullhd ?= 1672px

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

문제

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

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

2개가 문제라고 구글 검색 콘솔에서 경고합니다

해결방법

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

-{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">

생성일과 수정일 삭제

-{/* 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>}