반응형
이카루스 레이아웃 변경하기
이카루스 테마가 좋은데 글에 대한 레이아웃 폭이 너무 작아서 늘려보려고 합니다.
수정방법
환경
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>}
반응형
'IT > Hexo' 카테고리의 다른 글
Hexo 에 구글애널리틱스 추가하기 (0) | 2022.06.30 |
---|---|
Hexo 네이버 사이트 소유확인 (0) | 2022.06.30 |
Hexo 구글 검색 콘솔에 사이트맵 최신화 하기 (0) | 2022.06.30 |
Hexo Next 테마 적용하기 (0) | 2022.06.30 |
Hexo 이카루스(icarus) 테마 적용방법 (0) | 2022.06.30 |
Hexo 태그 플러그인(Tag plugin) 사용법 (0) | 2022.06.30 |
마크다운(Markdown) 사용법 (0) | 2022.06.28 |
Hexo 로 글작성하기 (0) | 2022.06.28 |