Github Blog 만들기 - Jekyll thema 커스텀 해보기
사전지식 습득
html file 들을 살펴보면 값들이 직접적으로 기입되어있는게 아닌 다른 경로에서 가져오는 형태로 작성되어져 있습니다.
site.data.locales[include.lang].meta 이처럼 많은 부분이 site로 시작하는 코드를 확인해볼 수 있는데 이것의 의미를 알아보겠습니다.
Jekyll 기본 동작 원리
꼭 알아야 하는 것! _config.yml 파일에서 설정된 내용은 site 객체에 로드됩니다. 해당 파일이 사이트의 전역 설정을 정의하게 됩니다.
site.data는 _data 디렉토리에 있는 파일을 로드하고 파일의 확장자는 YAML, JSON, CSV와 같은 파일입니다.
그렇다면 site.data.locales[include.lang].meta 코드를 살펴보면
_data 폴더안 / locales 폴더안 / [include. lang]를 참조하게되는데 이것은 현재 선택된 언어 코드를 나타냅니다.
현재 선택된 언어 코드는 _config.yml file에서 맨위 부근의 코드에서 확인 가능합니다.
1
2
3
4
5
6
7
# Import the theme
theme: jekyll-theme-chirpy
# The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
# If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed,
# otherwise, the layout language will use the default value of 'en'.
lang: ko-KR
저는 한국어를 적용하기 위해 ko-KR로 설정된 상태이고 최종적으로 site.data.locales 안에 있는 ko-KR.yml 파일을 참조하게 되고. ko-KR.yml file안의 meta 값을 가져오라는 의미가 되는겁니다.
Sidebar Image 변경하기
_config.yml에서 avatar 항목에 본인이 넣고싶은 이미지 경로를 추가하면된다.
assets/img에 이미지를 보관했다면 아래와 같은 형태로 작성해준다.
1
avatar: "assets/img/이미지명"
만약 다음과 같이 경로상에도 문제가 없는 상황인데 이미지를 찾지 못하는 상황이라면
avatar 항목 바로 위의 cdn: "https://chirpy-img.netlify.app" 부분이 활성화 되어있으면 cdn 경로에서 이미지를 찾기 때문에 찾을 수 없는 것이다. 해당 부분을 주석처리해주자.
favicon 변경하기
위 빨간네모박스안의 icon을 favicon이라고 부른다 이것을 바꾸는 방법에 대해 알아보자.
먼저 내가 적용하고 싶은 icon 파일을 준비해야한다.
favicon 생성사이트에 접속해서 이미지를 업로드하고 Download button을 누르면 적용시킬 favicon icon들을 만들어준다.
해당 파일들을 assets/img/favicons 폴더 안에 넣어주면 끝!
Footer 변경
footer는 _includes/footer.html 경로에서 변경할 수 있다.
blog 맨아래의 Powered by 와 같은 문구를 지우려면
1
site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
와 같은 코드가 ko-KR.yml file에 밑과 같이 정의되어 있다. 해당 부분을 주석처리 하면 나타나지 않을 것이다.
1
meta: Powered by :PLATFORM with :THEME theme