在网站中嵌入 Github 个贡献图表

Question

有没有办法在 HTML5 中嵌入 Github 贡献图？

Answer 1

您可以在 url: https://github.com/users/<username>/contributions 抓取 HTML 并将其放在您的页面上。

Answer 2

我写了一个 JavaScript 库来做到这一点：github-calendar。

Here 是一个如何使用它的例子：

<!-- Prepare a container for your calendar. -->
<script
  src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/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://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"
/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    new GitHubCalendar(".calendar", "your-username");
</script>

Here 你可以看到它的实际效果：

基本上，由于我们需要跨域请求，所以我们需要一个代理。它向 GitHub 个人资料页面 (github.com/<user>) 发出请求，然后从那里带回所需的内容。

有关详细信息，请查看 documentation on GitHub。

Answer 3

这个人：http://www.rshah.org/ wrote a Github chart API. This could definitely help: http://ghchart.rshah.org/。而且它只有 HTML，所以无法获得任何清洁剂。只需将用户名和 alt 标签更改为您的即可。

Answer 4

通过执行以下操作，我能够使用 Angular 4 实现此目的：

向@jianweichuah提到的url发起HTTP GET请求https://github.com/users/<username>/contributions。
您需要一个代理来解决 CORS 问题，就像 github-calendar 库一样。 proxy-url/https://github.com/users/<username>/contributions
然后将其返回到模板中。

很遗憾，您无法轻松获得所有信息，但它在 SVG 详细信息中。

我在这里记录了我的确切步骤：https://www.chiangs.ninja/blog/ 以及在主站点 GitHub 选项卡下的示例。我还从 GitHub API 中获取了我的用户信息，并将其填充在图表周围。

Answer 5

更新：此答案所指的 API 不再可用。

Grass Graph 是我发现的最佳选择，可以满足您的需求。

您可以通过简单地将其生成为简单图像的图形：

<img src="https://grass-graph.moshimo.works/images/mkartak.png">

Answer 6

截至 2021 年 12 月：

<img src="https://ghchart.rshah.org/username" alt="2016rshah's Github chart" />

在网站中嵌入 Github 个贡献图表

Embed Github contributions graph in website

html

api

github

github-api