Part1用Vue3.0 开发一款导入浏览器书签的在线书签 介绍（取名）
【红隼书签】是一款简洁的在线书签导航网站 。名字的由来其实是，本着保护动物，爱护动物的初心，想到起一个鸟类的名称，其实最开始想了很多名字，小詹书签，麻雀书签等 。
但是听起来都不够响亮 。后来想了一个食肉的，有点凶猛的又有点呆萌的鸟类的名字，红隼【英文翻译：】，点个赞 。于是就有了这个名字啦，但是听起来也是不错的 。于是开发计划开始啦 。
数据来源（印象中文）
他的默认数据为我选的是印象中文的web导航数据；其实我自己哪里收藏了更多的导航数据，但是很多设计到公司的一些访问网站 。想想还是算了，于是就用了印象中文的数据 。它可以修改数据；全局搜索筛选功能；单页面完成逻辑非常简单，新手小白也能完成二次修改开发；采用插件完成背景动画；可选择更多动画效果；炫酷光晕背景动画效果 。
功能/特色
（炫酷光晕背景动画效果，可导入浏览器数据存入）
正在开发的功能自定义导入数据
可以将浏览器的书签导出，然后导入到书签系统中 。也可以将书签系统的数据导入到浏览器中 。
存储
【Part1用Vue3.0 开发一款导入浏览器书签的在线书签】数据到云端 。只需注册登录即可，后续无需担心数据丢失问题 。
?主题
目前提供 清晰/暗黑两种主题 。后续还会增加更多的主题效果 。
暗黑
清新明亮
网址书签
========??? 红隼书签 注意：本项目会持续新增功能，但持续维护 。如使用中发现问题，请留言或者提交 issue。谢谢！！！
安装步骤效果
源码地址
完全开源，大家可以随意研究，二次开发 。当然还是十分欢迎大家点个Star???
源码链接(gitee) 源码链接()
项目结构
├── src ├── Api// 存放接口│└──common.js// leancloud-storage公共接口函数封装│└──user.js// leancloud-storage 登录、登出接口├── assets// 存放静态资源│└──Json// 静态数据源json数据│└──svg// 工具栏图标├── components//存放组件│└──Dialog.vue// 新增、修改书签│└──Login.vue// 登录弹窗├── APP.vue└── main.js
项目图标（后续支持修改图标）
红隼书签使用了的是图标,设计的小姐姐是是半夏鸭,设计的图标太棒了，在此表示感谢 。?( ′???` )
很喜欢这个图标的；
?小姐姐的图标作品集地址图标作品集地址
主要功能函数–1、解析浏览器书签为JSON数据
export function walkBookmarksTree(root) {const result = []// 深度优先遍历const walk = (node, list) => {const els = node.childrenif (els && els.length > 0) {for (let i = 0; i < els.length; i++) {const item = els[i]// p标签或h3标签直接跳过if (item.tagName === 'P' || item.tagName === 'H3') {continue}// 文件夹不用创建元素if (item.tagName === 'DL') {walk(els[i], list)} else { // DT节点let child = null// 判断是否是文件夹const children = item.childrenlet isDir = falsefor (let j = 0; j < children.length; j++) {if (children[j].tagName === 'H3' || children[j].tagName === 'DL') {isDir = true}}// 文件夹if (isDir) {child = {type: item.tagName === 'DT' ? item.querySelector('h3') ? item.querySelector('h3').innerText : '' : '',folder: true,children: []}walk(els[i], child.children)} else { // 书签const _item = item.querySelector('a')if (_item) {child = {title: _item?.innerText,url: _item?.href}}}child && list.push(child)}}}}walk(root, result)//过滤不为 folder的书签，保证书签能够识别const myBookmark = result.filter(v => v.folder)return flagBrowerList(myBookmark)}