# Interactive HTML > 生成带数据嵌入、JS 交互的单文件离线 HTML 页面。当用户要求生成交互式网页、可视化数据浏览器、单文件 SPA、带侧边栏导航的展示页、Markdown 渲染器时触发。触发词："做一个网页"、"生成 HTML"、"交互式展示"、"可视化"、"数据浏览器"。 - Skill: `justcyl/interactive-html` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add justcyl/interactive-html` - Raw SKILL.md: https://api.skillmd.com/api/skills/justcyl/interactive-html/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: justcyl (https://skillmd.com/u/justcyl) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/justcyl/interactive-html --- # 交互式 HTML 生成器 生成可直接用浏览器打开（`file://`）的单文件离线 HTML，包含数据嵌入、JS 交互和 Markdown 渲染。 ## 核心判断：直接写 vs Python 脚本生成 | 场景 | 方式 | |---|---| | 内容静态、无大量数据（< 200 行）| 直接写 HTML | | 数据从文件读取，或数据 > 50KB | **用 Python 脚本生成** | | 内容含用户数据（代码/文档/Markdown）| **必须用 Python 脚本生成** | > 用户数据中几乎肯定含有反引号、单引号、`` 等危险字符，直接拼接必崩。Python 生成可以在写入前做统一转义。 ## Python 脚本生成模式（推荐） 写一个 `gen_xxx.py`，数据处理和 HTML 模板分离，执行后输出 HTML 文件： ```python import json from pathlib import Path # 1. 读取/处理数据 data = {...} # 2. 序列化并转义（关键！） data_json = json.dumps(data, ensure_ascii=False).replace(" ... """ Path("output.html").write_text(html, encoding="utf-8") ``` ## 必须用的验证清单 每次生成后执行（见 `references/pitfalls.md` 了解每项原因）： ```bash # 1. HTML 解析无错 python3 -c " from html.parser import HTMLParser c = HTMLParser(); c.feed(open('output.html').read()) print('HTML OK') " # 2. JS 语法无错（仅检查语法，不运行） node --check <(python3 -c " c = open('output.html').read() js = c[c.rindex('')] print('(function(){'); print(js); print('})()') ") # 3. JSON 数据可解析 python3 -c " import re, json m = re.search(r'id=\"app-data\">(.*?)', open('output.html').read(), re.DOTALL) json.loads(m.group(1)); print('JSON OK') " ``` ## 布局选型 **浏览型内容**（用户需要选择 + 查看详情）→ **三栏无弹窗**： ``` [左栏: 列表/导航] [中栏: 卡片/筛选] [右栏: 详情直接显示] ``` 点击即在右栏展示，不要弹窗。弹窗适合偶发操作，不适合连续浏览。 **文档/报告型内容** → **左侧固定导航 + 右侧滚动内容区**，section 切换用 JS show/hide。 **数据展示型** → 参考 `references/layouts.md`。 ## 树形结构必须用 `
`

```html


├── core/
│   └── file.py




├── core/
│   └── file.py


```

## onclick 不能嵌入内容字符串

```html







```

## Markdown 渲染

用 CDN（离线可访问时）或内联 `marked.min.js`：
```html


```

frontmatter 段单独用 `
` 渲染，正文才走 `marked.parse()`。

## 文件大小控制

- 单次不写超过 ~1000 行；内容多时先写骨架 + 占位符，再用 `edit` 分段填充
- 嵌入大数据（> 500KB）时，HTML 体积通常 1–2MB，现代浏览器可接受
- 数据和 HTML 骨架分离（generator 脚本），数据变化时只需重跑脚本

## 详细踩坑说明

→ 见 `references/pitfalls.md`（`` 截断、Python `\n` 陷阱、f-string 花括号冲突等 8 项完整说明）