[Github] Github theme 수정 ( Chirpy 커스터마이징)

Github

[Github] Github theme 수정 ( Chirpy 커스터마이징)

owls 2022. 12. 7. 17:55

728x90

Github blog를 만들어 보았는데요, 이번에는 테마 수정 하는 글을 포스팅하겠습니다~

Github blog 생성 포스팅은 아래 링크를 참고해주세요~

2022.12.06 - [Github] - [Github] Github blog 생성하기

[Github] Github blog 생성하기

1. Ruby 설치 2. 로컬 저장소 폴더 생성 3. Jekyll & Bundler 설치 4. 테마 다운로드 5. chirpy 초기화 6. chirpy 파일 수정 7. Github repository 생성 8. 로컬 서버 실행 9. 파일 정리 10. 배포 제가 생성한 github page입

code-space.tistory.com

저는 Chirpy theme를 사용하였습니다.

1. 파일 설명

테마에는 많은 파일들이 들어있습니다.

파일명	내용
_config.yml	블로그의 기본 설정 파일. 기본 환경 세팅
_data	왼쪽 사이드바와 포스트 하단의 공유하기 버튼등의 구성을 변경 언어 설정에 따라 기본적으로 화면에 나오는 단어들을 변경
_include	사이드바, toc, 구글애널리틱스, footer, 댓글 등의 대부분의 모듈형으로 삽입되는 UI를 변경
_layout	블로그 전역에 적용되는 기본 형식, 카테고리, 포스트 등에 적용되는 형식등을 변경
_posts	내가 작성한 블로그 글을 저장해 두는 곳
_sass	css 파일 커스터마이징
_site	로컬에서 실행할 때, 화면 UI를 구성하는 모든 내용 (이곳의 내용을 변경하면 로컬에는 잘 반영되지만, git에는 올라가지 않음, 다른 기본 디렉토리의 내용을 변경하고 빌드하게 되면 이곳의 내용이 바뀌게 됨)
_tabs	왼쪽 사이드바의 기본 탭메뉴들에 대한 랜딩페이지
assets	css, img 등, 포스팅에 들어갈 이미지는 /assets/img 디렉토리에 추가
tools	github에서 자동 배포를 위한 코드. 수정X

2. config 파일 수정

"_config.yml" 파일을 수정합니다.

사용자 이름, email 주소, github 주소 등 user 정보를 변경합니다.

lang: en
timezone: Asia/Seoul
title: Codenee                          # the main title
tagline: Codenee's blog   # it will display as the sub-title

url: 'https://codenee.github.io'
github:
  username: codenee             # change to your github username
twitter:
  username: codenee            # change to your twitter username
social:
  name: codenee
  email: example@domain.com             # change to your email address

3. footer 파일 수정

_includes/footer.html

저는 footer의 오른쪽 아래에 출력되는 문구를 삭제하기 위해 아래와 같이 주석처리를 했습니다.

<!-- 
      <div class="footer-right">
        <p class="mb-0">

          {% capture _platform %}
          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
          {% endcapture %}

          {% capture _theme %}
          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
          {% endcapture %}

          {{ site.data.locales[site.lang].meta
            | default: 'Powered by :PLATFORM with :THEME theme.'
            | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
          }}
        </p>
      </div>
           -->

4. 바로가기 아이콘 설정

아래 사진과 같이 바로가기 아이콘과 url을 변경할 수 있습니다.

아이콘과 url을 설정하는 파일은 _data/contact.html 입니다.

저는 twitter와 email을 주석처리하고 tistory 를 추가하였습니다.

icon은 아래 링크에 있는 아이콘과 연동되어 사용할 수 있습니다.

https://fontawesome.com/icons/house?s=solid&f=classic

House Icon | Font Awesome

House icon in the Solid style. Make a bold statement in small sizes.. Available now in Font Awesome 6.

fontawesome.com

바로 아래 아이콘을 클릭하면 사용할 수 있는 class id가 나옵니다.

위 id를 복사해서 아래와 같이 icon 항목에 설정하면 house icon이 화면에 출력됩니다 :)

-
  type: github
  icon: 'fab fa-github'
#-
#  type: twitter
#  icon: 'fab fa-twitter'
#-
#  type: email
#  icon: 'fas fa-envelope'
#  noblank: true            # open link in current tab
-
  type: tistory
  icon: 'fa-solid fa-house'
  noblank: true
  url : 'https://code-space.tistory.com/'
-
  type: rss
  icon: 'fas fa-rss'
  noblank: true

사용하고 싶은 icon을 검색해서 설정하면 됩니다~