Next.jsReact企业官网

blackgyalbites-nextjs — Next.js 企业官网模板

作者 blackgirlbytes

基于 Next.js 与 Tailwind CSS 的餐厅无接触菜单模板,通过二维码访问,可托管在 GitHub Pages 上。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-01查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

使用 Next.js 与 Tailwind CSS 构建

02

提供食物、饮品、餐饮三类菜单入口

03

面向扫码查看的无接触菜单场景

04

以静态站点形式托管在 GitHub Pages

05

代码采用 MIT 许可,可自由修改使用

模板详细介绍

blackgyalbites-nextjs 是一个餐厅菜单展示模板,使用 Next.js 和 Tailwind CSS 构建,并以静态站点形式托管在 GitHub Pages 上。页面提供食物菜单、饮品菜单和餐饮菜单三个入口,适合顾客扫描二维码后在手机上查看菜单。

该项目由 Rizel Scarlett 所有,设计来自 The Holistic Technologist,插画来自 Cuoc Doi Prints。代码采用 MIT 许可,可自由 fork、复制、修改和用于任何目的。README 同时提供了 Canva 菜单设计模板和 Google Drive 素材下载链接。

作为演示项目,它主要展示如何用任意框架构建并托管静态网站,仓库中另有 HTML/CSS 和 Astro 版本的同类示例。

Next.js企业官网

适合你的项目吗?

适用场景

  • 餐厅顾客扫描二维码后在手机上查看菜单
  • 开发者学习如何用 Next.js 构建并托管静态站点到 GitHub Pages
  • 需要快速搭建无接触菜单页面的小型餐饮场景

适合人群

  • 需要无接触菜单的餐厅或餐饮摊位
  • 想参考 Next.js 静态站点部署到 GitHub Pages 的开发者
  • 希望基于 MIT 许可模板二次修改菜单页面的使用者

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    仓库代码采用 MIT 许可,分发时需保留版权声明和许可声明。

  2. 2

    演示图片、字体、图标等第三方素材需按各自许可单独核对。

  3. 3

    托管在 GitHub Pages 等外部服务可能产生额外费用。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-01。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 72 / 100
技术栈
Next.js · React
网站类型
企业官网
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2022-09-13
截图检查日期
2026-10-01

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: a583a7c20a46484fc356d1f9933fd47a867f92e042d8bd3d2db55c7d2ea86978

2026-10-01T15:23:27.439Z

来源文件 / 仓库
# blackgyalbites

## Template for No-touch Menus and Host Static Pages Built with Any Framework on GitHub Pages

![screenshot of website with 3 buttons that read: food menu, drinks menu, and catering menu. on the right of it is a screenshot of the drinks menu](https://user-images.githubusercontent.com/22990146/182385358-364d812f-a5a8-48ad-9ac7-3bf9e14d9614.png)

### Website built with Next.js and Tailwind CSS to display restaurant menus when users scan a QR code.

## Powered By GitHub Pages

This is a demonstration to show developers that they can build and host static websites using any framework. 
See more example frameworks hosted on GitHub Pages:

- [HTML and CSS](https://github.com/blackgirlbytes/blackgyalbites)
- [Next.js and Tailwind CSS](https://github.com/blackgirlbytes/blackgyalbites-nextjs)
- [Astro](https://github.com/blackgirlbytes/blackgyalbites-astro)

Link to live site: https://blackgirlbytes.github.io/blackgyalbites-nextjs/

### Design and Development
All designs and elements are open source, available for free for anyone to use.

Owned by Rizel Scarlett [(@blackgirlbytes)](https://github.com/blackgirlbytes)

Designed by [The Holistic Technologist](https://holistictech.io)

Illustrations by [Cuoc Doi Prints](https://www.cuocdoiprints.com)

Feel free to fork, copy, tweak, and use for any purpose. This project is completely open source, and under [MIT license](https://github.com/blackgirlbytes/blackgyalbites-nextjs/blob/main/LICENSE). 

Menu Design Template: [Canva](https://www.canva.com/design/DAFGhaCejFw/zy2w9ZjXJBZ3NssSdfhpTw/view?utm_content=DAFGhaCejFw&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)

Download Assets & Design Elements: [Google Drive](https://drive.google.com/drive/u/0/folders/12vHecd82FiiphDGSpwRA8cndsdzDy5QG)

![blackgirlbytes logo](https://user-images.githubusercontent.com/22990146/182384548-5af4d85e-3439-449a-bac4-6b213eb6b18c.png)
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。