GitHub html widget, include User Widget、Repo Widget and Activity Widget.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
sample
screenshot
.DS_Store
LICENSE
README.md

README.md

GitHubWidgets

GitHub html widget, include User Widget、Repo Widget and Activity Widget.

Priview

User Widget

Repo Widget

Activity Widget

How to use

  • User Widget

Copy and paste this code in your HTML body, replacing “data-username” with your GitHub username

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

Copy and paste this code in your HTML body, replacing “data-repo” with your GitHub username/reponame

<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

Copy and paste link in your HTML head, and div/script in your HTML body, replacing “username” with your GitHub username

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

csdn

效果