Compagnie l'Entr'Axes
性能98分:剧团没有预算养一个慢网站。
- 年份
- 2026
- 制作周期
- 3 周
- 技术栈
- Next.js · React · Tailwind · TypeScript · Vercel
- 设计
- 开发
- 本地 SEO
- 文案撰写

- Lighthouse 性能
- 98/100
- 年度托管费用
- 0 欧元
- 剧团成立年份
- 2009
需要解决的问题。
背景
La Compagnie l'Entr'Axes 是里昂的一个业余剧团,自 2009 年起由 Agnès Faye 领导:演出、工作坊、保留剧目。
限制
业余剧团既没有维护预算,也没有网站管理员。网站必须能独自运行好几个月,在演出日期不断变化的情况下保持更新,还要让人产生订票的冲动——而且不能有任何持续性成本。
对策
静态渲染、免费托管、内容存放在易读的数据文件中。演出排期使用真实日期:已结束的演出会自动转入保留剧目,而不会一直显示为“即将上演”。网站不可能在无人干预的情况下变得过时。
交付时测得的评分。
以下为线上网站的Lighthouse评分。我们如实公布:若某项分数偏低,其原因与改进计划会在下文写明,而不是避而不谈。
每一个设计取舍,及其理由。
戏剧化的视觉语域
高对比度衬线字体、深黑、幕布红。戏剧有着强烈的视觉符号;为了通用设计而忽略它们,会让剧场失去自己的身份。
演出排期放在最前面
近期演出日期排在剧团介绍之前。访问剧团网站的人想知道演什么、什么时候演;剧团的历史,他们随后才会感兴趣。
工作坊作为第二支柱
工作坊与演出同样是剧团的生命线。它们拥有自己的页面,写明时段、价格和报名方式——而不只是“关于我们”页面里的一行字。
项目配色
舞台黑
#141013
背景
幕布红
#A32639
品牌识别、强调色
象牙白
#F3EEE7
正文
聚光金
#C9A24B
细节点缀
字体系统
标题字体
Playfair Display 700
正文字体
Inter 400
迪多内(Didone)风格衬线体用于海报感标题,无衬线体用于演出排期。日期采用等宽数字,在日历中保持对齐。
幕后的技术实现。
- Next.js
- React
- Tailwind
- TypeScript
- Vercel
演出日期自动切换
每场演出都带有自己的日期。最后一场演出结束后,它会自动离开演出排期、进入保留剧目,无需任何人工操作。正是这一点,让一个没有管理员的网站始终保持准确。
性能得分 98
静态网站、两款自托管字体、不使用任何动画库、图片尺寸精确设定。以最低的预算,拿下了作品集中最高的性能分数。
零运行成本
没有应用服务器,没有数据库,免费托管。对一个协会来说,网站能否长久存续,首先取决于它的成本。
网站如何被搜索到。
带日期的 Event 结构化标记
每场演出都带有一个 Event 节点,包含日期、地点和订票链接。正是它让演出得以出现在活动类搜索结果中。
休闲出行类搜索
“Théâtre amateur Lyon”(里昂 业余剧团)、“spectacle Lyon ce week-end”(里昂 本周末演出)、“atelier théâtre adulte Lyon”(里昂 成人戏剧工作坊)。三种不同意图,三个页面。
人人都能使用。
自2025年6月起,《欧洲无障碍法案》(European Accessibility Act)要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理,而非事后补救。
黑色背景上的对比度经过核验
得分 94:深黑背景上的幕布红已调亮,使正文文字达到 4.5:1 的对比度。剩余扣分项涉及已明确识别的装饰性元素。
交付了哪些内容。
- 首页
- 演出排期
- 保留剧目
- 工作坊
- 剧团简介
- 订票
- 联系我们
项目的推进过程。
约束条件
没有任何维护预算:网站必须能自动保持更新。
设计
戏剧化视觉语域,演出排期置顶。
开发
静态网站、日期自动切换、免费托管。
SEO
Event 结构化标记,三组搜索词。


