Nova 是一套面向品牌设计工作室、网站制作团队和数字服务机构的 Astro 网站模板。首屏由米白底色、黑色大标题和不规则人物图片组成,向下串起案例、服务、团队、常见问题与客户评价,并提供英语、波兰语两套内容入口。

适合把少量代表案例和服务讲清楚的机构官网。 首页有两张重点项目卡片、四项服务和一个集中的联系入口,内容规模比较克制。若计划给每项服务、每个案例都建立独立详情页,还需要继续扩展路由和内容结构。
首页的业务展开方式
首屏先给出品牌主张和两个行动按钮,客户标志与数字统计紧随其后;接着展示作品、介绍服务和团队,最后引导读者到页脚的项目合作入口。读者可以顺着页面浏览,也能从顶部导航直接跳到相应区域。
| 页面区域 | 现有内容 | 替换重点 |
|---|---|---|
| 品牌首屏 | 大标题、人物图、双按钮、客户标志与统计 | 主打服务、人物照片、真实业绩 |
| 代表案例 | 网站与品牌设计两个示例项目 | 项目图片、类别与名称 |
| 服务与团队 | 四项编号服务、团队照片、成员头像 | 服务范围、人员资料与合作方式 |
| 常见问题与评价 | 四组问答、三条客户评价 | 项目流程、交付口径与真实反馈 |
| 合作入口 | 山景背景、合作文案、按钮和法律链接 | 联系方式与实际询盘去向 |
这是一套双语单页官网。当前构建共输出 7 个 HTML:英文首页、波兰语首页、两种语言各自的隐私政策与 Cookie 页面,以及一个 404 页。服务、作品和团队都在首页内,没有现成的案例详情页或独立服务页。
浅色版面的用图重点
Nova 的底色偏暖,标题以黑色为主,少量棕色用于强调词和按钮。正文与标题都采用 Satoshi 无衬线字体,圆角按钮和较大的区域间距让页面显得舒展。它更依赖照片的构图和内容质量,而不是装饰图标的数量。
首屏人物图放在不规则轮廓中,右侧和下方会随容器裁切。换图时最好让人脸和主要动作靠近画面中部,并留出周围背景;直接换成横向多人合照,容易把边缘人物截掉。下方项目图则适合放网站画面、品牌物料或完整作品场景,让两个案例各自有明确主题。
页面中的客户标志、项目统计、团队成员和评价均为示例。尤其是首屏的大数字很醒目,应与真实业务情况一起替换;没有可公开的数据时,删去相应统计项也比保留示例数值合适。
双语内容从哪里改
首页文案优先修改 src/data/i18n/nova.json。 这个文件集中存放 en、pl 两套首屏、导航、案例、服务、团队、问答和页脚内容。只改 src/data/sections/ 下的通用区块 JSON,Nova 首页的对应文案可能仍会被双语配置覆盖。
- 改文案与菜单:从
src/data/i18n/nova.json入手,同步检查按钮文字、锚点和页脚链接;英语首页也保留了部分波兰语区块 ID,改菜单文字时不必改这些 ID。 - 换照片与项目图:主要素材在
public/assets/images/t001-nova/,替换文件时保持图片路径一致,再查看首屏裁切和案例图的显示比例。 - 改配色与字体:主题变量在
src/styles/themes.css,全局样式在src/styles/global.css;修改背景、强调色和字体后应重新构建。 - 调整首页区域:
src/data/pages/index.json决定区块的选择与顺序,适合删减不需要的区域或调整服务、团队等内容的位置。 - 改公司与站点信息:检查
src/data/global/company.json、src/data/global/seo.json和site.config.mjs,避免只换首屏名称却留下示例公司或域名。
现有语言入口切换的是英语和波兰语路由,并不包含自动翻译功能。若只做英文站,可以在保留英文内容的同时精简波兰语入口;若改成中英双语,则需要继续修改语言配置和对应路由,不能只把菜单里的“PL”改成“中文”。
构建与联系入口
文件包采用 Astro、React 与 Tailwind CSS,锁文件对应的版本分别是 Astro 7.0.9、React 19.2.5 和 Tailwind CSS 4.3.2。项目要求 Node.js 22.12.0 或以上,可先用 npm ci 安装锁定依赖,再运行 npm run dev 调整页面,最后执行 npm run build 输出静态文件到 dist/。
本次演示已在临时副本中完成生产构建,并适配到子目录。包内构建脚本会按 BUILD_SCOPE 裁剪页面,博客和组件预览文件没有进入这次的 7 页产物;目录里有相关文件,不等于成品已经提供对应栏目。演示适配还恢复了清理脚本误删的本地字体,原始下载源码保持不变。
首页的菜单锚点、英波语言入口与 FAQ 展开结构已具备;“Start a project”目前跳到页脚合作区域,页脚按钮仍指向同一区域。 正式使用前,应把它接到实际联系页、咨询工具或询盘表单。
包内另有可复用表单组件与 send-form.php 示例,但当前 Nova 首页并未放入完整联系表单。需要邮件询盘时,还要加入表单、配置 PHP 运行环境和 SMTP 等参数;只上传静态产物不会获得邮件投递能力。














暂无评论内容