查看原文
其他

我做了个很帅的网站!

鱼皮 程序员鱼皮 2022-09-12

大家好,我是鱼皮,今天来分享一下我最新上线的作品~

相信大家都用过浏览器主页,在我小的时候,印象中的浏览器主页是这样的:

这类主页上有一堆无用的链接,看起来就很复杂,很多时候我都是被迫捆绑设置了这些主页。。。

后来,一些开发者看不下去了,做出了主打简洁的浏览器主页,比如下面这样,精简到只有一个输入框:

我当时觉得别人做的特别酷,于是自己也做过一个面向程序员的浏览器主页,代码也完全开源了,目前每天还有 2000 多名用户:

https://home.code-nav.cn

看上去这些浏览器主页已经很棒了、也已经非常精简了,但作为一名程序员,我总觉得它们还不够精简、不够帅、用起来还不够方便。

就拿我自己的使用习惯来说,像我在工作中经常要从不同网站去搜索内容,比如百度、Google、GitHub;有时还要用一些翻译啊、倒计时之类的小工具。这个时候我就要在不同网页中穿梭、跳转。

作为一个懒人,我不能接受这种麻烦。 所以我理想中的浏览器主页应该可以用最快捷的操作完成我常用的所有功能。

最好是我脑袋想到要搜索什么内容就能立刻打开网页哈哈,但是这个我实现不了。

那么除了脑控外,对于程序员来说,最快捷的操作是什么呢?

答案是:命令行!不需要任何鼠标操作,通过输入命令来操作网站、使用工具。

不过很可惜,现在网上并没有类似的网站。那咱就自己做一个吧!

于是,几个不眠之夜后,我一个人从 0 开始做出了这款真正极简的、极客范儿的浏览器主页 YuIndex !

如图,这里我仿了 Linux 终端的风格,程序员朋友是不是 DNA 动了呢~

指路:https://yuindex.com

感兴趣的同学可以看视频来了解~

视频:https://www.bilibili.com/video/BV19B4y1Y7m8/

功能介绍

在这个网页中,所有的操作都通过输入命令的方式来完成。

比如输入 help,可以查看所有支持命令。

快捷搜索

输入 search,可以看到系统会自动给出命令的提示,-f 可以指定搜索的平台,按下回车就完成了搜索。

当然这样肯定是很麻烦的,所以我给终端添加了 alias 别名功能。可以用更简单的命令,比如 baidu 鱼皮,或者 bili 鱼皮,再或者 github 搜项目等等。这样一来,不需要任何鼠标操作,就能从任意网站搜索内容。

类似的命令有 goto,可以让你快速跳转到指定的链接。

为了更快捷地操作,我开发了快捷键功能。和 Linux 终端一样,按 Ctrl + L 键可以清屏;按上下键可以切换历史命令。输入 history,就可以看到所有执行过的命令,使用 ! 就能重新执行某命令。

在 Linux 的小黑框里敲代码是比较枯燥的,我们不妨用 background 命令来切换一张好看的壁纸,只要输入图片地址即可。

或者输入 bg 就可以随机切换壁纸~

空间管理

有点类似网页收藏夹,这里我参考了 Linux 的文件系统,可以用命令来管理你的常用网站。

比如输入 add 命令添加网站,然后用 ls 命令可以查看所有已添加的网站,用 mv 命令可以移动网站、用 cd 命令可以切换目录、用 pwd 可以查看当前所在位置等等。然后配合 goto 命令可以快速访问。

后面我计划开发云端同步功能,你就可以跨设备地维护和共享自己添加的内容。

小工具

除了上面的基本功能外,这个网站最强大的能力就在于 —— 包容万物,我可以把所有实用的工具全部封装在小小的命令行里。目前网站的第一版只提供了一些简单的小工具,比如:

  • 输入 date 可以查看当前日期时间
  • 输入 todo 可以管理你的待办事项
  • 输入 fanyi + 要翻译的内容就可以快速得到结果,不用再跳到其他的翻译平台了
  • 输入 ping 可以检查某个网站是否还活着
  • 输入 timing 可以快速开启倒计时
  • 输入 ddos 可以攻击某个网站,额,不过我建议大家善良。

摸鱼

除了上面这些啊,我发现这个 web 终端很适合摸鱼。

  • 比如输入 music + 音乐名,就可以快速听音乐
  • 输入 moyu 就能玩小游戏
  • 输入某个视频编号就能内嵌观看

然后当你感觉老板快来的时候,你就按下 Ctrl + O 快捷键,瞬间所有内容都被折叠了,你可以装作认真敲命令,等老板走了,再按 Ctrl + O 展开。

支持折叠与展开


目前虽然这个项目支持的命令还不多,对大多数同学来说也并没有那么实用,但我之所以要花两周的时间去做它,首先是因为我自己的需求、并且觉得它很帅!还有就是之前没有做过类似的项目,纯当自学了~

不过我把这个程序设计地很利于扩展,用了命令模式、递归解析等设计,如下图:

系统设计图

理论上你可以把任何工具、任何功能集成进来,你甚至可以把自己的偶像封装进去!

这个代码我也完完整整地开源了,项目文档写得非常详细,下载代码后装个依赖就能运行,大家就可劲儿学、可劲儿造,可以在此基础上开发自己的 web 终端,也欢迎贡献更多新的命令~

开源:https://github.com/liyupi/yuindex

短短 3 天,我已经收到了 35 个 issues,并且合并了几个 PR,看来大家还是很积极贡献(报 Bug)的,谢谢朋友们。

之后我会继续添加更多实用的命令,争取把它打造成一个超级主页!

P.S. 我是一名后端程序员,也是第一次做这种东西,水平有限,大家觉得做的不好的地方,还请多多包涵。不喜勿喷,谢谢大家!



最后,晚上我会在自己的 编程学习圈子 里直播从 0 到 1 分享这个项目的创作历程、系统设计思路、前端 / 后端开发和源码解读,争取让所有同学都能把这个项目变成自己的、有能力二次开发并把这个项目写在简历上,我相信会比什么电商网站要亮眼一些~

感兴趣的同学欢迎加入我的学习圈子,圈子内可以 1 对 1 向我提问、获取原创的编程学习资料、编程知识库;并且每周跟着我的直播学做项目、提升编程能力、学习求职写简历的技巧等;星球也会定期邀请嘉宾来做直播分享(往期所有直播都有回放)。

扫描下方二维码领优惠券加入,加入 3 天内可以随时全额退款,所以哪怕你想白嫖一下资料也无可厚非,星球欢迎想进步的小伙伴~

点击下方阅读原文或访问 yupi.icu 网站可进一步了解星球

往期推荐

遗憾?自己来补!

什么?谷歌要革C++的命?

这四年一路走来都很值得!

还有设计模式这种东西嘛。。。

接口性能优化的 11 个技巧

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存