BrainNest - Educational Toys and Games Store HTML & CSS App with Payload CMS

# 项目简介 BrainNest 是一个教育玩具和游戏在线商店 HTML 模板，基于 BeShop 电商模板改编，采用 Bootstrap 框架。模板包含 41 个页面，覆盖注册登录、购物车、产品展示等电商核心流程，并附带 Payload CMS（基于 Next.js）后端管理系统，可快速搭建完整的玩具电商网站。 ## 技术栈 - Bootstrap 5（前端 UI 框架） - HTML5 / CSS3 / SCSS - jQuery - Swiper（轮播组件） - Payload CMS（Node.js Headless CMS） - Next.js（CMS 管理系统前端） - MongoDB（CMS 数据存储） ## 项目结构 ``` brainnesthtml-10/ ├── app-documentation/ # HTML 模板使用文档 │ ├── index.html │ └── assets/css/style.css ├── cms-documentaion/ # Payload CMS 搭建文档 │ ├── index.html │ └── assets/ ├── html/ # 前端页面示例 │ ├── index.html # Onboarding 引导页 │ ├── css/index.css │ └── assets/ ├── payload-cms/ # Payload CMS 后端 │ └── brainnest/ │ ├── src/ │ ├── package.json │ └── docker-compose.yml └── __MACOSX/ # macOS 元数据文件 ``` ## 核心文件说明 - `app-documentation/index.html` — HTML 模板官方文档，含页面结构、CSS 架构、自定义说明 - `cms-documentaion/index.html` — Payload CMS 安装部署指南，含数据库配置、项目运行步骤 - `html/index.html` — App 引导页示例，展示 Swiper 轮播和登录入口 - `payload-cms/brainnest/src/` — Payload CMS 核心源码目录，包含 CMS 配置与数据模型 - `payload-cms/brainnest/package.json` — CMS 项目依赖定义（Next.js + Payload） - `payload-cms/brainnest/docker-compose.yml` — Docker 容器化部署配置 ## 快速开始 **前端模板（静态页面）** 直接用浏览器打开 `html/index.html`，或启动任意静态服务器： ```bash cd html python -m http.server 8080 # 访问 http://localhost:8080 ``` **Payload CMS 后端** ```bash cd payload-cms/brainnest npm install # 配置 .env 中的 DATABASE_URI 和 PAYLOAD_SECRET npm run dev ``` ## 使用建议 该模板适合教育玩具、益智游戏品类的电商网站开发。若需完整电商功能，建议使用模板自带的 Payload CMS 后端（需自行准备 MongoDB 数据库），CMS 文档详细描述了从环境安装到 Docker 部署的完整流程。