Pubzi – Esports and Gaming HTML Template

# 项目简介 Pubzi 是一款面向电竞游戏行业的静态 HTML 模板，基于 Bootstrap 5 构建，适用于游戏平台、电竞团队官网、游戏媒体资讯等场景。模板提供 7 个首页变体及完整的内页（游戏详情、赛事、团队、新闻动态、定价、FAQ 等），支持移动端响应式布局。 ## 技术栈 - Bootstrap 5 — 响应式 CSS 框架 - jQuery 3.7.1 — DOM 交互 - GSAP + ScrollTrigger — 高性能动画与滚动驱动效果 - Swiper — 轮播与滑动组件 - MeanMenu — 移动端汉堡导航 - NiceSelect — 美化下拉选择框 - Magnific Popup — 图片/视频灯箱 - Wow.js — 滚动动画 ## 项目结构 ``` pubzihtml-10/ └── Buyer files/ ├── index.html # 首页（7 种变体: index.html ~ index-7.html） ├── about.html ├── game.html / game-details.html ├── match.html / match-details.html ├── news*.html # 新闻列表、详情、网格布局 ├── team.html / team-details.html ├── pricing.html / faq.html ├── service*.html / contact.html ├── gallery.html / coming-soon.html / 404.html └── assets/ ├── css/ # 编译后样式（main.css 等） ├── scss/ # SCSS 源文件 ├── js/ # jQuery 插件与业务逻辑 └── img/ # 静态图片资源 ``` ## 核心文件说明 - `Buyer files/index.html` — 主入口页，包含预加载动画、滚动导航、固定头部等基础结构 - `Buyer files/assets/js/main.js` — 核心交互逻辑：移动端导航初始化、轮播实例化、视差效果、自定义光标、计数器等 - `Buyer files/assets/css/main.css` — 完整主题样式，包含按钮组件、布局、颜色变量及响应式断点 - `Buyer files/assets/scss/` — SCSS 源文件目录，按模块划分（_buttons.scss、_hero.scss、_game.scss 等） - `Buyer files/game.html` — 游戏列表展示页面 - `Buyer files/news.html` — 资讯动态列表页面 ## 快速开始 本项目为纯静态模板，无需构建工具即可运行： 1. 直接在浏览器中打开 `Buyer files/index.html`；或 2. 使用 VS Code Live Server、http-server 等本地服务器启动，确保所有资源正常加载。 3. 若需修改 SCSS，则需配置 Sass 编译器将 `scss/` 目录输出为 `css/` 下的同名文件。 ## 使用建议 - 模板中的轮播组件（Swiper）、视差效果（parallaxie）和 GSAP 动画已封装完毕，直接复制对应区块即可复用，无需自行编写 JS。 - 移动端导航依赖 MeanMenu，如需调整断点或菜单结构，可修改 `main.js` 中 `$('#mobile-menu').meanmenu({ meanScreenWidth: "1199" })` 的配置。