我给自己搭建的前端导航网站,你们都别用🤪

11,319 阅读5分钟

💥 想法来源

6.26更新:本站已用nuxt3重构:🚨 踩坑记录:nuxt3 - ssg 重构我的前端导航网站

前段时间在工作的时候,因为遇到了一些之前没了解过的知识,所以化身百度cv工程师,上网冲浪寻找灵感(找源码copy🐶)。但是网上有好多重复或者低质量的文章,严重影响了我的cv效率。

此时,一些埋藏了两年半的想法涌上心头🧐:

场景1: 平时在工作中要用到新知识的时候,需要上网找教程文档,但是看官方文档又比较费时间,常常是先找个网文教程跟着做,出了bug才会看官方文档寻找原因。

那么问题来了,一般我们寻找到优质的教程网文后,常常会收藏起来以后备用,但是以后真的会用吗?😅现实是很多情况下,因为收藏的文章太多,以后再用到这个技术时,常常会懒得去翻收藏夹找对应的文章,而是重新去百度搜索💩(优质网文:家人们谁懂啊,遇到个下头男,收藏了我却从来没宠幸过我🤡)

image.png

场景2: 对于一些类似于vite,typescript,eslint,.prettier等这种需要配置一些配置项的工具,应该很少有人会背他们有哪些配置项吧🤭(我是个low low的前端崽😭反正我是从来没记忆过),配置项这东西是:想配置一个规则时,又不知道叫啥,搜索都无从下手,看官方API 文档又太费时间,又或者随便照抄别人都配置,却不知道每个配置项的作用,导致存在一些隐患。

那么问题来了,为什么官方的 API [ 更全面、更准确 ],我却不愿意看呢,因为[ 太分散,太深入 ]。现实是工作中需要配置这些规则时,常常也是百度搜索对应的配置详解,因为他们[ 更直观,更方便 ]。如下图,还是挺多人这么搜的😀

截屏2023-05-31 上午10.18.52.png

先来说明一下导航网站是做什么的:在导航网站上,你可以轻松发现非常多实用、或具有创意的资源,不用再去靠自己的实践积累这些资源。导航网站的资源常常有:实用的开发工具、优质的网站、优质的文章、各种框架的官网入口、优质的技术博客等。

场景3: 我之前也收藏了几个好用的导航网站,确实很好用🤓但是对于我来说,也发现很多不方便的地方。

  • 比如大部分导航网站面向的用户群体都是程序员,而不是前端程序员,这样的网站上对于我们前端来说就会有很多“无用”的资源(当然肯定也有导航网站是面向前端的,只不过我没接触到🥺);
  • 又比如很多导航网站逐步迭代了很多功能,已经不单单是一个导航网站,体量太大,用起来感觉不清爽;
  • 再比如很多导航网站把所有资源都放在同一个页面,只是用菜单项区分开,我感觉也是有点混乱,技术类的,文档类的,休闲放松类的我觉得分开比较合适🧐
image.png

总结: 既然这样,那我就利用这个周末自己搭建个网站,提炼一些好的资源放上去,方便自己以后查阅 😀

💪 开整

闲言碎语不要讲,直接进入正题,我打算将我的导航网站分为五个模块:
工具、文档、游戏、摸鱼、案例

下面一个一个来介绍:

【工具】

工具菜单是收录一些实用、可以提高开发效率的工具。目前分为以下几种(我按可能用到的频率来排序):

  • 常用工具:一些零散不好归类的,实用的工具;
  • 图片处理:提供图片压缩,图片裁剪,生成精灵图,在线ps等处理图片等工具;
  • css工具:在写样式的时候,一些精致的样式调试起来太费劲,这里提供一些工具在线调试css,比如在线生成网格布局等;
  • UI灵感:没有设计,自己空想样式真的好难🤧
  • 图标:一些免费的图标字体库;
  • chrome插件:好用的chrome插件,谁用谁知道~
  • vscode插件:前端必备vscode插件

image.png

【文档】

文档菜单主打的就是简洁(我寻思都来查文档了,应该知道这个东西是干什么的,没必要写那些繁琐的描述)。

除了没有描述之外,它与其他导航网站不同的特点是,每个库都提供了官方文档相关文档两种(相关文档也就是网文教程),提供更多的查阅渠道,完美解决了上文情况1,2中的问题,奶丝🥳。

ps: 因为刚搭建好网站,大部分文档目前都是只提供了官方文档的入口😂,以后会陆续将以前收藏的网文链接或者精选一些好文挂上去~

image.png image.png

【游戏】

游戏菜单不过多介绍,把游戏单独拆出来,不要影响我们查找有用的工具👻 image.png

【摸鱼】

摸鱼菜单收录了一些有趣的,有创意的网站,以后会陆续收录一些免费视频、音乐、或其他资源的网站。

image.png

【样例】

样例菜单目前还没开发,准备留着以后放置一些自己写的小demo,又或者是一些例如three.js的3d案例等。

🍎 成果

先贴上网站地址: 前端助手传送门
源码地址

6.26更新:本站已用nuxt3重构:🚨 踩坑记录:nuxt3 - ssg 重构我的前端导航网站

目前网站刚刚搭建,很多东西都不完善,但是也能将就用了,以后慢慢维护,如果大家有什么好的网站或文章可以在评论区告诉我或者在gitee上提issues 😘😘😘(ps: 本网站是部署在gitee pages上的,代码开源)