你可能还不知道，新版 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 排版