0成本快速搭建一个属于自己的书签导航页
AI内容警告本文使用了AI润色(仅第一个标题前的内容),更多内容请看文章内容说明
您是否曾对杂乱无章的浏览器书签感到烦恼？现在，有了一个全新的解决方案！
书签导航页 是一个能将您平平无奇的书签文件（bookmarks.html）一键转换成一个设计精美、响应迅速、功能强大的个人导航中心的开源项目。此外还支持了搜索功能,目的是能够作为一个起始页来使用。
同时还有嵌套功能,能够展示子搜索引擎菜单,将同类搜索引擎合并减少占位空间
网页预览:部署在vercel
部署
准备
IMPORTANT
- 你需要有一个GitHub账户
- 一个能部署静态网页平台的账户(例如 Vercel, Netlify, Cloudflare Pages等)
快速开始
打开 https://github.com/cmyyx/bookmark-navigator ,右上角 fork 此仓库
如果你有Git,可以在fork完后git clone你
fork的仓库到你本地,修改更方便
从你的浏览器导出书签,并替换仓库根目录下的 bookmarks.html ,保存并提交即可
以Vercel为例(Netlify 操作类似),进入 Vercel ,点击右上角按钮 Add New... ,选择 Project ;
如果你还没有绑定GitHub账户先绑定,随后在 Import Git Repository 的列表中找到你fork的仓库(如果你没有修改名称那就是bookmark-navigator),点击右侧Import ,展开Build and Output Settings,Build Command和Output Directory右侧有两个修改图标,选中(否则无法修改)
在Build Command中填入npm run build,Output Directory中填入dist;然后点击Deploy即可;
等待部署完成后点击Continue to Dashboard,Domains下方的域名就是你的网站了,点击即可访问
如果你拥有自己的域名,可以在设置中找到
Domains进行绑定
自定义
config.json
"background": { "fallback": "assets/background.webp", <-- 如果你需要自定义背景,请修改此路径为你的背景路径或替换此背景文件 "api": { "enabled": false, <-- 如果你需要通过API获取背景,请先修改此项为`true` "url": "" <-- 然后修改这里的url }"searchEngines": { "bookmark": { <-- ID,不能重复 "name": "书签", <-- 显示名称 "url": null, "icon": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWJvb2ttYXJrIj48cGF0aCBkPSJtMTkgMjEtNy01LTcgNVY1YTIgMiAwIDAgMSAyLTJoMTBhMiAyIDAgMCAxIDIgMnoiLz48L3N2Zz4=" }, "google": { "name": "Google", "url": "https://www.google.com/search?q={query}", "icon": "", <-- 图标链接,可留空(会尝试获取URL域名的图标) "engines": { <-- 嵌套,可以创建子搜索引擎 "luxirty": { "name": "Luxirty", "url": "http://search.luxirty.com/search?q={query}", "icon": "" } } } }"buildSettings": { "_comment": "高级构建设置。警告：修改这些值可能会导致构建失败或性能问题。如果不了解，请保持默认值。", "concurrentRequests": 50, <-- 获取网站图标时的并发数量 "maxIconSizeBytes": 5242880, <-- 网站图标大小限制 "allowedIconContentTypes": [ <-- 定义哪些类型的图片可以被接受为图标 "image/x-icon", "image/vnd.microsoft.icon", "image/png", "image/jpeg", "image/svg+xml", "image/gif", "image/webp" ] }修改字体
替换 src/assets 目录中的字体文件，并在 src/style.css 中更新字体名称。
修改默认图标
替换 src/assets/placeholder_icon.svg 文件来修改网站的默认占位符图标。
赞助支持
如果这篇文章对你有帮助，欢迎赞助支持！
部分内容可能已过时