项目简介link

BrainNest 是一个教育玩具和游戏在线商店 HTML 模板，基于 BeShop 电商模板改编，采用 Bootstrap 框架。模板包含 41 个页面，覆盖注册登录、购物车、产品展示等电商核心流程，并附带 Payload CMS（基于 Next.js）后端管理系统，可快速搭建完整的玩具电商网站。

技术栈link

• Bootstrap 5（前端 UI 框架）
• HTML5 / CSS3 / SCSS
• jQuery
• Swiper（轮播组件）
• Payload CMS（Node.js Headless CMS）
• Next.js（CMS 管理系统前端）
• MongoDB（CMS 数据存储）

项目结构link

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 元数据文件

核心文件说明link

• 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 容器化部署配置

快速开始link

前端模板（静态页面）

直接用浏览器打开 html/index.html，或启动任意静态服务器：

cd html
python -m http.server 8080
# 访问 http://localhost:8080

Payload CMS 后端

cd payload-cms/brainnest
npm install
# 配置 .env 中的 DATABASE_URI 和 PAYLOAD_SECRET
npm run dev

使用建议link

该模板适合教育玩具、益智游戏品类的电商网站开发。若需完整电商功能，建议使用模板自带的 Payload CMS 后端（需自行准备 MongoDB 数据库），CMS 文档详细描述了从环境安装到 Docker 部署的完整流程。