你可能還不知道，新版 GitHub 頁面長這個樣子的！

GitHub 倉庫頁面即將迎來新的版式，在此向你們分享下有哪些變化

如何查看新版 GitHub 界面

點擊我的頭像，找到 Feature preview，能夠查看 GitHub 最新的特性

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

GitHub 倉庫頁新舊版總體對比

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

而後咱們就要讓新界面閃亮登場了！

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

佈局

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

新版：改版以後，新界面的主要內容板塊變寬了，達到了 1200px 左右的寬度（響應式佈局會有必定的變化）

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

倉庫基礎信息

舊版：

• 上方有 Used By 信息，表示該倉庫做爲開發包被其餘應用引用的次數。
• 倉庫介紹和網站地址在一行，標籤在下一行，右側點擊 Edit 進行編輯
• 基礎信息包括 commits、branches、packages、releases、contributors 和開源協議都放在了一行上面
• 不一樣語言的佔比經過顏色來進行區分

新版：

• 上方再也不有 Used By 信息，這個不肯定是否是 GitHub 不當心漏掉了
• 倉庫介紹、網站地址和標籤放在了右側，各佔一行，編輯按鈕使用 icon 替換原來的文字
• 基礎信息中突出了 Readme 的連接、開源協議、最新 release 的版本內容、GitHub 自建的包發佈倉庫、貢獻者列表和語言佔比

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

能夠看到 GitHub 支持多種包的發佈，包括 Docker、Maven、npm 等，入口位置比舊版更明顯

總結：通過改版後，基礎信息內容重點突出，更有利於用戶看到本身關心的信息，好比發佈日誌和更新狀況是不少開發者很是關注的，以前的入口位置不夠明顯。還有能夠明顯看出 GitHub 準備推進本身的包倉庫建設

查找和編輯

舊版：

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

點擊 Find file 以後便可進行文件查找，好比下圖中搜索 config

搜索後選擇一個文件，能夠編輯文件或者查找其餘文件進行跳轉

新版：

新版界面突出了文件查找功能，將建立文件和上傳文件進行了合併

點擊 Go to file 以後便可進行文件查找，好比下圖中搜索 config

搜索後選擇一個文件，能夠編輯文件或者查找其餘文件進行跳轉

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

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

點擊 Go to definition，會看到當前文件的全部函數列表

根據函數列表進行過濾找到本身要查的函數，點擊後即會跳到對應的位置，好比選擇了 queryParse

總結：新版的查找能力比舊版的有所增長，進行了功能突出，增長了行號定位和函數定位功能

舊版的 GitHub 倉庫頁面承載着開發者們滿滿的回憶，不過新版的也很值得期待呢！

以爲文章直擊靈魂，歡迎點擊在看和轉發

本文使用 mdnice 排版