在网站中嵌入 Github 贡献图 [英] Embed Github contributions graph in website

问题描述

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

解决方案

我为此编写了一个 JavaScript 库:

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

有关详细信息，请查看 GitHub 上的文档.

Is there a way to embed the Github contributions graph in HTML5?

解决方案

I wrote a JavaScript library to do that: github-calendar.

Here is an example how to use it:

<!-- 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 you can see it in action:

Basically, since we need cross domain requests we need a proxy. It makes a request to GitHub profile page (github.com/<user>) and then brings back the needed stuff from there.

For more information, check out the documentation on GitHub.

这篇关于在网站中嵌入 Github 贡献图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！