司徒的搞机生活 篇二：【炸裂】定制专属的导航页——手把手教小白搓代码【序】

哈哈哈，我胡汉三又来挖坑了~~~

首先要声明一下，哥们不是IT从业者，没有正经学过代码，就是折腾nas比较早，一步一步根据需求去学习，去运用。也许你会觉得，不就一个导航页么，人家几行代码就跑起来了，你至于还要开个系列教程么。

至于的。纯静态php代码，不需要数据库，但是没有后台。相应的，自由度超高，想怎么改怎么改。

之前有人怼过我，没有后台我三天两头添加书签难道没事就要去改代码么？
兄弟，导航页是放常用服务的，不是收藏书签用的，搞搞清楚好吧。常用的服务就那么些个。书签我收藏了两三千了，都放在导航页干啥？

加密首页+微软每日壁纸

加密首页+微软每日壁纸

登陆成功效果

登陆成功效果

登陆失败效果

登出效果

homepage

LOGO

搜索组件

日期组件

时钟组件

天气组件

popup组件其一

popup组件其二

手风琴式折叠

go to top

22年年底我发了一篇 司徒的搞机生活 篇一：NAS玩机十二年高玩——客制化个人导航页面 ，当时本来是考虑帮人做导航页卖钱的，但是定制化的东西无法复用，费时费力，算不上个好生意。就当，刷存在感吧，让小白们感叹一下，这小子挺牛，感觉也挺好。上面这篇文章下面还有一堆求教程的呢。我估计真心想学的也没几个人，也算自我总结吧。

这个缝合怪，我自认为组合在一起还是挺好看的。

所以这个系列
第一篇，做序；
第二篇，建站的准备工作 + 在线修改代码的工具（vscode-server）准备
第三篇，我也没那个本事从零手搓，先去拉别人的源码，介绍手机版电脑版的不同。
第四篇，开始每个组件一篇文章，介绍组件代码，修改什么代码能实现什么效果……

从那时候算起也一年多时间了，如果现在打分的话，22年底时候的效果我打70分，现在的话能到88分，还有12分是加载速度的优化。

想必各位从动图上（是的，22年底张大妈好像还不支持文章里插入动图）也能看出来，多了窗口 popup 跳出的功能。popup 功能我在 dokuwiki 上已经实现了两三年了，导航页上迟迟不能上马，主要还是没见过。没见过有人在导航页上用过，不知道怎么描述，不知道去问谁。

这不巧了不是，23年chatgpt火爆全世界，刚好遇到了启发我灵感的 sun-panel 项目。

23年底 sun-panel 项目发布的时候，起初只是被颜值吸引，安装使用了一下，突然发现添加在主页上的链接不止能在新标签打开，还能在原页面跳出窗口打开。于是去官方群问了下作者是怎么实现的。当时也没抱很大的期望吧，就是想了解一下，毕竟这几年流行的 typescript 项目还挺多的，怎么也搞不太明白，连部署都搞不太定。

跟作者断断续续交流了几天，了解到几个事实：
1、php代码可兼容；2、iframe效果；3、naive框架

那么，接下来就是问 chatgpt 怎么实现了。

所以，要学会用ai啊铁子们！

作者声明本文无利益相关，欢迎值友理性交流，和谐讨论～