[Tistory] 티스토리 사이드바에 GitHub Contribution Gragh 넣는법

티스토리 사이드바에 깃허브 Contribution 그래프 넣는 방법

 

 

티스토리 관리자 페이지에서 "배너 출력"이라는 플러그인을 적용해주세요.

 

그리고 "사이드바" 탭으로 이동하시면 "HTML 배너 출력"이라는 모듈이 생깁니다.

 

 

 

그리고 원하시는 사이드바 위치에 플러그인을 삽입하고 아래의 코드를 HTML 소스에 붙여 넣기 해주세요.

 

 

<코드>

<!-- Include the library. -->
<script
  src="https://unpkg.com/github-calendar@latest/dist/github-calendar.min.js"
></script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link
   rel="stylesheet"
   href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css"
/>

<div>
    <!-- Prepare a container for your calendar. -->
    <div style="text-align: center;"><strong>나의 GitHub Contribution 그래프</strong></div> 
    <div class="calendar">
        <!-- Loading stuff -->
        Loading data ...
    </div>
</div>

<script>
    GitHubCalendar(".calendar", "K-Junyyy", { responsive: true, tooltips: false, global_stats: false}).then(function() {
        // delete the space underneath the module bar which is caused by minheight 
        document.getElementsByClassName('calendar')[0].style.minHeight = "100px";
        // hide more and less legen below the contribution graph
        document.getElementsByClassName('contrib-legend')[0].style.display = "none";
    });
</script>

 

 

코드 중간에 사용자명은 본인의 사용자명으로 바꿔주시면 됩니다.

 

설정을 하신 뒤에 "변경사항 저장"을 꼭 눌러주는 것을 잊지 않도록 합시다!

 

 

 

이제 잘 적용되었는지 확인해보겠습니다.

 

네 잘 적용되었군요 ㅎㅎ 아직은 초보자인지라 깃허브에 뭘 커밋해야 할지도 모르겠고 진행 중인 프로젝트도 없기에 잔디가 거의 없지만 내년에는 꼭 인턴도 하고 프로젝트들도 많이 진행해서 푸른 잔디밭을 가꾸고 싶습니다. 

 

 

 

참고한 블로그 - coding-groot.tistory.com/109