如何查看新版 GitHub 界面

點擊個人頭像，找到 Feature preview，可以查看 GitHub 最新的特性

 

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

 

GitHub 倉庫頁新舊版整體對比

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

 

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

 

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

布局

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

 

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

 

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

倉庫基礎信息

舊版：

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

 

新版：

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

 

其中點擊 Publish your first package 按鈕的時候，會跳到如下界面

 

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

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

查找和編輯

舊版：

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

 

點擊 Find file 之后即可進行文件查找，比如下圖中搜索 config

 

搜索后選擇一個文件，可以編輯文件或者查找其他文件進行跳轉

 

新版：

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

 

點擊 Go to file 之后即可進行文件查找，比如下圖中搜索 config

 

搜索后選擇一個文件，可以編輯文件或者查找其他文件進行跳轉

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

 

點擊 Go to line，輸入行號 200，則會自動定位到當前文件的200行位置

 

點擊 Go to definition，會看到當前文件的所有函數(shù)列表

 

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