你可能还不知道，新版 GitHub 页面长这个样子的！

水深无声 2023-02-20 06:37 6阅读 0赞

点击上方“**五分钟学算法**”，选择“星标”公众号

重磅干货，第一时间送达![format_png][]

![format_png 1][]

转自编程如画

GitHub 仓库页面即将迎来新的版式，在此向大家分享下有哪些变化

## 如何查看新版 GitHub 界面 ##

点击个人头像，找到 Feature preview，可以查看 GitHub 最新的特性

![format_png 2][]

找到 Repository refresh，点击 Enable 就能开启查看仓库最新页面的能力

![format_png 3][]

## GitHub 仓库页新旧版整体对比 ##

首先我们先来一波回忆杀，看看旧版的界面是什么样子的

![format_png 4][]

**然后我们就要让新界面闪亮登场了！**

![format_png 5][]

从界面整体上来看，还是有不小变化的，下面一一分析下

## 布局 ##

**旧版**：由于 GitHub 是 2008 年上线的，那个时候的前端技术还不够成熟，同时受电脑屏幕大小限制，主要内容都集中在 980px 宽度的区域中

![format_png 6][]

**新版**：改版之后，新界面的主要内容板块变宽了，达到了 1200px 左右的宽度（响应式布局会有一定的变化）

![format_png 7][]

**总结**：布局上，新版的看上去更大气，也更符合目前大屏幕的趋势

## 仓库基础信息 ##

**旧版**：

*  上方有 Used By 信息，表示该仓库作为开发包被其他应用引用的次数。
 *  仓库介绍和网站地址在一行，标签在下一行，右侧点击 Edit 进行编辑
 *  基础信息包括 commits、branches、packages、releases、contributors 和开源协议都放在了一行上面
 *  不同语言的占比通过颜色来进行区分

![format_png 8][]

**新版**：

*  上方不再有 Used By 信息，这个不确定是不是 GitHub 不小心漏掉了
 *  仓库介绍、网站地址和标签放在了右侧，各占一行，编辑按钮使用 icon 替换原来的文字
 *  基础信息中突出了 Readme 的链接、开源协议、最新 release 的版本内容、GitHub 自建的包发布仓库、贡献者列表和语言占比

![format_png 9][]

其中点击 Publish your first package 按钮的时候，会跳到如下界面

![format_png 10][]

可以看到 GitHub 支持多种包的发布，包括 Docker、Maven、npm 等，入口位置比旧版更明显

**总结**：经过改版后，基础信息内容重点突出，更有利于用户看到自己关心的信息，比如发布日志和更新情况是很多开发者非常关注的，之前的入口位置不够明显。还有可以明显看出 GitHub 准备推动自己的包仓库建设

## 查找和编辑 ##

**旧版**：

旧版界面是有上传文件和查找文件能力的，但是不够明显

![format_png 11][]

点击 Find file 之后即可进行文件查找，比如下图中搜索 config

![format_png 12][]

搜索后选择一个文件，可以编辑文件或者查找其他文件进行跳转

![format_png 13][]

**新版**：

新版界面突出了文件查找功能，将创建文件和上传文件进行了合并

![format_png 14][]

点击 Go to file 之后即可进行文件查找，比如下图中搜索 config

![format_png 15][]

搜索后选择一个文件，可以编辑文件或者查找其他文件进行跳转

但是和旧版对比起来新增了 2 个功能，定位到某一行或者某个函数定义

![format_png 16][]

点击 Go to line，输入行号 200，则会自动定位到当前文件的200行位置

![format_png 17][]

点击 Go to definition，会看到当前文件的所有函数列表

![format_png 18][]

根据函数列表进行过滤找到自己要查的函数，点击后即会跳到对应的位置，比如选择了 queryParse

![format_png 19][]

**总结**：新版的查找能力比旧版的有所增加，进行了功能突出，增加了行号定位和函数定位功能

旧版的 GitHub 仓库页面承载着开发者们满满的回忆，不过新版的也很值得期待呢！

![format_png 20][] 来一波回忆杀 ![format_png 21][] 我觉得我画的还挺像

\---

爱分享，爱开源，**GitHubPorn** 现已正式上线！专注于为大家分享优质的计算机学习资源与开发者工具。

如果今天的推荐符合你的口味，请在文章点赞，以表示对我的支持，你们的点赞和转发关注，是我持续更新的动力^\_^

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9vdzZwcnpadVBJRU5iMG01aWF3dXRJZjkwTjJVYjNkY1B1UDJLWEhKdmFSMUZ2MkZuaWNUdU95M0tjSHVJRUpiZDlsVXlPaWJlWHFXOHRFaG9KR0w5OHFPdy82NDA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9ENjdwZWNlaWJlSVRjaENhSzV1anZnOXBlWnRVc2FmTnRpY0laU29GUkFYWWwxaWJ6ckxlb2JoeHhNNEhBNWdPM2liV3EzbWlid2lhTVR2dm1MZmVtZldDSElQdy82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT2xKNHg5RHU3T0JoTmNHWXpGcFF6N05OZ2QwdWdma3FDN2lhMDZkbm5QMlFVaWFpYm1Yd3RHWkppYVEvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT1ExTDJCSllaUVBwZk54cE1nUEdEMjNZYldpYzRHV2FINFVibFJER3NpY0hjemxNdDdUb1RISUp3LzY0MA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT3pTZ1RLZEFOakNNZVFMSTVzZWJvdUFjdEZoYW02c3FZWktpYlBZcVNlY3FKN3lFR3RyMFJ0MlEvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT1ZubnZseUZFYWNpYmV4YWFPSEVtTGlheG5ITzdtbUx0YmpvQ0E2TUxPME55dGliZnFpYXZpYjViUWh3LzY0MA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT1hISkFhTGtuOTJkQXJvdUxCaWE4bTM5RlRzSHV4NkhHS214ZE5EQ1RrN0MwZmxQYXVkZHI2TWcvNjQw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT3hwOGVXeGs2R29EZmVOYmR6WHlWaWJJSGlhQ3JpYkZDYU9odzh2dDVVNTlpYTNMVEIxMWdvQ0dFWlEvNjQw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT2R3OEJ3aWFRRnZ1RmljVWhHOThkbmM4SENDZnU3eXJLblVxc09hNnU5aWMxaDhjbTM3bTJyNGtMdy82NDA?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT2libGFFNmljM2lhR3Vvd0dwemtpY1FzcWZmUTV1OFFBaEJ5aWJNR0d0STNzR2p3RXBsSDk5a21pY3lJZy82NDA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT2JpY0FtVzhyWXF1cGpxYXRIYUZNUnMwQW1WVWRkUlFuaWNKcUJRbGFld2xqcnEzU2FFWVpwYXFRLzY0MA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT1I5dTJqSWJjdkVFOWNpY1BweE5ISzhwQThZYkdGeDViRXppYnRyeXBBSERJOGliMUluVWtPd1hZQS82NDA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT0Fla1FQYUdVZzN6c0tYc29FNXFQQjc5YURqUWJpYTdxNXFXVU1DdGhSZmZiaEd1MDJUdTlyM2cvNjQw?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT2lhUDBHN0M1d0M2Z25CN3RSdHBLOXJCc3NCczlJMFNrME9OV0NTZmlicUdRTEpDSWlhbk1aV1pKZy82NDA?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT0hHZzNPcWljQ1p3NmFHUWlickxidzlEa0NRZFgwclM3b05WU3lHMk1IM2YzcXh0OGdFNXJtUUlnLzY0MA?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT0x0RFpLUERaTHhmaWJrcmhPc0RGeUthMUtBTzQ3Y1NTUUtlRFE0cHlDRUd3aWNyS0tteUdQTmhnLzY0MA?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT0NhT2xQTjd5OHl1dmVod0FtNnhsd1Uxd3hpYVROWjV4WDRiQUVVVWlhM1dWWGNrc29DQlN4VDN3LzY0MA?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT0FTNUVDTlA1QmxIRlRtdTRvVjM0M1pEWkx0YWliWWVZTEZMbUFHdmJoNW9XRmp1RXFkNkdvTFEvNjQw?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT0RFTkFPR2lhN00zWENWbjRDSGdDaHh4VFJZaEE4Sk9YTGU2QndIM2tlNEw1V0UzUHBVbGVQcGcvNjQw?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT3FSTks2aE5OSDVvdFo2UGU1ZktORWtPck9VUENkamtuYVZ6M21udEZaZklrRXRiRWFUZWppYmcvNjQw?x-oss-process=image/format,png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQT3RNUVZqaWExMlAzVkhTQzdOUEZqSmdJR2liaGljV3l6TURWaWJibWZBYlNhaWNPdXpxaWFreUhrSmFzQS82NDA?x-oss-process=image/format,png
[format_png 21]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9hcnc4QnNBanpYclZRMjRrcngwWm81NVBmZUhrZ3hQTzRhaWNSSHFINW1mSHBnNndCdDdZSW1xU0ppYzYwbUt5Y0dhQUphQTRpYmFuZUdrazh4TGljbVBpYWd3LzY0MA?x-oss-process=image/format,png