5

まず第一に、読んでくれてありがとう。

現在のプロジェクトをGitHubでホストしています。GitHub Pagesを使用して、個人のブログをホストしています。ここからブログにアクセスできます。

ブログには、現在取り組んでいるすべてのプロジェクト専用のページがあります。基本的に、GitHubにクエリを実行して、進行中のすべてのプロジェクトのリストを自動的に表示したいと思いました。

多くのグーグルをしている間、私はこれがJavaScriptを使用して達成できることを発見しました。試してみましたが、期待通りに動作しませんでした。ページを読み込むと、「リポジトリのGitHubをクエリしています」というテキストメッセージが表示されます。そして、何も起こらないようです。

GitHubのメンテナーに連絡したところ、この手法では古いバージョンのGitHubAPIが使用されているとの回答がありました。

私はJavaScriptの経験がないので、誰かが私にJavaScriptを修正するのを手伝ってもらえますか？

よろしく、
ローランド。

これが私がHTMLページ内で使用したコードです

<div id="opensource-projects"></div> 

<!-- JavaScript to load and display repos from GitHub -->
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/javascripts/git.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $("#opensource-projects").loadRepositories("Yonaba");
  });
  </script>

次に、ファイル内にgit.js次のようになります。

// http://aboutcode.net/2010/11/11/list-github-projects-using-javascript.html

jQuery.githubUser = function(username, callback) {
  jQuery.getJSON("http://github.com/api/v1/json/" + username + "?callback=?", callback);
}

jQuery.fn.loadRepositories = function(username) {
  this.html("<span>Querying GitHub for " + username +"'s repositories...</span>");

  var target = this;
  $.githubUser(username, function(data) {
    var repos = data.user.repositories;
    sortByNumberOfWatchers(repos);

    var list = $('<dl/>');
    target.empty().append(list);
    $(repos).each(function() {
      list.append('<dt><a href="'+ this.url +'">' + this.name + '</a></dt>');
      list.append('<dd>' + this.description + '</dd>');
    });
  });

  function sortByNumberOfWatchers(repos) {
    repos.sort(function(a,b) {
      return b.watchers - a.watchers;
    });
  }
};

@jcolebrand：あなたの親切な助けに感謝します、しかし私はあなたが意図したものを本当に理解しませんでした。Chromeのコンソールにもコマンドを送ってみました。$jQueryのエイリアスだと思いませんか？さて、同じものを送信するコンソールは、私のリポジトリを説明する複数のオブジェクトを出力するだけです。素晴らしい！
問題は、それらを適切に解析して表示することだと思います。ねえ、私はそのためのJavaScipt構文を学ぶ必要があります...

4

4 に答える 4

8

URLが古いAPI用であるため、投稿したスクリプトが機能していません。URLをこれに変更すると、うまくいくはずです。

https://api.github.com/users/YOUR_USERNAME_HERE/repos?callback=CALLBACK

注：callback=<YOUR_CALLBACK>オプションです。

于 2012-08-12T15:34:00.453 に答える
3

http://developer.github.com/v3/は、これを行う方法についてかなり明確です。実際、こことここのユーザー名は同じなので、お見せしましょう。

github、https：//github.com/jcolebrandでリポジトリページを開き（これはこれまでのところ明らかです）、ChromeでF12を押しました。

例を実行するときのショートカットが好きなので、jQueryが実際にインストールされていることを確認するために質問しました。

次に、APIページから正確にテスト$.getJSON('//api.github.com/users/jcolebrand/repos',{},function(data){console.log(data)})しました。それが示すように、見よ、私は自分で見た5つのリポジトリを許可されました。

私が行っていないことは次のとおりです。APIキーを取得しなかった、APIを介して作業しなかった、既存の資格情報を使用した。これらのことを念頭に置いてください、しかしそれは将来それを改善する方法です。

于 2012-08-07T17:00:48.940 に答える
0

githubAPIlibも使用できます。このライブラリは私のお気に入りのhttps://github.com/michael/githubです

于 2013-04-26T01:15:57.113 に答える
0

、へのJQueryショートカットを使用して@JColebrandの回答を拡張すると、2020年に機能するAPI呼び出しがここにあります。XMLHttpRequest$.getJson()

    user = 'tik9'
        apirepo = `https://api.github.com/users/${user}`
        
   listrepos = document.createElement('ul')
        document.getElementById('github').appendChild(listrepos)
        $.getJSON(apirepo + '/repos', function (data) {
            console.log('data now', data)

            function compare(a, b) {
                if (a.watchers > b.watchers) {
                    return -1
                }
                if (a.watchers < b.watchers) {
                    return 1
                }
                return 0
            }

            data.sort(compare)
            data.forEach(v => {

                listItemRepo = document.createElement('li')
                listrepos.appendChild(listItemRepo)
                hlink = document.createElement('a')
                listItemRepo.appendChild(hlink)
                hlink.textContent = `${v.description} | Stars: ${v.watchers}`
                hlink.href = v.html_url
            })
        })
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<h4><span id=repocount></span> Github Repositories</h4>
        <div id=github></div>

于 2020-12-06T12:22:52.590 に答える