JavaScript 实现类似微博秀的 Github 挂件一些 Github 小挂件，可在网页或个人博客上展示自己的 g

先来几张效果图。

GitHub用户信息挂件
GitHub代码库信息挂件
GitHub个人贡献信息挂件
为CSDN博客添加GitHub用户信息挂件

实现

GitHub用户信息挂件

<div class="github-widget" data-username="smuyyh"></div>
<script src="../js/github_user_widget_en.js"></script>

GitHub代码库信息挂件

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/github_repo_widget_en.js"></script>
<div class="github-widget-repo" data-repo="smuyyh/SprintNBA" style="width:500px"></div>

GitHub个人贡献信息挂件

<head>
    <link href="../css/github_widget_activity.css" rel="stylesheet">
</head>

<body>
    <div id="widget-container" style="width:600px"></div>
    <script src="../js/jquery-1.7.1.min.js"></script>
    <script src="../js/github_widget_activity.js"></script>
    <script>
      $(function(){
        $('#widget-container').activity({
          username: 'smuyyh'
        });
      });
    </script>
</body>

为CSDN博客添加GitHub用户信息挂件
管理博客 -> 博客栏目 -> 添加栏目

<div class="github-widget" data-username="smuyyh"></div>
<script type="text/javascript" src="https://rawgit.com/smuyyh/GitHubWidgets/master/js/github_user_widget_en.js"></script>

<!--js文件真实地址是以raw.githubusercontent.com开头，raw.githubusercontent.com在Response中设置了X-Content-Type-Options:nosniff ，
浏览器强制检查资源的MIME。解决方法就是将js链接中的raw.githubusercontent.com换成rawgit.com。
有一点值得注意，rawgit.com与github并没有实时同步，提交后可能需要一点时间才会同步。  -->

项目地址：github.com/smuyyh/GitH…

赶紧动起手来试试吧~~