以前我要打开网页通常是先打开浏览器，进入edge自己的导航页，然后点击搜索栏下方的最近使用。
因为最近使用会根据点击频率动态排序，所有经常需要多看两眼才能知道自己要点击的链接是哪一个。
随后我找了一些比较热门的导航页，试用了一下，发现他们大多分为两类：
- 功能聚合式导航
- 门户网站
功能聚合式导航
通常来说，我们使用导航页式都是为了更快速地到达网页，而通常来说，最常用的站点类型就是内容型与工具型。
因此功能聚合式的导航就将这两类站点做了聚合，例如 iTab，将工具做进了组件中，并将其展示在面板中。
通过组件与图标的方式，实现用户的目的。这种方式自定义程度高，并且功能多样，支持登录同步数据。
门户网站
门户网站是对站点的聚合，通常是对站点类型分类处理，并将一些常用数据（例如热点、股市）分布其中。
最经典的就是某123，几乎链接了绝大多数的常用站点。
分区域展示不同类型的信息，对于使用者而言很容易就能找到自己想要的内容或导航。
为什么我要写一个导航页
实际上，上述两者都是经过时间验证的导航模式，但是我需要的不仅仅是导航，更重要的是两点：
- 我需要的功能没有，需要等网站开发者或维护者更新。
- 网站都在别人那里，如果站点由于某些原因关闭了，我需要重新寻找并适应。
因此我决定做一个自定义程度高且可以无需服务器私有化部署的导航页。
开发
选型
既然需要无服务器的私有化部署，那么单页面应用就是目前最合适的方案。
因此网站框架我采用了VUE3 + VITE的组合。
另外为了自定义程度高，我使用了仪表盘式布局，使用了 Gridstack 最为面板方案，并使用了 ElementPlus 最为组件库。
展示
使用地址：一页
演示视频：B站演示视频
能力
仪表盘布局
Gridstack 支持网格布局，因此我将横向划分了48个列，以列长的一半作为高划分出栅格高度。
这样你就可以在网格中随意排列组件，组件大小也可以随意切换。
功能的组件化
将所有的功能都以组件的形式呈现，因此，你甚至可以在页面中安排多个搜索栏，用于搜索不同站点内容。
我放一个搜索栏进搜索引擎，一个用来专门在视频网站搜视频，不更方便。
没有你想要的组件？没关系，你只需要添加一个网页格子，在其中放上你的html代码，就可以在这里加载你自己的内容了。
搜索栏与快速链接
基本的导航功能就是搜索与链接。
搜索还是中规中矩，TAB和SHFIT+TAB进行搜索引擎切换，ENTER进行搜索。
快捷方式我加了一点小操作，拖动图标在任意位置释放，即可开启快切窗口打开。开启快切窗口的图标在点击时会重新弹出之前的快切窗口。
便签类工具
便签工具我做了两个，一个是支持Markdown输入的便签，一个是支持H5标签的文本框。
这样有样式需要就可以用文本框了（结合组件样式编辑可以实现更多想法）。
样式定制
为了让页面的定制化程度更高，我给每个组件都增加了样式编辑窗，只需要在编辑窗口中编写css样式，即可对此组件完成样式修改。
当然，这还不够。在操作栏中的全局样式可以让你对整个页面的样式进行定制，背景更换都是小意思，来点动画如何。
还是不够，我直接对全局样式进行标签处理，你可以编写数个标签，每个标签都拥有自己的样式内容，通过任意勾选样式标签来组合应用这些样式内容。暗黑模式和主题色都是过去式了，排列组合才是新时代。
工作区
独立的数据空间，我一个工作用的导航页，一个娱乐用的导航页，互不干扰。
每个工作区的所有数据都可以进行导入导出，让你可以快速迁移工作区，或是将工作区的数据分享给其他用户，让其他用户只需要一个配置文件即可完整复刻你的导航页。
极速部署
什么叫极速，你只需要将 一页 的项目进行fork，然后开启fork项目的Page就可以通过自己的page地址来访问自己的导航页了。
注意
导航页的所有数据均在浏览器中，请注意及时保存与备份。
