Sarab 是一套面向快餐店、餐厅和咖啡馆的响应式单页 Bootstrap 5 模板。它把菜品分类、菜单价格、促销内容、餐厅故事、厨师团队、营业时间、顾客评价、预订和联系入口组织在一条滚动路径中，适合先搭建餐饮品牌展示与到店预订前端，再根据项目需要接入真实业务服务。

Sarab 餐厅菜单筛选与预订页面预览

资源包以 index.html 作为正式页面入口，样式、脚本、字体图标和演示图片分别放在 css、js、webfonts 与 img 目录中。项目不需要 npm 安装、构建命令或框架编译，保留相对目录结构后即可作为静态页面预览；菜单、订单、邮件和预订管理等真实数据能力仍需要后续接入。

一页串联菜单浏览、品牌内容与预订入口

页面区域 主要内容 修改重点
首屏与分类 顶部信息、粘性导航、搜索浮层、主视觉、四项数字和六个菜品分类入口 品牌名、Logo、联系方式、主标题、主图和分类图片
菜单与促销 分类筛选、菜品卡片、详情弹窗、数量控件、折扣信息和倒计时 菜名、价格、描述、热量、制作时间和活动期限
图库与品牌内容 食物图库、发展时间线、厨师团队和营业时间 真实门店照片、品牌历史、团队资料和营业安排
评价与预订 评价轮播、预订输入项、门店信息和提示消息 替换演示评价，连接预订接口和确认流程
内容与联系 博客卡片、邮件订阅、联系表单和页脚 真实文章、订阅服务、收件接口和社交账号

模板的导航入口主要指向当前页面内的锚点，脚本还会在滚动时切换导航状态，并在移动端点击菜单项后关闭 Bootstrap 折叠导航。因此，它更适合用来完成“浏览菜单—了解门店—查看评价—提交预订或咨询”的单页展示，不是已经接通商品详情、结算和会员中心的完整外卖商城。

菜单筛选、弹窗和图库构成主要交互

  • 分类筛选：菜单区提供全部、汉堡、披萨、炸鸡、卷饼、甜点和意面等选项，通过菜品卡片的 data-c 值控制显示；顶部分类卡片也可以滚动到菜单区并触发对应筛选。
  • 搜索浮层：导航搜索按钮会打开覆盖层，趋势词可以填入输入框；源码没有根据手动输入文字继续执行菜单搜索的逻辑。
  • 菜品弹窗：点击菜单卡片后，脚本会读取图片、名称、类别、价格、评分、热量、制作时间和标签等 data-* 数据生成详情弹窗。数量按钮和加入购物车操作只改变当前页面状态，不会保存订单。
  • 食物图库：图库卡片通过自定义遮罩层展示大图、标题和描述，并提供上一张、下一张以及 Esc 关闭操作。
  • 评价轮播：Swiper 在窄屏显示一张评价卡，宽度达到 640px 和 1024px 后分别显示两张和三张，并设置了四秒自动轮播。

红橙配色与字体变量控制整体视觉

主样式表定义了红色 #e8281a、橙色 #f6a623、深色 #1a1a1a 和奶油背景色，按钮、图标、标签、渐变与滚动条都围绕这些变量展开。二次开发时可以先调整 --primary、--secondary、--dark、--cream 与 --cream2，再检查具体区块的对比度和图片适配。

正文使用 Poppins，标题使用 Playfair Display，装饰文字使用 Dancing Script，三组字体通过 Google Fonts 远程加载；资源包同时提供 Font Awesome 和 Icomoon 字体文件。若部署环境无法稳定访问外部字体服务，应考虑改为本地托管或替换为可靠的本地字体栈。

预订、联系和订阅目前只是前端演示

预订区包含姓名、电话、邮箱、人数、日期、时间和特殊要求等输入项，联系区也提供姓名、邮箱、电话、主题和留言字段。但页面没有表单提交地址，也没有 fetch、Ajax 或邮件接口；点击按钮后，脚本只等待约 1.5 秒并显示成功提示，不能证明服务器已经收到数据。

订阅输入框目前只检查内容是否包含 @，随后暂时改变按钮文字。演示中的订单数量、倒计时、评价、门店数字、地址、电话、博客链接和社交链接也属于静态数据或占位入口。正式上线前，应补充服务端收件、必填校验、错误状态、重复提交处理、隐私说明和真实成功回执。

文件依赖和二次开发边界

资源包内含 Bootstrap 5.3、jQuery 3.7.1、AOS、Swiper 和 Magnific Popup 的样式或脚本文件。Bootstrap 负责网格与移动导航，AOS 处理滚动显现，Swiper 用于评价轮播，Magnific Popup 提供弹层能力；菜单详情与图库主要由 js/main.js 中的自定义脚本控制。

修改时应保留 HTML 中引用的相对目录结构，并在删除区块后同步清理未使用的脚本和资源。如果项目只需要餐厅介绍与预订，可以移除购物车状态、博客占位链接和促销倒计时，缩小后续维护范围。

授权信息与使用前提醒

ThemeWagon 的免费模板许可说明允许免费模板用于个人和商业项目，但模板页提示免费模板需要保留署名；Sarab 源码页脚中也保留了 Bestwpware 与 ThemeWagon 的署名。不要在未核对作者要求的情况下移除这些署名，也不要把模板源码本身包装成可自由再分发的模板生成器或竞争性服务。商业项目和源码再分发场景应以原始许可页面及资源包中的最新说明为准。

建议按这个顺序完成修改

  1. 先替换品牌名称、Logo、首屏文案、联系方式、地址、营业时间和社交账号。
  2. 逐张更新菜品图片、分类、名称、价格、描述及卡片中的 data-* 属性，确保列表和弹窗内容一致。
  3. 删除演示用的顾客数字、发展历史、厨师资料、评价和博客内容，换成拥有使用权的真实信息。
  4. 根据业务范围连接预订、联系和订阅接口；如果需要线上点单，还要另行接入商品、库存、购物车、订单和支付系统。
  5. 决定是否本地托管 Google Fonts，并检查第三方库中未使用的文件是否可以移除。
  6. 最后在手机、平板和桌面宽度下检查导航、筛选按钮、菜品弹窗、图库、轮播和输入区域，再部署到正式环境。
支付赞助获取下载注意：
1.支付赞助成功后请勿关闭窗口或其他操作，等待系统自动确认，支付按钮 变为 下载按钮。2.游客操作请使用 Chrome 、Edge 或 FireFox浏览器 ，以免支付刷新失败(浏览器缓存7天有效)。3.如支付赞助成功后刷新无法显示下载按钮、链接失效等问题请到 【公告留言】 处理或参考下载说明文档 。
免责声明：
1.本站资源售价仅为赞助网站，收费仅用于网站维护运营更新，感谢您的支持。2.本站所发布资源仅限用于学习和研究测试使用，不得用于商业。3.如果获得下载权限测试后满意，请前往支持正版，得到更好的正版服务。4.本站仅保证资源的正常下载和测试使用，售后不包含相关技术咨询服务，请知悉谅解。5.本站所发布资源为非实物商品，不接受退款，请考虑好再进行支付赞助获取下载。