国内脱口秀演员图鉴：一个纯静态网站的项目手记

37 位演员 · 4 大厂牌 · 20 个单口专场 · 零框架零构建 —— 把「查演员」做成查词典一样快

项目地址：gallery.developer.huaweicloud.com/gallery/003df27f82c00000
代码仓库：gitcode.com/qin_rui/standup-comedy-cn

一、为什么做它

脱口秀这几年在国内快速破圈——《脱口秀大会》《脱口秀和 Ta 的朋友们》《一年一度喜剧大赛》《喜剧之王单口季》接连捧红了一批演员。但行业信息一直很零散：

• 谁在哪个厂牌？笑果文化、单立人、喜剧联盒国……普通人分不清；
• 谁火到什么程度？「顶流」「一线」只是饭圈说法；
• 谁有什么专场值得去看？观众往往要翻豆瓣、大麦、猫眼好几个平台才能拼出来。

这个项目想解决的，就是上面这个问题：把零散信息结构化成一份可维护的数据清单，配一个轻量前端，让查演员像查词典一样快。

二、网站长什么样

一页式卡片网格，每位演员一张卡：

• 首字头像色块：没有照片也能一眼分辨，不同厂牌不同底色
• 厂牌徽章：笑果文化、单立人喜剧、喜剧联盒国、其他自由，四套配色
• 热门度星级：1~5 星，可排序
• 特点标签：文本型 / 表演型 / 谐音梗之王 / 女性视角 / 音乐脱口秀……
• 代表作：节目成绩、单曲、影视出圈作品
• 专场列表：带年份、评分、巡演范围等备注

配套功能三件套，可组合生效：

1. 搜索：按姓名 / 厂牌 / 标签模糊匹配
2. 筛选：厂牌按钮组（「全部」+ 各厂牌）
3. 排序：热门度降序（默认）⇄ 按姓名

三者叠加即时重渲染，无匹配结果时给出友好空状态和「一键重置」。

三、数据是怎么组织的

所有数据集中在一个文件 js/data.js，每个演员是一个 JS 对象：

{
  id: 'xiaolu',
  name: '小鹿',
  brand: '单立人喜剧',
  popularity: 4,
  tags: ['女性视角', '犀利文本', '婚姻/生育议题'],
  works: ['《奇葩说7》亚军', '《喜剧之王单口季》亚军/2024'],
  specials: [
    { name: '女儿红', note: '2022年笑果出品，豆瓣9.1分' }
  ],
  note: '单立人四大台柱之一；据媒体报道《奇葩说7》后签约米未传媒（未确证）'
}

数据与逻辑完全解耦：增删演员、改专场，只需改这一个文件，无需重新构建。

数据可信度处理

脱口秀行业人员流动大、公开信息混杂，我们不假装「确定」：

• 厂牌归属、签约/解约信息，部分基于公开媒体报道，未经官方逐一确认——这类条目在卡片上用 📌 小字标注「据媒体报道 / 未官方确认」；
• 单口专场只收录有公开演出/上线信息的场次，拿不准的一律不填；
• 数据截止 2026-09-18，每一条都尽量附来源（豆瓣条目、票务平台、新闻稿）。

最终收录：37 位演员、4 个厂牌、20 个单口专场，覆盖近年头部节目的常客与冠军。

四、技术架构

用户浏览器（桌面/移动端）
        │
        ▼
静态文件服务器（python3 -m http.server 8080）
        │
        ├── index.html     页面骨架
        ├── css/style.css  全部样式（响应式网格 + 厂牌配色）
        ├── js/app.js      渲染 / 搜索 / 筛选 / 排序
        └── js/data.js     演员数据（window.COMEDIANS 数组）

设计原则：

• 零依赖：原生 HTML + CSS + JavaScript，无框架、无构建工具、无外部 CDN，图标全部用 emoji；
• 低成本：任意静态文件服务器即可运行，部署成本几乎为零；
• 响应式：桌面 4 列网格 → 移动端单列。

本地运行只需要一行命令：

python3 -m http.server 8080
# 浏览器打开 http://localhost:8080

五、数据背后：一次「较真」的整理

项目里最容易出错的是事实信息。为了不让网站变成「段子手编的段子」，发布前做了一轮交叉核实：节目成绩以《脱口秀大会》历届排名、各平台总决赛报道为准；专场名以豆瓣条目、大麦/猫眼票务、新闻报道为准；人事变动（如谁离开笑果、谁签了哪家公司）尽量多源比对，实在对不上就标「未确证」。

过程里挖到不少惊喜：呼兰的《草台班子》已巡演超 100 场，周奇墨《不理解万岁》是笑果打造的首个大型个人专场巡演，小鹿的《女儿红》豆瓣 9.1 分讲的是月经羞耻与生育焦虑……这些细节，都沉淀成了卡片上的备注。

六、发布与联系方式

• 华为云高校运营平台展览馆：作品链接（HCSD 校园大使圈层激励活动 · 通用场）
• 线上实时预览（DevBridge 隧道）：https://qpampgao-8080.cn-north-4-bridge.myhuaweicloud.com
• 源码：qin_rui/standup-comedy-cn（main 分支）

七、后续想做的事

• 数据持续更新：新一季节目、新专场、人员变动，同步进 data.js；
• 厂牌页：按厂牌聚合演员，展示厂牌风格画像；
• 专场日历：抓取票务信息，按城市/时间列出可购专场；
• 头像与视频：后续接入演员照片与代表段子片段（注意版权）。

如果你也对脱口秀感兴趣，欢迎 Star 这个仓库，或者顺手补充你喜欢的演员。