国内脱口秀演员图鉴 🎤

一个纯静态的《国内脱口秀演员图鉴》网站：一页速览国内脱口秀演员的厂牌、热门程度、特点标签、代表作与单口专场。支持搜索、厂牌筛选与排序，三者可组合生效。

技术栈

• 原生 HTML + CSS + JavaScript（ES5 风格，兼容性友好）
• 无框架、无构建工具、无外部 CDN（图标全部使用 emoji）
• 只需一个静态文件服务器即可运行

如何运行

在本目录下执行：

python3 -m http.server 8080

然后浏览器打开 http://localhost:8080 即可。

如果你想同时绑定到外部可访问地址：

python3 -m http.server 8080 --bind 0.0.0.0

文件结构

├── index.html      # 页面骨架（标题区 / 工具栏 / 卡片网格 / 空状态 / 页脚）
├── css/style.css   # 全部样式（暖色底 + 橙/紫点缀，响应式网格）
├── js/data.js      # 演员数据（全局 window.COMEDIANS 数组）
├── js/app.js       # 渲染、筛选、排序、搜索逻辑
└── README.md       # 本说明

如何增删演员 / 修改数据

所有数据都在 js/data.js 中，直接以 JS 对象字面量编写（无需 JSON.parse），每个演员是一个对象：

{
  id: 'xiaolu',                    // 唯一英文标识（建议用拼音）
  name: '小鹿',                    // 姓名
  brand: '单立人喜剧',             // 所属厂牌（见下方厂牌说明）
  popularity: 4,                   // 热门程度 1~5 整数（星级按此渲染）
  tags: ['女性视角', '犀利文本'],   // 特点标签（渲染为小 chip）
  works: ['《奇葩说7》亚军'],       // 代表作列表
  specials: [                      // 单口专场：对象数组；没有就留空数组 []
    { name: '女儿红', note: '2022年笑果出品，豆瓣9.1分' }
  ],
  note: '单立人四大台柱之一；据媒体报道……（未确证）'   // 可选：厂牌/近况补充说明
}

字段说明

字段	必填	说明
id	✅	唯一英文标识，用于区分角色
name	✅	姓名
brand	✅	厂牌名称，取数据中实际出现过的值
popularity	✅	1~5 整数，热度
tags	✅	String 数组，特点标签
works	✅	String 数组，代表作
specials	✅	对象数组：{ name, note }；note（备注，如年份/评分）可省略；没有专场留 []
note	⬜	String，厂牌/近况补充说明，卡片底部一行小字渲染（📌 前缀）

specials 示例：

specials: [
  { name: '伊卡洛斯', note: '第6个专场，豆瓣8.8分' },
  { name: '身心俱疲' }            // note 可省略
]

新增一位演员

1. 打开 js/data.js；
2. 在 window.COMEDIANS = [...] 数组末尾（注意保留前一行的逗号）追加新对象；
3. 保存后刷新页面即可，无需重新构建。

示例：

{
  id: 'wuyanzu',
  name: '吴彦祖',
  brand: '其他自由',
  popularity: 3,
  tags: ['客串型', '颜值担当'],
  works: ['《吐槽大会》飞行嘉宾'],
  specials: []
}

删除 / 修改

• 删除：直接删掉对应的对象及其所在行；
• 修改：改对象里的字段即可；
• 注意：brand 需与数据中已出现的厂牌文案保持一致，否则按钮组不会显示对应筛选（厂牌按钮由数据中实际出现的 brand 自动生成）；未映射的厂牌会使用「其他自由」的默认配色。

新增一个厂牌

若想扩展新厂牌（如「大风天喜剧」），除了在数据中正确填写 brand，还需要在：

• css/style.css 中为新厂牌追加「头像底色」和「徽章颜色」两项规则，类名规则为 brand-xxx；
• js/app.js 的 BRAND_CLASS_MAP 中声明 '厂牌名': 'brand-xxx' 的映射。

功能说明

• 搜索：按姓名 / 厂牌 / 标签模糊匹配（不区分大小写）；
• 厂牌筛选：按钮组「全部 + 各厂牌」自动取自数据中出现的 brand；
• 排序：默认按热门程度降序，可切换为按姓名排序；
• 三者可组合生效，操作即时重渲染；无可匹配结果时显示空状态提示并一键重置。

数据说明

• 数据截止日期：2026-09-18。
• 演员的厂牌归属、签约/解约、近况等信息，部分基于公开媒体报道，未经官方逐一确认，可能与实际情况存在出入；凡存在不确定性的条目，均以数据内 note 字段的标注为准（如「据媒体报道」「未官方确认」等）。
• 单口专场只收录有公开演出/上线信息的场次，拿不准的一律不填或留空 note。
• 数据仅供娱乐参考。