ChuwuBookmarks

English | 简体中文

---

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 to view example deployments.

You can also visit the following links to experience the service:

CloudFlare

Vercel

Netlify

GithubPages

---

Quick Start

1. Get the Project: Fork or clone this repository locally

   git clone https://github.com/ChuwuYo/ChuwuBookmarks.git

2. Export Bookmarks: Use 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 (open-source + paid model + advertisements)

TabMark (open-source browser extension)