无论你是在日常开发还是在平时网上冲浪时，都会接触到一大堆的网站，平时我们都是直接把它收藏起来作为书签栏。
但是这种方式随着你收藏的网站越来越多，就会导致很臃肿，且不好寻找，那么这篇文章我们就来探讨以下如何解决这个问题。
书签栏导出
用谷歌浏览器为例，在我们的页面上可能会有很多收藏的网站：
在这里，我们可以通过 书签栏管理 这个页面里对其进行导出，生成一个 HTML 文件：
最终生成的 HTML 文件中，关键内容主要有以下几个：
它分别是：
- HREF：网站地址
- ICON：网站的 ico 图标
- 你收藏的命名
根据 HTML 文件自动生成变量
这文件的内容这么多，我们总不能一个一个输入吧，接下来我们使用 NodeJs 编写一个工具函数，如下代码所示：
js
const fs = require("fs");
const fileContent = fs.readFileSync("./index.html", "utf8");
const pattern = /<DT><A HREF="(.*?)"[^>]* ICON="(.*?)">(.*?)<\/A>/g;
const matches = fileContent.matchAll(pattern);
const results = [];
for (const match of matches) {
const href = match[1];
const icon = match[2];
const name = match[3];
// 生成 JSON 对象并添加到结果数组
const result = {
href,
icon,
name,
};
results.push(result);
}
const jsonResult = JSON.stringify(results, null, 4);
const content = `
const bookmark = ${jsonResult};
`;
fs.writeFileSync("./index.ts", content);这段代码的主要功能是从一个 HTML 文件中提取书签信息，然后将这些信息以 JSON 格式写入一个名为 index.ts 的文件中，以便后续的使用。提取的信息包括书签的链接、图标和名称。这可以用于自动化处理书签数据或将书签数据导出到其他应用程序中。
在终端中执行以下代码，我们要的内容就输出了：
emmmmm，至于怎么编写一个网站我就不说了吧，有了这些内容，你把用 html 文件编写都是可以的。
部署上线
由于最近在学 nextJs，所以我使用的是 nextJs 编写的，我就将其上传到了 Vercel 了。
在此之前，你首先需要讲代码上传到 Github 仓库，并在 Vercel 登录该账号。
关联相对应的仓库
并设置相对应的信息：
最后点击 Deploy 即可，这时候，当你每次在 GitHub 上提交代码的时候都会自动化部署，以更新你的线上网站。
总结
通过这种方式来管理你的书签栏，你也可以扩展一些其他的功能，可以直接替换掉浏览器的首页了。
这是我瞎鸡儿搞的一个项目，这里对接了掘金上面的接口，获取到了个人的文章已经热门前 50 篇的文章。
