Astro杂志资讯

ombra — Astro 杂志资讯模板

作者 xocothemes

暗色编辑风 Astro 餐厅单页主题，适合私房菜与品鉴菜单，无客户端框架，SEO 与无障碍细节完善。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。本截图因高度限制未包含整页。

采集于 2026-09-27查看来源

值得关注的模板亮点

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

纯静态 Astro 架构，无客户端框架运行时

集中式 TypeScript 配置，便于管理站点与首页内容

内置 SEO 元数据、Sitemap 与 Restaurant JSON-LD

本地自托管字体，仅含所需字重

键盘可访问的移动导航，无需额外 JavaScript

默认表单使用 mailto，无需后端即可运行

模板详细介绍

Ombra 是一款为私密餐厅、品鉴菜单、主厨餐桌和 supper club 设计的暗色编辑风 Astro 主题。它采用静态页面架构，没有客户端框架运行时，因此加载迅速，同时内置了完善的 SEO 与元数据支持，包括 canonical、Open Graph、Twitter Card 和 Restaurant JSON-LD。内容配置集中在 `src/config/site.ts` 和 `src/config/home.ts` 两个文件，便于快速替换餐厅信息、菜单、主厨时间线等。

主题在细节上做得比较到位：本地自托管字体仅包含实际用到的字重，图片经过优化并带有尺寸和 alt 文本，导航支持键盘操作且移动端无需额外 JavaScript，还提供了可选的滚动显现动画并支持 reduced-motion。默认的预订表单使用 `mailto:` 链接，因此无需后端即可运行，但上线前需要替换为真实的预订服务或表单端点。

Ombra 适合追求视觉冲击力和内容编辑感的餐饮类单页项目，尤其是那些希望快速搭建、注重 SEO 和可访问性的团队。不过，它并非为多页面或复杂交互设计，若需要博客、菜单详情页或在线预订系统，则需自行扩展。部署前务必在 `astro.config.mjs` 中设置正式域名，并检查社交分享图片等资源。

Astro杂志资讯

适合你的项目吗？

适用场景

私密餐厅或品鉴菜单的官方展示页
主厨个人品牌或 supper club 的落地页
需要快速上线且注重 SEO 的餐饮概念验证
偏好暗色编辑风格并希望保持轻量的项目

适合人群

餐饮行业从业者或设计师
需要单页展示的餐厅或活动
熟悉 Astro 或静态站点生成器的开发者
注重可访问性与性能的团队

上手与定制指南

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

1
使用 GitHub 模板创建新仓库后，需在 `astro.config.mjs` 中设置正式域名，并在 `src/config/site.ts` 中更新预订表单的 `formAction`，替换默认的 mailto 链接。
2
首页内容在 `src/config/home.ts` 中编辑，图片替换位于 `src/assets`。
3
运行 `npm run check` 可进行类型检查，`npm run build` 构建静态站点。

查看仓库使用说明