小刘BOT

再见了百度!我用AI手搓了自己的专属网址导航页

有个有点难以启齿的事儿。

其实我十几年来一直在用百度首页的导航功能,就是这玩意儿:

图片来自网络

因为hao123太花里胡哨了,而且我又是老贴吧用户,用百度的导航确实方便些。多年用下来积攒了一百多网站收藏,迁移成本太高了,所以就算后来在NAS里就可以通过Docker部署很多不错的导航应用,就算百度在导航板块强制塞了一堆我根本不想看的垃圾新闻和百家号,只要不影响使用,忍也就忍了。

但最近百度不知道又抽的哪门子风,来了个改版,整个导航模块变窄了,一行只能显示6个图标,留下偌大的空白区域显示无意义的背景图,这下我100多个网站直接堆成好几屏。

就很离谱

开始我还以为是哪里设置出了问题,然而找了半天都没找到,到网上搜索了一下,骂的还真不少。

真的太没谱儿了

这次我决定不再坐以待毙了。

不然鬼知道百度的**设计师还能整出什么幺蛾子。

放弃百度,换一个新的导航网站。

其实之前并非没有替代。

但真的是这些年下来积攒的导航网站太多了,一个一个重新录入迁移,想想都费劲。

但今时不同往日,AI的时代我们可以用AI的方法来搞定以前搞不定的问题。

首先,我们可以通过AI把原来的导航分类和网站提取出来。

免费的DeepSeek-R1就能完成这件事儿:

在百度的导航版块右键—检查,

然后把整个版块的前端代码全都复制下来。

只需要告诉AI,这是一个导航页的前端代码,请帮我提取出其中的分类、网站名称和网址,

他就能自动把里面网站的分类、名称、链接都提取出来。

接下来就可以让AI来完成这个导航页面。

可以在Chat工具里完成:

推荐使用Claude,它可以在Artifacts反复修改和调整,并且支持预览。

需要修改,直接继续聊就可以了。

后端的实现也是一样通过聊天生成代码即可。

特别提醒,如果跟我一样没什么代码基础,建议要求它用Python或者PHP这类相对好部署的方式实现。

但Chat工具总是需要复制粘贴的,还要到处找代码的位置,比较麻烦。追求自动化程度更高一些的方案,也可以使用AI编程工具来完成:

如果追求极致性价比,可以使用VS Code(其实Cursor就行)配合Roo Code或者Cline插件,接入DeepSeek的API,写简单的页面足以胜任。

使用方法跟直接使用Chat工具一样,就是对话。

我是直接通过Cursor完成的,Cursor的Composer功能同样可以自动跨文件编写代码和Debug,并且使用的是我非常熟悉的Claude 3.5 Sonnet模型。

甚至在开发过程中,我还让它写了一个小工具把我十多年积累的150多个网站全部ping+发送http请求了一遍,排除了十几个已经失效的网站。

最终的效果如图所示:

  • 我把它放在了我自己的阿里云服务器上(准确说是直接SSH到云服务器上生成的代码),并绑定了自己的域名。
  • 它被设计成了一个让我比较满意的宽度,同时在小屏设备上也可以自适应。
  • 清理失效网站的同时,重新做了分类。
  • 加入了简单的后端,把原有百度导航的网站迁移过来后,支持编辑和继续添加新网站,以及拖动排版。(我的后端没有使用数据库,只是用了一个简单的python文件存储这些网站,所以我也可以到服务器后台编辑这个文件来实现修改和排版。)
  • 加入了时间日期、天气功能,以及3大搜索引擎的快捷搜索框。
  • 加入了NAS和AI的二级聚合页入口,点击以后分别可以打开我部署在NAS上的Docker应用和我常用的AI工具。
  • 加入了一个自动保存的便签框。这样我在多台Windows、Mac和移动设备之间复制粘贴文本的时候,再也不用跟时灵时不灵的微信输入法生气,也不用登录多个微信、QQ,只要粘贴到这个框里,另一台设备打开浏览器首页就可以快速复制。

总之,勤快起来,跟百度导航说再见,舒坦了。