Bepop - 不间断的音乐模板

# 项目简介 Bepop 是一款基于 Bootstrap 4 构建的音乐类 Web 应用模板，面向音乐人、音频平台及创作者社区。内置专辑展示、艺人列表、播放列表等页面模板，支持 Plyr 音视频播放、Slick 轮播、ScrollReveal 滚动动画等交互功能。 ## 技术栈 - Bootstrap 4.1 - jQuery 3.2.1 - Plyr（音视频播放器） - Slick Carousel（轮播组件） - ScrollReveal（滚动动画） - Feather Icons（图标库） - Pjax（页面无刷新加载） - Grunt（构建工具） ## 项目结构 ``` Bepop/ ├── index.html # 首页入口 ├── package.json # 依赖与脚本配置 ├── Gruntfile.js # Grunt 构建配置 ├── CHANGELOG.md # 更新日志 ├── docs/ # 文档页面 │ └── index.html └── assets/ ├── css/ │ ├── bootstrap.css │ ├── theme.css │ └── style.css # 自定义样式 ├── img/ # 示例图片（a*.jpg / b*.jpg） └── api/ ├── menu.json └── music.json ``` ## 核心文件说明 - `index.html` — 网站首页，包含 Hero 区、艺人展示网格等完整布局 - `package.json` — 定义依赖包、构建脚本及需复制的静态资源清单 - `Gruntfile.js` — Grunt 任务配置（压缩、合并、CSS/JS 最小化等） - `assets/css/style.css` — 自定义样式，覆盖 Hero 区域、渐变背景、响应式布局 - `assets/css/theme.css` — 主题级样式扩展 - `docs/index.html` — 官方文档入口，含组件说明与基础模板示例 ## 快速开始 ```bash # 安装依赖（需先装 Node.js） npm install # 启动本地静态服务器（自动打开浏览器） npm start # 或手动执行 Grunt 构建 npx grunt ``` ## 使用建议 该模板适合快速搭建音乐作品展示页或艺人主页，建议根据 `docs/index.html` 中的"Starter template"结构新建页面。若需修改构建流程，可参考 `package.json` 中 `copy` 字段列出的所有第三方资源，确保构建后完整复制到输出目录。