BookShelf —— 让每个人都能拥有自己的数字图书馆

这篇文章是我在 BookShelf 正式上线后，静下心来重新梳理和总结的项目介绍。希望能让你更好地了解这个产品的初衷、设计思路与技术细节。

🟩 初心与愿景

在数字化时代，阅读和知识管理变得越来越重要。市面上虽然有不少图书管理工具，但要么过于复杂，要么不够自由。BookShelf 的目标，就是让每个人都能轻松搭建属于自己的数字图书馆，无论是管理个人著作、收藏电子书，还是团队协作整理资料，都能得心应手。

🟩 项目简介

BookShelf 是一个基于 Supabase 的网页图书管理系统，主打极简、优雅、开箱即用。你可以随时添加、编辑、浏览自己的书籍和章节，支持封面上传、内容实时保存，界面响应式适配各种设备。

pic1

🟩 核心功能亮点

  • 图书管理：支持书籍的添加、编辑、删除与分组，结构清晰。
  • 章节管理：每本书可无限添加章节，支持富文本内容，自动保存。
  • 封面图片：每本书可上传专属封面，提升视觉体验。
  • 极致阅读体验：内置章节切换、目录导航，阅读流畅。
  • 管理后台：专属 admin.html，批量管理书籍与章节，支持内容维护。
  • 静态托管：可部署在任意静态网站托管平台，维护简单，成本极低。
  • 多端适配：响应式设计，手机、平板、电脑均可流畅访问。

🟩 技术架构

  • 前端：HTML + CSS + JavaScript
  • 后端：Supabase（无服务器云数据库，安全高效）
  • 样式：Tailwind CSS
  • 托管：兼容任何静态网站托管服务（如 Vercel、Netlify、GitHub Pages）

🟩 快速上手指南

  1. 克隆仓库

    1
    2
    git clone https://github.com/FeynmanXie/Web-Book-Shelf.git
    cd Web-Book-Shelf

  2. 配置 Supabase

    • 注册 supabase.com 账号，创建新项目
    • 获取项目 URL 和匿名密钥
    • 在 js/db-service.js、js/book-list.js、admin.html 中填写你的 Supabase 配置信息

  3. 本地运行

    1
    npm run dev

    浏览器访问 http://localhost:5173

🟩 使用方法

  • 管理后台
    访问 admin.html，可添加/编辑书籍与章节，上传封面，管理内容。
  • 阅读界面
    访问 index.html 浏览所有书籍，点击进入书籍详情页，章节切换流畅。

🟩 数据库结构设计

字段 类型 描述
id uuid 唯一标识
book_id text 书籍标识符
chapter_id text 章节标识符
title text 章节标题
content text 章节内容
created_at timestamp 创建时间
cover_url text 章节封面图片 URL

结构简洁，便于扩展和维护。

🟩 开源与贡献

  • 开源协议：MIT
  • 欢迎贡献：无论是功能建议、Bug 反馈还是 PR，欢迎参与共建！

🟩 项目地址

👉 GitHub 仓库 - FeynmanXie/Web-Book-Shelf

🟩 写在最后

BookShelf 还在持续完善中，欢迎体验和 Star！如果你有任何建议、想法或遇到问题，欢迎在评论区留言，或在 GitHub 提 Issue。

未来我还计划做一个“书海合集”，届时大家可以选择将自己喜欢的书上传到主站，与更多人分享。无论你用哪种语言创作（中文、英文、日文、法文等都欢迎），都可以参与进来！当然，这些都是后话，敬请期待。

让我们一起打造更好的数字阅读体验！

参考：BookShelf - 网页图书管理系统官方文档