背景
GitHub
是全球最大的代码托管平台,在工作中或者学习中经常会用到该网站去浏览代码、下载代码或者托管代码。当然国内也有很多很多类似的平台如码云Gitee
、Coding
等、甚至工作中处于安全性考虑都会自己搭建git
环境,比如本地GitLab
等,但是GitHub
的地位是无法撼动的。基本上所有的开源框架都会将代码发布到GitHub
上供开发者去使用,并且收集bug以及交换意见等。
抛开国内访问慢甚至有时打不开这个大环境因素,日常在使用GitHub
中最大的痛点就是不能像我们平时开发使用IDE
一样,根据文件夹或者包去一层一层展开,先观察包/类等,再去点击某一文件,最终将文件内容展示出来。GitHub
只能一次一次点击包,每一次点击都会发起请求,将子包的内容在展示出来,比较麻烦,也比较好使,对于开发人员来说比较不友好。
而Octotree
的出现可以很好的解决这个问题。
介绍
Octotree
是一款浏览器插件,可以按照树状图的方式为我们展示某一项目的结构,以及提供了快速搜索、变更预览等功能。
Octotree
官网为octotree.io,在记录这篇文章时,是支持五款常用浏览器的,分别为Chrome
、Firefox
、Opera
、Edge
以及Safari
。
安装之后浏览GitHub
的效果如下图所示
可以看到,就如同我们的IDE
一样,可以在左侧有一个树形的结构,我们可以展开、关闭某一包,也可以点击类,这时才会真正发起请求,GitHub
把其相关内容展示出来。
主要功能
Octotree
有很多很棒的功能,包括但不限于
- 类
IDE
的树型方式浏览项目结构 - 快速搜索包/类
- 20+款好看的主题皮肤
- 自定义快捷键
- 文件内容变更行数预览
- 书签功能,存储感兴趣的文件链接
- 更改
GitHub
的文字样式以及大小
具体使用方式请参照使用方式
章节。
安装方法
1. 在线安装
官网只介绍了在线安装,点击想要安装的浏览器版本,相应的点击后续操作即可,非常简单。
由于国内无法访问Google
,也就无法访问Google Web Store
来安装了,这里简单介绍一下Microsoft Edge
的在线安装。
首先打开Edge
浏览器,进入官网,点击Edge
浏览器Logo。
在弹出的应用市场界面中点击右上角GET
弹出的提示框中点击添加扩展,等待安装完成即可。
2. 离线安装
相信我们平时开发使用最多的是Chrome
,而偏偏国内无法访问谷歌的相关网站,所以只能采取离线安装的方式。
2.1 下载插件
Chrome
插件的扩展名为.crx
,我们可以通过crxdl.com来下载该插件。打开该网址,搜索框中输入octotree
,点击搜索。
找到最新版本,点击下载
也可以通过上传的资源0积分下载该插件:点击下载
2.2 安装插件
点击Chrome
的右上方的扩展程序
按钮->管理扩展程序
(不同浏览器版本可能不同)
或点击右上方...
->更多工具
->扩展程序
将解压后的.crx
插件拖拽至该扩展程序页面
点击继续
在弹出的窗口中点击添加扩展程序,安装完毕
使用方式
⭐️表示这个功能很好用
以下这些功能有些是收费的,具体区别参考免费版与收费版的区别
章节。默认情况下可以体验15天Pro
版本。
1. 免登录可使用
以下几个功能无需登陆Octotree
就可以使用
1.1 ⭐️树形结构展示
安装成功之后需要关闭浏览器重新启动,之后访问GitHub
随便找一个项目如Spring Framework
看效果
可以看到左侧已经有树形菜单了,我们可以更方便的去浏览整个项目
1.2 ⭐️固定窗口
默认情况下左侧树型菜单是隐藏的,会有一个小浮动窗口在左侧,鼠标移上去之后才会将菜单展现出来
如果想一直显示,那么可以点击Octotree
的菜单中的设置按钮旁的Pin The Bar
即可
1.3 ⭐️主题皮肤
超好用的功能,玩游戏的时候舍不得钱去买一个好看的皮肤,那就在其他地方换上喜欢的皮肤吧❤️。
GitHub
目前自带了四款经典皮肤,白色主题,夜晚模式主题也都有,如果都不满意的话,Octotree
提供了20多款好看的皮肤可供选择。但是这是专业版才有的,默认刚登入的话是有15天试用期,试用期之后就只有一个皮肤
点击Octotree
窗体下方的Change color theme
进行选择。
1.4 调整菜单显示页面
默认情况下Octotree
窗体不是在所有页面中显示的,只在Code
页面中显示,比如点击Issues
或者其他页签,就不会显示了。
如果想调整,可以调整Octotree
设置中的Show in
,一共有四个选项
- Code & pulls
- Code
- Pull Request
- All Pages
1.5 快捷键
在设置中可以添加/修改Hotkeys
,来快捷呼出Octotree
窗体。如我这里添加了alt + x
,就可以实现快速打开/关闭窗体了。
1.6 更改Octotree
窗体位置
默认情况下Octotree
窗体会在浏览器左侧出现,可以切换在左侧还是在右侧出现
2. 登录可使用
以下几个功能需要登陆Octotree
方可使用。
点击Octotree
的设置,点击Login with Github
如果已经登陆GitHub
,就会自动登陆,否则就需要输入账号密码了。
登陆之后我们可以看Octotree
窗体中的内容变多了
2.1 ⭐️文件搜索
可以根据文件名去搜索,有点类似于IDEA
中的双击shift
在Octotree
结构窗口中点击右上方放大镜search
按钮
在弹出的输入框中输入我们想要搜索的文件,如我想搜索ApplicationContext
,就会把包含这个名称的包和文件全部列出来
也支持快捷键来弹出输入框,默认为↑ + s
,如热键冲突可以根据需要进行修改
2.2 全部展开/收缩
点击右上方展开收缩按钮即可,注意如果文件过多,可能会卡
2.3 懒加载
如果开启,那么树形菜单默认初始只加载最开始的根菜单,点击某一个包之后才会一点一点去加载,可以提升初次加载速度,个人感觉用处不大。
2.4 预览Pull Request
可以在不关闭当前页面浏览代码的基础上进行PR预览,个人感觉用处不大
2.5 ⭐️书签
这个功能非常好用,提供了类似浏览器的收藏功能。
比如浏览一个类的内容,想收藏该文件链接方便下次浏览,就可以点击该文件旁的书签🔖按钮。
当然也可以收藏项目,这点与star
类似
收藏之后就可以在Octotree
的书签🔖中查看
可以看到还有过滤、搜索以及删除功能
2.6 ⭐️调整字体以及图标
可以在设置中的Code Font
中设置喜欢的字体以及调整字体大小
免费版与收费版的区别
上述的功能很强大,有些也很实用,但是有一些是收费的,或者有限制,具体如下:
总结
Octotree
可以更好的帮助我们去使用GitHub
,我在写这篇文章的时候也是刚接触到这个插件,刚上手就玩了好久。虽然有些功能都是收费的,但是免费情况下也不影响核心功能的使用,真的是笔者感觉为数不多的神器之一,也强烈推荐给大家使用。