项目简介
Bistly 是一套静态 HTML 餐厅与咖啡馆网站模板，包含餐厅主页、咖啡馆主页和甜品店主页三种首页变体，覆盖菜品展示、购物车、博客、团队介绍等完整页面，适合快速搭建餐饮类商业网站。
技术栈
- HTML5 + CSS3 + Vanilla JavaScript
- Bootstrap 5.x（CSS 框架）
- jQuery（文档页面交互）
- FontAwesome（图标库）
- Google Fonts（Marcellus + Roboto）
- AOS（滚动动画）、Slick（轮播）、Magnific Popup（灯箱）、Nice Select（下拉选择）
项目结构
text
bistlyhtml-10/
└── Main_File/
├── Documentation/
│ └── index.html # 模板使用文档
└── bistly/
├── index.html # 首页-餐厅
├── index-2.html # 首页-咖啡馆
├── index-3.html # 首页-甜品店
├── about.html # 关于我们
├── menu-grid.html # 菜单网格
├── menu-list.html # 菜单列表
├── menu-details.html # 菜品详情
├── shop.html # 商店列表
├── shop-details.html # 商品详情
├── cart.html # 购物车
├── checkout.html # 结账
├── blogs.html # 博客列表
├── blog-details.html # 博客详情
├── chefs.html # 厨师团队
├── gallery.html # 图库
├── contact.html # 联系我们
├── 404.html # 错误页面
└── assets/
├── css/ # 样式文件
├── fonts/ # 图标字体
└── images/ # 图片资源
核心文件说明
bistly/index.html— 餐厅版首页入口，包含导航、幻灯片、菜品展示bistly/assets/css/common-style.css— 全局共享样式，所有页面依赖bistly/assets/css/pages/home-restaurant.css— 首页专属样式bistly/assets/css/pages/innerpages.css— 内页通用样式（About、Contact 等）bistly/checkout.html— 结账流程页面，含表单布局Main_File/Documentation/index.html— 官方模板文档
快速开始
直接用浏览器打开 Main_File/bistly/index.html 即可预览餐厅版首页；若需本地服务，可使用任意静态服务器（如 npx serve .）访问该目录。
使用建议
- 三个首页（index / index-2 / index-3）共享结构和组件，仅样式主题不同，开发时可根据需要选择或合并
- 模板内置购物车和结算流程为纯前端静态演示，生产环境需对接后端 API
- 首次部署时请将
assets/images中的占位图替换为真实餐厅素材
