https://github.com/chuwuyo/chuwubookmarks
ChuwuBookmarks - A Bookmarks List Template Website - 初五的书签 - 这是一个书签导航静态网页模板
https://github.com/chuwuyo/chuwubookmarks
bookmarks browser chrome favorites html-css-javascript newtab template
Last synced: about 2 months ago
JSON representation
ChuwuBookmarks - A Bookmarks List Template Website - 初五的书签 - 这是一个书签导航静态网页模板
- Host: GitHub
- URL: https://github.com/chuwuyo/chuwubookmarks
- Owner: ChuwuYo
- License: mpl-2.0
- Created: 2025-01-13T06:37:57.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-10-04T19:19:35.000Z (about 2 months ago)
- Last Synced: 2025-10-04T20:34:48.081Z (about 2 months ago)
- Topics: bookmarks, browser, chrome, favorites, html-css-javascript, newtab, template
- Language: JavaScript
- Homepage: https://chuwubookmarks.netlify.app/
- Size: 33 MB
- Stars: 12
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
项目概述
[](https://deepwiki.com/ChuwuYo/ChuwuBookmarks)
---
这是一个基于浏览器的书签导航网页模板，旨在将JSON书签数据转换为一个美观且功能丰富的网页应用，支持多级文件夹、搜索、面包屑导航等。
中国大陆用户请尝试[Netlify](https://chuwubookmarks.netlify.app/)
非中国大陆可访问以下链接进行体验：
[CloudFlare](https://chuwubookmarks.pages.dev/)
[Vercel](https://chuwubookmarks.vercel.app/)
[Netlify](https://chuwubookmarks.netlify.app/)
[GithubPages](https://chuwuyo.github.io/ChuwuBookmarks/)
***
## 快速开始
1. **获取项目**：Fork 或克隆本仓库到本地
```bash
git clone https://github.com/ChuwuYo/ChuwuBookmarks.git
```
2. **导出书签**：使用 [BookmarksPortal](https://github.com/ChuwuYo/BookmarksPortal) 导出您的书签数据JSON文件
3. **替换文件**：将导出的书签文件重命名为 `bookmarks.json`，替换项目根目录下的同名文件
4. **部署使用**：将项目部署到您喜欢的静态网站托管服务（如 GitHub Pages、Vercel、Netlify、Cloudflare、Edgeone 等）
5. **SEO配置**（可选）：项目包含完整的SEO优化文件，部署时可根据需要修改以下文件中的配置：
- `index.html`：修改meta标签、canonical链接和结构化数据
- `sitemap.xml`：更新网站URL和最后修改日期
- `robots.txt`：调整爬虫规则和sitemap链接
- `manifest.json`：自定义PWA应用信息
- `structured-data.json`：结构化数据
- 所有配置文件都包含清晰的注释提示，标明了必填和可选字段
***
## 界面截图
### PC：
### 移动端：
---
### **核心功能**
1. **侧边栏导航**：
* 显示一级文件夹
* 点击一级文件夹时，在右侧主内容区显示子文件夹和书签
* 支持多级文件夹的嵌套展开和折叠
2. **主内容区**：
* 显示当前文件夹的子文件夹和书签
* 书签以卡片形式展示，支持点击跳转
* 文件夹以图标形式展示，支持点击进入子文件夹
3. **面包屑导航**：
* 显示当前路径（点击的文件夹层级）
* 支持通过面包屑导航返回上一级
4. **搜索功能**：
* 支持按标题搜索书签
* 搜索结果会替换主内容区的内容
* 支持实时渲染
* 搜索结果分页
* 文件夹类型结果显示完整路径
5. **主题切换**：
* 支持深色模式和浅色模式切换
* PC端支持鼠标悬停动效，移动端优化触屏交互
6. **响应式设计**：
* 支持移动端(<480px)和PC端的响应式布局
* 小于1024px屏幕自动收起侧边栏，大于等于1024px屏幕默认展开
* 统一的断点系统确保在不同设备上的最佳体验
* 移动端进行了一些样式优化，便于使用
7. **GSAP动画支持**：
* 主页消息加入GSAP动画内容
8. **键盘聚焦支持**：
* 支持 `Tab` 键聚焦网页内容
* 支持 `Ctrl + K` 快捷键聚焦搜索框
* * *
## 技术特性
* **统一断点系统**：移动端(<1024px)、桌面端(≥1024px)
* **优化的交互体验**：PC端悬停效果，移动端触屏优化
* **性能优化**：Web Worker搜索、懒加载图片、动画优化
* **无障碍支持**：键盘导航、焦点管理、语义化标签
---
## 感谢所有贡献者作出的努力
### 谁都能成为“造物主”
***
## 其他参考项目
若不介意闭源或付费，可参考以下项目：
[Pintree](https://github.com/Pintree-io/pintree)（开源 + 付费模式 + 广告）
[TabMark](https://github.com/Alanrk/TabMark-Bookmark-New-Tab)（开源的浏览器扩展）
