Chirpy테마 Customizing하기
Update
- 2024-04-25 (1st update)
Introduction
이 포스트에서는 Githubio의 템플릿 중 하나인 Chirpy 템플릿을 사용하여 어떻게 블로그를 커스터마이징을 할 수 있을지 살펴보겠다. 계속 바꿀 것이 있다면 아래에 업데이트 하겠다.
나는 dark theme에서 사용중이기 때문에 dark를 수정하는 것이고 light는 아직 현재 사용할 생각이 없기 때문에 건들지 않고 있다. (이쁜 색상 조합이 있으면 변경할 거 같음) light theme를 사용하고 있는 사람들은 파일뒤의 light.scss로 들어가서 작업을 수행하면 된다. (dark-theme와 파일 구조가 같음.)
블로그 text 색상 조정해주기
우선 우리가 블로그에 여러 색상을 조절하고 싶은 경우 /{blog_name}/_sass/에서 확인이 가능하다. 내가 지금 건드릴 것은 아래와 같다.
- Hyperlink, hyperlink underline 색상 변경
- inline code 색상 변경
1. Hyperlink, hyperlink underline 색상 변경
hyperlink 색상 변경과 관련된 코드는 /{blog_name}/_sass/colors/typography-dark.scss에서 확인이 가능하며 아래의 코드에서 색상을 변경할 수 있다.
1
2
--link-color: rgb(138, 180, 248);
--link-underline-color: rgb(82, 108, 150);
이 코드에서 색상을 변경시키면 된다. 색상 변경을 하려면 #151515처럼 HEX 코드 포맷이던가, rgb(138, 180, 248)처럼 넣어주면 된다. 그런데 여기서 문제가 하나 생긴다.
--link-color와--link-underline-color를 변경시키면 모든 하이퍼링크가 들어가는 코드는 색상이 변경된다.
그러므로 이것은 잠시 보류를 하도록 하고, 나중에 따로 내가 포스트에 들어가는 하이퍼링크의 색상을 변경하는 방법을 찾으면 포스팅을 다시 추가하겠다.
2. Inline code 색상 변경
1번은 2024.04.26일 기준 실패하였지만, inline code 색상변경은 보다 쉽다. 해당 색상을 변경하려면 /{blog_name}/_sass/colors/syntax-dark.scss에서 변경할 수 있다.
코드를 살펴보면 아래와 같이 나와있다.
1
2
3
4
--highlight-bg-color: #151515;
--highlighter-rouge-color: #F2613F;
--highlight-lineno-color: #808080;
--inline-code-bg: #323238;
첫번째 라인부터 코드가 어떤 부분의 색상을 담당하고 있는지 살펴보자.
--highlight-bg-color: 이 코드는 아래와 같이 inline 코드가 아닌 2줄 이상의 코드를 작성할 때 code의 header부분이라고 해야하나…? 아무튼 거기 색상을 변경시키는 코드이다.--highlighter-rouge-color: 이 코드는 이미 기본색상에서 바꿔놓았는데 원래는 inline code를 쓰면 흰색 비슷한 색상으로 text가 써진다. 근데 변경을 하면 지금 나오는 것처럼 주황색 비슷하게 변경을 할 수 있다.--highlight-lineno-color: 이 코드의 색상을 변경하면 2줄 이상의 코드를 작성할 때 코드의 각각의 줄마다 라인번호가 붙어있다 이 색상을 변경시키는 코드이다. 아래처럼 색상을 바꿔봤는데 별로다… 원래대로 돌아가야지.inline-code-bg: 이 코드 같은 경우, inline code의 box색깔을 볼 수 있을 것이다. 이 색상을 변경시키는 것이다. 변경시켜봤더니 주황색에 주황색 하니까 무슨 마스킹 된 것 마냥 이렇게 나왔다. 빨리 원래대로 돌리자.