jekyll base-theme 커스터마이징

jekyll base-theme의 디자인과 각종 요소들을 커스터마이징하는 방법입니다

Tip: 기술문서 사이트가 리뉴얼 되었습니다.

폰트 교체

base-theme는 기본 폰트가 Merriweather로 되어 있습니다.
영어 표기에는 적당하지만, 한글 표기에는 좋지 않아 나눔고딕 폰트로 변경하였습니다.

그리고 폰트 파일을 별도로 추가하기 보다는 구글에서 제공하는 폰트 경로를 설정하는 방식으로 교체했습니다.
구글에서 제공하는 폰트 리스트와 적용 방법은 아래 사이트에서 확인 가능합니다. https://fonts.google.com/

html 수정

파일 위치 : \_layouts\default.html

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet"> 

css 수정

파일 위치: \_sass\typography.scss

body {
  height: 100%;
  max-height: 100%;
  font-family: 'Nanum Gothic', sans-serif;
  }

한글 검색 오류 수정

base-theme 기본 설정으로는 한글 등 utf-8 언어 검색이 되지 않습니다.
그에 따라 몇가지 수정을 하면 한글 검색이 가능해집니다.

js 파일 위치: \js\search.js

기존:
window.index = lunr(function () {
		this.field("id");
		this.field("title", {boost: 10});
		this.field("categories");
		this.field("url");
		this.field("content");
	});

수정: 
window.index = new lunr.Index;
window.index.field('id');
window.index.field('title', { boost: 10 });
window.index.field('author');
window.index.field('category');
window.index.field('content');

다음으로 charset 을 설정합니다.
html 파일 위치 : \search.html

기존: 
<script src="{{ site.baseurl }}/js/lunr.min.js"></script>
<script src="{{ site.baseurl }}/js/search.js"></script>

수정: 
<script src="{{ site.baseurl }}/js/lunr.min.js" charset="utf-8"></script>
<script src="{{ site.baseurl }}/js/search.js" charset="utf-8"></script>

상단 header bg 교체

파일 위치: \_sass\header.scss

기존:
header {
	background: $header-color;
}

수정: 
header {
	background: url("/images/ncp-header-bg.png");
	background-size: 2200px;
}

logo 파일 교체

파일 위치: \_includes\logo.html

기존:
<svg version="1.1" id="Layer_1" ..중략.. xml:space="preserve">
	 ..중략..
</svg>

수정:
<img src="/images/title_logo_white.png" style="width:160px;height:33px;margin-top:5px">

상단 메뉴 수정

파일 위치: \_data\navigation.yml

- name: Docs
  link: /
  target: _self
- name: FAQ
  link: /faq/
  target: _self
- name: Company
  link: https://3rdeyesys.com
  target: _blank

파일 위치: \_includes\navigation.html

{% if page.url != "/" %}
	<span style="width:100px">\{% include search.html %}</span>
{% endif %}	
</nav>

파일 위치: \_data\footer.yml

- name:
  link: https://www.facebook.com/3rdeyesys
  social_icon: Facebook
  target: _blank
- name:
  link: mailto:biz@3rdeyesys.com
  social_icon: Email
  target: _blank

코드 블럭 스타일 수정

첫째줄만 들여쓰기 되는 현상 수정
컨텐츠 넓이 정도로 영역이 자동 할당되도록 수정
과도한 padding, margin 영역 축소

파일 위치: \_sass\dark-theme.scss

기존:
.highlight { 
 padding: 10px 15px;
}
 
수정: 
.highlight { 
  padding: 7px 30px 7px 10px;
  display:inline-block;
}

파일 위치: \_sass\elements.scss

기존:
code, pre, tt {	
	padding: 2px 5px;
}
 
수정: 
code, pre, tt {	
	margin: 0px;
	display:inline-block;
}

Tags: