項目地址：https://github.com/smuyyh/GitHubWidgets
先來幾張效果圖。
GitHub用戶信息掛件
![]()
GitHub代碼庫信息掛件
![]()
GitHub個人貢獻信息掛件
![]()
爲CSDN博客添加GitHub用戶信息掛件
![]()
使用方式
- User Widget
<div class="github-widget" data-username="smuyyh"></div>
<script src="../js/github_user_widget_en.js"></script>- Repo Widget
<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:600px"></div>or
<head>
<link type="text/css" rel="stylesheet" href="../css/github_repo_widget_2.css"/>
</head>
<body>
<div class="gitinfo" style="margin:15px 0; width:600px;"></div>
<script src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">var git_name ="/smuyyh/IncrementallyUpdate"</script>
<script type="text/javascript" src="../js/github_repo_widget_2_en.js"></script>
</body>- Activity Widget
<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>爲博客添加GitHub掛件（以CSDN博客爲例）
管理博客 -> 博客欄目 -> 添加欄目
<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。 -->
效果
