La Maison 餐厅

极简布鲁塔alist风格的高端餐厅单页网站，使用 Tailwind CSS 构建，采用暖色调设计系统和手工排版。

在线体验 ·

独立开发者 · 2026年3月 · 个人项目

CSS3 / EdgeOne Pages / HTML5 / SingleFile CLI / Tailwind CSS

项目简介

La Maison 是一个高端餐厅主题的单页网站，采用布鲁塔利斯特（Brutalist）设计风格，使用纯静态 HTML + CSS 实现。通过 SingleFile CLI 从在线设计模板克隆，经自动化工具链拆分为结构清晰的前端项目，最终部署到 EdgeOne Pages。

核心亮点

• 布鲁塔利斯特设计系统: 暖色调配色（Floral White #FFFAF0 背景 + Burnt Orange #FF6B35 主色），2px 粗边框 + 偏移阴影的卡片风格，手写体 Playfair Display SC 与无衬线 Karla 字体搭配
• 完整页面模块: 固定导航栏、Hero 区域（图片拼贴）、菜单展示（带分类标签）、品牌故事（主厨介绍）、预约表单、客户评价、页脚社交链接
• 自动化克隆流水线: SingleFile 下载 → js-beautify 格式化 → Base64 资源提取（20个文件，HTML 从 865KB 缩减至 43KB）→ CSS/HTML 分离 → CSP 策略修复 → EdgeOne 部署
• CSS 自定义属性系统: 通过 .restaurant 类作用域定义 8 个设计 Token（primary、bg、bg-warm、bg-dark、text、text-muted、border、accent-green），实现主题可配置

挑战

• SingleFile 输出不可直接编辑: 所有代码压缩在一行，图片/字体以 Base64 内嵌导致文件 865KB
• CSP 安全策略阻断外部 CSS: SingleFile 自动添加的 style-src unsafe-inline 策略禁止加载外部样式表
• Prettier 格式化崩溃: SingleFile 生成的 HTML 包含非标准未闭合标签，Prettier 直接报错无法处理

解决方案

• 自定义提取脚本: 编写 Python 脚本自动提取 20 个 Base64 资源到 assets/ 目录，HTML 缩减 91%
• CSP 策略删除: 移除 SingleFile 自动添加的 CSP meta 标签，恢复外部 CSS 加载能力
• js-beautify 替代 Prettier: 使用容错性更强的 js-beautify 进行 HTML 格式化，成功处理非标准标签