
Muzilla - 创意独立游戏工作室 Bootstrap 5 模板
categoryUI 组件
# 项目简介
Muzilla 是一款基于 Bootstrap 5 的多用途游戏工作室网站模板,适合独立游戏开发团队、数字创意机构或游戏发行商展示作品、团队和动态。模板包含 3 种首页风格、博客、游戏详情等 17 个完整页面,开箱即用。
## 技术栈
- Bootstrap 5(核心 CSS 框架)
- Gulp(自动化构建)
- Sass(样式预处理)
- Swiper(轮播组件)
- AOS(滚动动画)
- Magnific Popup(图片灯箱)
- Odometer(数字滚动)
- BrowserSync(热重载开发服务器)
## 项目结构
```
muzillahtml-10/Muzilla_v1.0.0_Unzip-First/
├── 1.Muzilla_template/ # 静态页面模板(直接使用)
│ ├── index.html # 首页 v1
│ ├── index-2.html # 首页 v2
│ ├── index-3.html # 首页 v3
│ ├── about-us.html
│ ├── our-game.html
│ ├── game-details.html
│ ├── blog-list.html
│ ├── blog-details.html
│ ├── services-1.html
│ ├── services-2.html
│ ├── services-details.html
│ ├── contact.html
│ ├── careers.html
│ ├── pricing.html
│ ├── faqs.html
│ ├── terms.html
│ ├── 404.html
│ └── assets/
├── 2.Muzilla_Development_SourceCode/ # Gulp 开发源码
│ ├── src/
│ │ ├── assets/scss/ # Sass 源文件
│ │ └── views/pages/ # HTML 模块化视图
│ ├── gulpfile.js # Gulp 任务配置
│ └── package.json
├── 3.Muzilla_Documentation/ # 文档
└── 4.Muzilla_Figma_template/ # Figma 设计源文件
```
## 核心文件说明
- `1.Muzilla_template/index.html` — 网站首页入口,展示工作室简介和精选游戏
- `gulpfile.js` — 定义 include-html、sass 编译、browser-sync 热重载等开发任务
- `package.json` — Gulp + Sass 开发依赖配置,npm install 后即可运行
- `src/assets/scss/main.scss` — 全局 Sass 入口文件,变量和组件样式在此管理
- `src/views/pages/*.html` — HTML 模块片段,通过 @@include 语法组合成完整页面
- `1.Muzilla_template/assets/css/` — 编译后的 CSS 输出目录
## 快速开始
**直接使用模板**(无需构建)
```bash
# 进入模板目录,用浏览器打开 index.html
cd "1.Muzilla_template"
open index.html
```
**本地开发(需 Node.js)**
```bash
cd "2.Muzilla_Development_SourceCode"
npm install
npm run dev
```
浏览器自动打开 http://localhost:3000,热重载生效。
**生产构建**
```bash
npm run build
```
## 使用建议
- 模板页面已完整实现 UI,直接修改 `1.Muzilla_template` 下的 HTML/CSS 即可,无需每次从源码构建。
- 若需自定义 Sass 变量或组件样式,推荐使用 `2.Muzilla_Development_SourceCode` 中的 Gulp 工作流,保证样式模块化。
- 页面路径跳转基于相对路径,移动文件时请同时更新 `assets` 路径引用。
help_outline
常见问题
评论0
发布时间Jan 20, 2026
技术栈
HTML