在网站中嵌入Github贡献图

Question

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

Answer 1

我写了一个JavaScript库来做到这一点:github-calendar.

以下是如何使用它的示例:

<!-- 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>

在这里你可以看到它的实际效果:

基本上,由于我们需要跨域请求,我们需要一个代理.它向GitHub配置文件页面(github.com/<user>)发出请求,然后从那里返回所需的东西.

有关更多信息,请查看GitHub上的文档.

Answer 2

这家伙:http://www.rshah.org/写了一个Github图表API.这肯定会有所帮助:http://ghchart.rshah.org/.另外它只是HTML,所以无法获得更清洁.只需将用户名和alt标记更改为您的.

Answer 3

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