超链接管理面板使用方法

我做了个超链接管理面板，终于告别书签混乱了！

作为一个经常需要收集各种资料的人，我的浏览器书签早就乱成一团了。每次想找到之前保存过的链接都要花很多时间，有时候还找不到。后来就自己做了个超链接管理面板，用了一段时间，效果非常不错，分享给大家。

效果预览：https://dev-coco.github.io/other/Link-Panel/?sheet=1CN0aH8199EOrY1LNuEPGvDCNjai-HJre5fM6Cx2E1zk

功能介绍

为什么要做这个工具？

一开始我也尝试过使用其它的书签管理工具，但总是有不太符合我需求的问题：

有些工具功能太复杂，学习成本高。
有些界面太丑，或者太花哨，看着就不想用。
有些不支持多人协作，团队维护麻烦。
有些搜索功能不够完善，比较难搜索到需要的内容。

这个工具有什么特别的？

用表情符号做分类，一眼就能找到。

我最满意的就是这个分类设计。每个分类都用表情符号标识。

这样设计的好处是，即使链接很多，也能快速定位到想要的分类。而且右边还会显示每个分类有多少个链接的数量。

在顶部有菜单分类，点击菜单分类后，就会只显示指定的菜单，可以缩小范围，更方便的找到需要的内容。

搜索功能

支持多关键词搜索，比如输入“表格函数” 就能找到所有表格和函数相关的内容。而且搜索是实时的，打字的时候结果就出来了。

还有个小细节，点击搜索框的时候会出现一个下拉菜单，显示所有的子分类，可以快速筛选出某个子分类的链接。

界面简洁但不简单

我不喜欢太花哨的功能，所以整体设计是极简风格。每个链接用卡片形式展示，信息一目了然：

左边是分类图标
中间是链接的标题
下面显示分类和子分类信息

在手机上看的时候会自动调整为单列布局，完全不用担心适配问题。

团队协作方便

链接全部存放在 Google Sheets 里，格式简单。添加新链接只需要在表格里加一行就可以了，刷新页面立马就能看到。团队成员都可以同时维护。

而且 Google Sheets 有版本历史功能，如果勿删了还可以恢复历史数据，这点比传统书签强太多了。

详细设置教程

新建表格
- 打开 Google Sheets，创建一个新的空白表格。表格名称命名为「清单」。
设置内容
- 在表格的 A 列填写分类，可以在开头添加一个表情符号。
  - 这是可选项，但是强烈建议在开头添加表情符号，这样会让分类看起来更直观。
- 在 B 列填写子分类，用来在搜索的下拉菜单里快速筛选。
  - 子分类建议精简，不要有太多分类，否则会在搜索的下来菜单里面显示出很多的分类，反而会不便于筛选。
- 在 C 列填写标题。
- 在 D 列填写表格链接。

设置表格权限
- 表格的访问权限至少需要设置查看者的权限，这样才可以获取表格里的内容。

设置链接
- 在下面的链接参数后面加上表格的 ID，打开后即可使用。
- https://dev-coco.github.io/other/Link-Panel/?sheet=表格ID

进阶功能

换行

默认情况下，一行以 3 个卡片形式排版。如果想间隔开，如下图的效果：

可以在表格的 A 列写上类型，在 D 列写上换行，就可以自动补全空白卡片换行。

运行代码

在 D 列可以放入 JavaScript 代码，格式必须以 javascript: 开头，代码必须压缩成一行。

例如，我想把剪切板里面的内容的表情符号全部都去掉。那就可以把下面的代码放在表格的 D 列。

javascript:(async()=>{let a=await navigator.clipboard.readText(),e=a.replace(/(\p{Emoji_Presentation}|\p{Emoji}\uFE0F)/gu,"");await navigator.clipboard.writeText(e).then(()=>alert("完成")).catch(()=>alert("格式化失败"))})();

点击后，即可运行 JavaScript 代码。