使用 HTML 和 JavaScript 在网页中列出 GitHub 个用户的存储库或要点

Question

我花了很长时间试图找到这个问题的答案，我确实找到了一些，但其中 none 与当前版本的 GitHub API 兼容。我花了一些时间自己弄明白了，但我做到了，我对我取得的结果感到非常满意。所以，我想我应该在这里为可能也在寻找答案的人分享它。所以，请阅读下面我的回答。

Answer 1

首先，点击here for Repositories and here for Gists即可一睹最终效果。

Click here 查看包含 JavaScript 文件的存储库。在那里，您会找到有关如何使用它的所有详细信息。

如果你喜欢我在我的 GitHub 页面网站上实现的，它的源代码是 here

简而言之，这里是如何列出一个用户（在这个例子中是我的）的所有 GitHub 个存储库：

        listrepos("HiDe-Techno-Tips", document.getElementById("pin")).then(reposcount => {
                // In this section, variable reposcount stores the total number of Repositories.
            });

      svg {
        display: inline-block;
        vertical-align: middle;
        padding-bottom: 3px;
      }

      a {
        text-decoration: none;
      }

      .box {
        border: 2px solid black;
        padding: 25px;
        margin: 20px;
      }

      .box div {
        margin: 5px;
      }

      .box p {
        color: black;
      }

      .controls {
        display: flex;
      }

      .horizontalspace {
        flex-grow: 1;
      }

      .stats {
        display: inline-flex;
        align-items: center;
      }

      .buttons * {
        margin-left: 5px;
      }

      .stats *:not(svg) {
        margin-right: 5px;
      }

      ol {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <script src="https://gitlist.himdek.com/GitHubList.js"></script>
  </head>
  <body>
    <div id="pin"></div>
  </body>
</html>

使用 HTML 和 JavaScript 在网页中列出 GitHub 个用户的存储库或要点

List GitHub Repositories or Gists of a User in Webpage using HTML and JavaScript

javascript

html

github-api