포스트

Jekyll - Chirpy 테마 블로그 설정 기록

Posted
By zhyun kim
읽는 시간  7 분

1. 프로필 이미지 & 게시글 이미지 주소 입력 형태 설정

  • _config.yml
    1
2

      # e.g. 'https://chirpy-img.netlify.app'
  img_cdn: ""

    img_cdn 값을 빈 값으로 두면 post 게시글에서 이미지 주소를 읽을 때 전체 url을 작성했다면 url을 그대로 읽고, /파일/경로를 적었을 때 깃허브 레포지토리를 루트로 해서 파일을 읽어온다.

    img_cdn 값을 입력해두면 post 게시글에서 http 등 프로토콜로 시작하는 경로를 입력할 경우 img_cdn값 다음에 프로토콜이 붙어서 해석되기 때문에 에러 발생


2. 트위터 아이콘 삭제

  • _data\contact.yml
    아래 부분 삭제
    1
2

      ― type: twitter
  　icon: ""
  • _includes\sidebar.html
    아래 부분 삭제
    1
2
3
4

    {% when 'twitter' %}  
    {%- capture url -%}  
        ..  
    {%- endcapture -%}


3. 프로필 이미지 테두리 흰색 선 삭제


4. 파비콘, 아바타 등록

  • 파비콘 파일 위치 : /assets/img/favicons
    *.png, *.ico 파일은 교체, site.webmenifest 파일은 열어서 값 확인
    • site.webmenifest 파일은 pwa가 실행될 때 사용되며 앱의 splash 화면 설정을 담당한다.
  • 아바타 설정   /_config.yml#L80
    1
2
3
4

    # the avatar on sidebar, support local or CORS resources
#
# e.g. '/commons/avatar.jpg'
avatar: "/assets/img/avatar.png"


5. 폰트 변경

비공개 레포지토리/commit/1f91cb973e7aeafabba2c10a07a83313ea62442e

웹 폰트(cdn)을 사용하지 않고 embedded 형식으로 폰트를 다운받아 프로젝트에 위치시켜 사용하는 방법을 선택했다.

  • /_sass/addon/commons.scss 파일의 상단에 @font-face 추가
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    @font-face {
  font-family: SUITE;
  font-weight: 400;
  src: url(/assets/lib/fonts/SUITE/SUITE-Regular.ttf) format('truetype');
}
@font-face {
  font-family: SUITE;
  font-weight: 600;
  src: url(/assets/lib/fonts/SUITE/SUITE-SemiBold.ttf) format('truetype');
}
@font-face {
  font-family: SUITE;
  font-weight: 700;
  src: url(/assets/lib/fonts/SUITE/SUITE-Bold.ttf) format('truetype');
}
@font-face {
  font-family: SUITE;
  font-weight: 900;
  src: url(/assets/lib/fonts/SUITE/SUITE-ExtraBold.ttf) format('truetype');
}
  • /_sass/addon/variables.scss 파일의 마지막 줄에 있는 $font-family-base와 $font-family-heading 수정
    • commons.scss 파일에 추가한 font-face 블럭의 font-family 값을 추가하고 default 설정을 해준다.
      1
2

      $font-family-base: SUITE !default;
$font-family-heading: SUITE !default;
  • /assets/lib/fonts/ 위치에 사용할 폰트 파일 추가


6. 이메일 보내기 새 창에서 실행

  • /_includes/sidebar.html 파일의 69번 줄 근처에 있는 javascript:로 시작하는 코드를 window.open()함수를 사용하도록 수정
    1
2
3
4
5

    {% when 'email' %}
    {% assign email = site.social.email | split: '@' %}
    {%- capture url -%}
        javascript:window.open('mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@'))
    {%- endcapture -%}


7. 깃허브 아이콘과 이메일 아이콘 사이에 티스토리 블로그 아이콘 & 링크 추가

  • 티스토리 블로그 주소 등록
    /_config.yml 파일의 35번 줄 근처에 위치한 social.links 필드에 티스토리 주소를 추가해준다.
    1
2
3
4
5
6
7

      social:
    name: ..
    email:..
    links:
      - https://github.com/zhyunk 
      - https://tistory.zhyun.kim # <-- tistory 추가
  ..


  • 티스토리 아이콘 등록 : _data/contact.yml
    /_data/contact.yml 파일에 티스토리 아이콘으로 사용할 fonwawsome 클래스 이름을 등록해준다.
    1
2

        - type: tistory
      icon: "fa-sharp fa-solid fa-t"


  • 티스토리 아이콘 출력 : _includes/sidebar.html
    /_includes/sidebar.html 파일의 57번 줄({% case entry.type %} 코드 줄) 하위에 티스토리 코드를 추가한다 . 나는 github 바로 다음에 티스토리 설정을 추가했기 때문에 site.social.links[1]이다.
    (github부터 0번이 매겨지기 때문에 위치를 계산하여 사용해야 됨)
    1
2
3
4

      {% when 'tistory' %}
    {%- capture url -%}
        {{ site.social.links[1] }}
    {%- endcapture -%}


8. comments - giscus 설정

giscus.app을 통해 설정 정보를 얻어야 한다 (repo_id, category, category_id)

https://giscus.app/ 사이트를 통해서 값을 입력하면서 쭉 따라가다가 마지막에 script가 나오면 테마에 적용할 차례가 된다.

(24.03.11 기준) chirpy 테마를 사용하는 경우 _config.yml의 설정 값에 comments.active 필드가 없는데, 추가해주어야 댓글창이 노출된다.

그리고 lang 값을 한국어로 지정한 경우, ko가 아닌 값을 입력했다면 giscus를 적용함에 있어서 오류가 발생한다. 따라서 lang값에 ko가 아닌 값(ex. ko-KR)을 입력한 경우 comments.giscus.lang값에 ko를 입력해주어야 한다.

/_config.yml 파일의 90번 줄(comments 설정 ) 하위에 giscus 관련 값 입력

1
2
3
4
5
6
7
8
9
10
11
12
13

comments:
  active: giscus
  provider: giscus 
  ...
  giscus:
    repo: zhyunk/zhyunk.github.io
    repo_id: asdasd
    category: General
    category_id: asdasd
    mapping: # optional, default to 'pathname'
    input_position: # optional, default to 'bottom'
    lang: ko 
    reactions_enabled: # optional, default to the value of `1`


9. 테마 모드 스위치 항상 기능하도록 설정

_config.yml에서 theme_mode 에 값을 지정하면 사이드바 하단의 테마 모드 변경 스위치가 사라지기 때문에, 항상 스위치가 떠있고 기능하도록 수정

  • _includes/head.html : 문서의 하단에 위치한 {% unless site.theme_mode %} 코드와 {% endunless %}코드 삭제
    /_includes/head.html#L136 수정 후
    1
2
3
4

          <!-- JavaScript -->
      {% include mode-toggle.html %}
      {% include metadata-hook.html %}
  </head>


  • _includes/sidebar.html : 문서의 46번줄 근처에 위치한 {% unless site.theme_mode %} 코드와 {% endunless %} 코드 삭제
    /_includes/sidebar.html#L46-L52 수정 후
    1
2
3
4
5
6
7
8
9
10
11

    <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
  <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
    <i class="fas fa-adjust"></i>
  </button>

  {% if site.data.contact.size > 0 %}
    <span class="icon-border"></span>
  {% endif %}

  {% for entry in site.data.contact %}
      ...



원본 기록

메모, Blog (Jekyll - Chirpy)
jekyll blog setting
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.