티스토리 사이드바 GitHub Contribution 잔디 위젯 등록하기

깃허브(Github)에 티스토리 최근 글 목록 자동으로 업데이트 해주기

 

깃허브(Github)에 티스토리 최근 글 목록 자동으로 업데이트 해주기

깃허브(Github)에 티스토리 최근 글 목록 자동으로 업데이트 해주기 깃허브 보다 티스토리에 글을 더 많이 올리고 업로드하는데 깃허브에 항상 올린 내용을 업데이트 해주기 힘들어서 여기저기

j2su0218.tistory.com

티스토리 사이드바 GitHub Contribution 위젯 등록하기

개발을 하면서 주로 사용하는 깃허브랑 티스토리를 사용하면서 깃허브에 티스토리 글이 올라가면 Git Action 을 사용해서 자동으로 업데이틑 하는 것 까지 구현이 되었는데  티스토리에서 깃허브에 커밋이 되었는지 확인하기 위해서 인터넷을 찾아봤는데 거의 대부분 업데이트 하는 방법 위주로 올라와있고 다른 방법이 없나 찾으면서 겨우 찾은 블로그..

 

 

티스토리 사이드바에 GitHub Contribution Graph 넣는 방법

GitHub Contribution 그래프를 아래와 같이 임베딩하는 방법 1. 사이드바에 HTML을 넣을 수 있도록 해주는 배너 출력 플러그인을 적용한다 "블로그 관리 페이지 > 플러그인"에서 적용할 수 있다. 2. 사이

coding-groot.tistory.com

[ 배너 출력 ]플러그인 적용하기

설정 -> 플러그인 -> 배너 출력 플러그 인 을 적용 해준다

사이드바에 플러그인 적용하기

배너 출력 플러그인을 적용하고 꾸미기에서 사이드바로 들어가면 [플러그인]HTML 배너 출력 을 확인 할 수 있다

 

사이브바에 플러그인 넣고 원하는 위치에 넣어 준다.

그리고 편집 버튼을 누르면 다음과 같이 HTML 소스를 입력하는 곳과 플러그인의 이름을 설정 할 수 있다.

 

GitHub Contribution 을 사용하기 위한 코드

이제 HTML 배너출력을 가지고 자신의 GitHub Contribution 와 연결 해야하는데 코드는 다음과 같다.

<!-- 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 style="overflow-x: auto; white-space: nowrap; width: 100%;">
    <!-- Prepare a container for your calendar. -->
    <div class="calendar" style="min-width: 800px;">
        <!-- Loading stuff -->
        Loading data ...
    </div>
</div>

<script>
    // Load GitHub Calendar
    GitHubCalendar(".calendar", "사용자이름", {
        responsive: true,
        tooltips: false,
        global_stats: false
    }).then(function() {
        // Delete the space underneath the module bar
        document.querySelector(".calendar").style.minHeight = "100px";

        // Hide the "more" and "less" legend below the contribution graph
        const legend = document.querySelector(".contrib-legend");
        if (legend) {
            legend.style.display = "none";
        }

        // Automatically scroll to the right-most part of the calendar
        setTimeout(() => {
            const container = document.querySelector(".calendar").parentNode; // Parent container of .calendar
            container.scrollLeft = container.scrollWidth; // Set scroll position to the right
        }, 500); // Delay to ensure the calendar is fully loaded
    });
</script>

 

여기에서 "사용자이름"안에 자신의 깃허브 이름을 적용하면 된다.

기존의 코드를 좀 수정해서 스크롤바가 생기며 오른쪽 끝으로 이동하게 하여 사이 잔디가 가장 최근의 것이 보이게 수정하였다.

 

 

내 블로그 같은 경우 이름이 JISUSAMA 로 되어있기 때문에 "JISUSAMA" 이렇게 넣어주면 된다.

적용된 모습