JS實現類似於微博秀的GitHub掛件

LeBron_Six發表於2016-08-29
JSGithub

專案地址：https://github.com/smuyyh/GitHubWidgets

先來幾張效果圖。

  • GitHub使用者資訊掛件
    JS實現類似於微博秀的GitHub掛件

  • GitHub程式碼庫資訊掛件
    JS實現類似於微博秀的GitHub掛件

  • GitHub個人貢獻資訊掛件
    JS實現類似於微博秀的GitHub掛件

  • 為CSDN部落格新增GitHub使用者資訊掛件
    JS實現類似於微博秀的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。  -->

csdn

效果

JS實現類似於微博秀的GitHub掛件

相關文章