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: 4 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 (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-04T19:19:35.000Z (8 months ago)
- Last Synced: 2025-10-04T20:34:48.081Z (8 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
ChuwuBookmarks
English | 简体中文
[](https://deepwiki.com/ChuwuYo/ChuwuBookmarks)
[](https://zread.ai/ChuwuYo/ChuwuBookmarks)
---
Project Overview
---
This browser-based bookmark navigation template transforms JSON bookmark data into a visually appealing and feature-rich web application. It supports multi-level folders, search functionality, breadcrumb navigation, and more, but does not include bookmark management capabilities.
Visit [Chuwu's Bookmark Corridor](https://tabs.chuwu.top/) to view example deployments.
You can also visit the following links to experience the service:
[CloudFlare](https://chuwubookmarks.pages.dev/)
[Vercel](https://chuwubookmarks.vercel.app/)
[Netlify](https://chuwubookmarks.netlify.app/)
[GithubPages](https://chuwuyo.github.io/ChuwuBookmarks/)
***
## Quick Start
1. **Get the Project**: Fork or clone this repository locally
```bash
git clone https://github.com/ChuwuYo/ChuwuBookmarks.git
```
2. **Export Bookmarks**: Use [BookmarksPortal](https://github.com/ChuwuYo/BookmarksPortal) to export two JSON files: your bookmark data file and directory structure file
3. **Import Files**: Rename the exported bookmark file to `bookmarks.json` and place it in the root directory along with the directory structure file `structure.json`
4. **Deploy and Use**: Deploy the project to your preferred static website hosting service (such as GitHub Pages, Vercel, Netlify, Cloudflare, Edgeone, etc.)
5. **SEO Configuration** (Optional): The project includes complete SEO optimization files. When deploying, you can modify the following files according to your needs:
- `index.html`: Modify Open Graph data, meta tags, canonical links, and structured data
- `sitemap.xml`: Update website URL and last modified date
- `robots.txt`: Adjust crawler rules and sitemap links
- `manifest.json`: Customize PWA application information
- `structured-data.json`: Structured Data
- All configuration files contain clear comment prompts indicating required and optional fields
***
## Screenshots
### PC:
### Mobile:
---
### **Core Features**
1. **Sidebar Navigation**:
* Displays first-level folders
* Clicking a first-level folder displays subfolders and bookmarks in the main content area
* Supports expanding and collapsing nested multi-level folders
2. **Main Content Area**:
* Displays subfolders and bookmarks of the current folder
* Bookmarks are displayed as cards, supporting click-to-navigate
* Folders are displayed as icons, supporting click-to-enter subfolders
3. **Breadcrumb Navigation**:
* Displays the current path (folder hierarchy)
* Supports returning to the previous level via breadcrumb navigation
4. **Search Functionality**:
* Supports searching bookmarks by title or URL
* Search results replace the content in the main content area
* Real-time search results
* Pagination of search results
* Folder-type results display the full path
5. **Theme Switching**:
* Supports switching between dark and light modes
* PC supports hover effects, mobile optimization for touch interaction
6. **Responsive Design**:
* Supports responsive layout for mobile(<480px), tablet(480px-1023px), and desktop(≥1024px) devices
* Automatically collapses sidebar on screens smaller than 1024px, keeps it expanded on screens 1024px and above
7. **GSAP Animation Support**:
* Homepage messages incorporate GSAP animation content
8. **Keyboard Focus Support**:
* Supports focusing on webpage content using the `Tab` key
* Supports focusing on the search box using the `Ctrl + K` shortcut
---
## Thanks to all contributors for their efforts
### Anyone Can Become a "Creator"
***
## Other Reference Projects
[Pintree](https://github.com/Pintree-io/pintree) (open-source + paid model + advertisements)
[TabMark](https://github.com/Alanrk/TabMark-Bookmark-New-Tab) (open-source browser extension)