如何查看新版 GitHub 界面

點(diǎn)擊個(gè)人頭像，找到 Feature preview，可以查看 GitHub 最新的特性

 

找到 Repository refresh，點(diǎn)擊 Enable 就能開啟查看倉庫最新頁面的能力

 

GitHub 倉庫頁新舊版整體對(duì)比

首先我們先來一波回憶殺，看看舊版的界面是什么樣子的

 

然后我們就要讓新界面閃亮登場了！

 

從界面整體上來看，還是有不小變化的，下面一一分析下

布局

舊版：由于 GitHub 是 2008 年上線的，那個(gè)時(shí)候的前端技術(shù)還不夠成熟，同時(shí)受電腦屏幕大小限制，主要內(nèi)容都集中在 980px 寬度的區(qū)域中

 

新版：改版之后，新界面的主要內(nèi)容板塊變寬了，達(dá)到了 1200px 左右的寬度（響應(yīng)式布局會(huì)有一定的變化）

 

總結(jié)：布局上，新版的看上去更大氣，也更符合目前大屏幕的趨勢

倉庫基礎(chǔ)信息

舊版：

• 上方有 Used By 信息，表示該倉庫作為開發(fā)包被其他應(yīng)用引用的次數(shù)。
• 倉庫介紹和網(wǎng)站地址在一行，標(biāo)簽在下一行，右側(cè)點(diǎn)擊 Edit 進(jìn)行編輯
• 基礎(chǔ)信息包括 commits、branches、packages、releases、contributors 和開源協(xié)議都放在了一行上面
• 不同語言的占比通過顏色來進(jìn)行區(qū)分

 

新版：

• 上方不再有 Used By 信息，這個(gè)不確定是不是 GitHub 不小心漏掉了
• 倉庫介紹、網(wǎng)站地址和標(biāo)簽放在了右側(cè)，各占一行，編輯按鈕使用 icon 替換原來的文字
• 基礎(chǔ)信息中突出了 Readme 的鏈接、開源協(xié)議、最新 release 的版本內(nèi)容、GitHub 自建的包發(fā)布倉庫、貢獻(xiàn)者列表和語言占比

 

其中點(diǎn)擊 Publish your first package 按鈕的時(shí)候，會(huì)跳到如下界面

 

可以看到 GitHub 支持多種包的發(fā)布，包括 Docker、Maven、npm 等，入口位置比舊版更明顯

總結(jié)：經(jīng)過改版后，基礎(chǔ)信息內(nèi)容重點(diǎn)突出，更有利于用戶看到自己關(guān)心的信息，比如發(fā)布日志和更新情況是很多開發(fā)者非常關(guān)注的，之前的入口位置不夠明顯。還有可以明顯看出 GitHub 準(zhǔn)備推動(dòng)自己的包倉庫建設(shè)

查找和編輯

舊版：

舊版界面是有上傳文件和查找文件能力的，但是不夠明顯

 

點(diǎn)擊 Find file 之后即可進(jìn)行文件查找，比如下圖中搜索 config

 

搜索后選擇一個(gè)文件，可以編輯文件或者查找其他文件進(jìn)行跳轉(zhuǎn)

 

新版：

新版界面突出了文件查找功能，將創(chuàng)建文件和上傳文件進(jìn)行了合并

 

點(diǎn)擊 Go to file 之后即可進(jìn)行文件查找，比如下圖中搜索 config

 

搜索后選擇一個(gè)文件，可以編輯文件或者查找其他文件進(jìn)行跳轉(zhuǎn)

但是和舊版對(duì)比起來新增了 2 個(gè)功能，定位到某一行或者某個(gè)函數(shù)定義

 

點(diǎn)擊 Go to line，輸入行號(hào) 200，則會(huì)自動(dòng)定位到當(dāng)前文件的200行位置

 

點(diǎn)擊 Go to definition，會(huì)看到當(dāng)前文件的所有函數(shù)列表

 

根據(jù)函數(shù)列表進(jìn)行過濾找到自己要查的函數(shù)，點(diǎn)擊后即會(huì)跳到對(duì)應(yīng)的位置，比如選擇了 queryParse