html - 在网站中嵌入 Github 贡献图

Question

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

Answer 1

我写了一个 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 .