Show Your GitHub Projects

Show Your GitHub Projects

經常會在別人的簡歷中看到,做過什麼高大上的專案。說實話,有時候看到一些大牛的簡歷,會感到非常的自卑,入行前端也一年多的時間了,但真正的‘懂行’或許也就半年的時間吧。真正大的前端專案沒有做過,一些小的個人專案大多都託管在 GitHub,前段時間醞釀了一個展示 GitHub 專案的一個小 Project,今天就來說說這個東西。

以前學前端,就只是學 HTML,CSS 和 JS,看書,看視訊,大概這樣的日子持續了好幾個月,不能說沒有一點效果,至少一些前端的基本概念都有所瞭解。慢慢地,開始接觸到 GitHub,發現這裡真是前端學習的一個高效場所。一個前端er,如果不逛 GitHub,必定是一個失敗的前端,因為在 GitHub,視野可以得到很大的擴充套件。後來索性把瀏覽器主頁也設定成了 GitHub。

發現好多大公司在招實習生和應屆生的時候,也開始慢慢的關注應聘者的 GitHub 的資訊,有時候在做一些網測題的時候,會看到輸入 GitHub 地址或部落格地址,其實,有時候你不夠優秀的原因是因為你不會 show yourself。

從思路到實踐

偶然間看到了一個精美部落格的一個專案展示頁面,感覺很不錯。看了下它的原始碼,不是很複雜,通過 JavaScript 從 api.github.com 獲取 json 資料,動態的渲染到頁面中。於是,依葫蘆畫瓢,把整個展示頁面的程式碼模仿 copy 下來,然後加入了擴充套件的元素。

GitHub 專案地址在這Demo 地址在這

介紹一下程式碼

想來想去,還是準備用 Jquery,本來想寫原生的,但是考慮到 ajax 操作和 html 操作,想想還是算了。首先用一個閉包,避免全域性變數汙染,把 JQuery 物件傳進來:

(function($){
var showProjects = function(option){
...
}
// 把函式扔給 prototype
$.prototype.showProjects = showProjects;
})($)

使用也很簡單,設定了一個 option 配置物件,引數可選,如下:

//html
<div class="projects"></div>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="showProjects.js"></script>
//js
$('.projects').showProjects({
name : 'songjinzhong', //your github url name
maxNum : 12, // max Num you want show your projects
loading : '<h3>載入中...</h3>', //loading informtion
filter : { // filter for your projects, can be id or name
id : [66267751],
name : ['7studying.com']
}
});

只要是一個 JQuery 物件都可以使用 showProjects 函式,但是之前必須要引入 JQuery 庫。

引數中,name 表示 github 的名稱,maxNum 表示是否限制顯示的條目,預設顯示全部,如果 maxNum 超過最大專案數,也顯示全部。因為這個 js 是動態從 GitHub 載入的,訪問速度很慢的時候,loading 相當於提示作用,也可以設定成其他內容。filter 是一個過濾器,表示一些不想顯示的專案,可選 id 和 name 兩種方式。

來看看 showProjects 函式中的內容,以下是一些引數設定:

var projects = this;
// no github name
if(!option || !option.name){
projects.html('<div><h3>引數錯誤</h3><p>請設定 GitHub 使用者名稱</p></div>');
return;
}
// defaultSetting
option.maxNum = option.maxNum || 0;
option.loading = option.loading || '<h3>載入中...</h3>';
var name = (option.filter && option.filter.name) || [],
id = (option.filter && option.filter.id) || [];

在檢視 github 返回的 json 資料之前,建議先自己訪問一下 https://api.github.com/users/songjinzhong/repos?type=owner,瞭解資料格式。其中會用到的資料格式有 html_url

template 是字串模版,巧妙的通過 replace 來替換關鍵字中的正則,然後執行 eval:

var template = '<div class="p-item">' 
'<div class="p-header"><a href="[repo.html_url]"><h3>[repo.name]</h3></a></div>' 
'<div class="p-body"><p>[repo.description]</p></div>' 
'<div class="p-footer"><span>L:[repo.language]</span><span>S:[repo.stargazers_count]</span><span>F:[repo.forks_count]</span></div>' 
'</div>';

顯示

這個時候連顯示的樣式也 copy 過來了,不過那個部落格中用的是浮動,我用的是 flex 作為基本佈局。具體請參考 demo 中的樣式吧。

這個樣式並不是固定的,可以根據自己的需求來改變。下圖是生成 project 的 html 圖:

然後我把它應用到我的部落格,projects 地址在這 我的專案 | 漁人。改了點東西,比如 loading 圖示變了,language star fork 全被我換成圖示。

歡迎到我的部落格交流。