깃허브(Github)에 티스토리 최근 글 목록 자동으로 업데이트 해주기
티스토리 사이드바 GitHub Contribution 위젯 등록하기
개발을 하면서 주로 사용하는 깃허브랑 티스토리를 사용하면서 깃허브에 티스토리 글이 올라가면 Git Action 을 사용해서 자동으로 업데이틑 하는 것 까지 구현이 되었는데 티스토리에서 깃허브에 커밋이 되었는지 확인하기 위해서 인터넷을 찾아봤는데 거의 대부분 업데이트 하는 방법 위주로 올라와있고 다른 방법이 없나 찾으면서 겨우 찾은 블로그..
[ 배너 출력 ]플러그인 적용하기
설정 -> 플러그인 -> 배너 출력 플러그 인 을 적용 해준다
사이드바에 플러그인 적용하기
배너 출력 플러그인을 적용하고 꾸미기에서 사이드바로 들어가면 [플러그인]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" 이렇게 넣어주면 된다.