github
웹 사이트에 GitHub 타임 라인 / 피드 표시하기

웹 사이트에 GitHub 타임 라인 / 피드 표시

이 문서는 웹 사이트에서 GitHub 피드 / 타임 라인을 표시하는 방법을 설명합니다.

예제 : 라이브 예제를 사용할 수 있습니다 :

https://newtonjoshua.com

GitHub 타임 라인 :

GitHub는 Atom 형식의 모든 사용자에 대한 공개 일정을 제공합니다.

다음에서 타임 라인을 볼 수 있습니다.

https://github.com/ {{GitHub_username}}. atom

다음을 참조하십시오 : https://developer.github.com/v3/activity/feeds

Google 피드 API :

피드 API를 사용하면 JavaScript 만 사용하여 공용 Atom, RSS 또는 Media RSS 피드를 다운로드 할 수 있으므로 몇 줄의 JavaScript만으로 피드 및 기타 API를 매시업 할 수 있습니다. 이렇게하면 웹 사이트에서 신속하게 피드를 통합 할 수 있습니다.

다음을 참조하십시오 : https://developers.google.com/feed/v1/devguide

JavaScript API로드 : 피드 API 사용을 시작하려면 웹 페이지의 헤더에 다음 스크립트를 포함 시키십시오.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

그런 다음 google.load (모듈, 버전, 패키지)를 사용하여 피드 API를로드합니다.

<script type="text/javascript">
  google.load("feeds", "1");
</script>

피드 URL 지정 : 다음과 같이 google.feeds.Feed ()를 호출 할 수 있습니다.

var feed = new google.feeds.Feed("https://github.com/{{GitHub_UserName}}.atom");

피드로드 : .load (콜백)는 Google 서버에서 생성자에 지정된 피드를 다운로드하고 다운로드가 완료되면 지정된 콜백을 호출합니다.

<script type="text/javascript">

    function initialize() {
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          result.feed.entries.forEach(function (feed) {
            var feedTitle= feed.title; 
            var feedLink = feed.link;
            var feedDate = formatDate(feed.publishedDate);
            var feedContent = formatContent(feed.content);

           // display the feed in your website
          });
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>

onLoad 핸들러 호출 : setOnLoadCallback (콜백)은이 호출을 포함하는 페이지가로드되면 호출 할 지정된 핸들러 함수를 등록하는 정적 함수입니다. callback은 포함 문서가로드되고 API를 사용할 준비가되었을 때 호출되는 필수 함수입니다.

<script type="text/javascript">
    google.setOnLoadCallback(initialize);
 </script>

피드 항목 수 설정 : .setNumEntries (num)는이 피드로로드 된 피드 항목 수를 num으로 설정합니다. 기본적으로 Feed 클래스는 네 개의 항목을로드합니다.

var feed = new google.feeds.Feed("https://github.com/{{GitHub_UserName}}.atom");
feed.setNumEntries(500);

이제 웹 사이트에서 GitHub 피드 / 타임 라인을 포맷하고 표시 할 수 있습니다.