📊
A 型 · 数据表格
layout-table.html (1110 行)
文件索引项目管理 数据浏览技能清单
  • 🔍 实时搜索 + Cmd+F Spotlight 弹窗
  • 🔽 多字段排序 + Shift 二级排序 + 中文 locale
  • 📏 密度切换 (紧凑/标准/舒适)
  • 🖱️ 四种点击模式 (新标签/弹出面板/分栏预览/行内展开)
  • 📌 快速过滤 (点击单元格值) + 列冻结
  • ⌨️ 键盘导航 ↑↓ + F 全屏 + 批量操作
  • 💾 视图预设 + localStorage 状态记忆
$ html-gen table -d data.json -o index.html
📄
B 型 · 文档阅读
layout-doc.html (436 行)
分析报告知识库 长文阅读技术文档
  • 📑 自动 TOC + 🔍 TOC 搜索 (150ms debounce)
  • ◀▶ 侧边栏折叠/展开 (48px 收起, [ 快捷键)
  • ↔ 侧边栏宽度拖拽 (200-400px)
  • 🌙☀️ 深色/浅色主题 + 🇨🇳🇺🇸 中英双语
  • 📋 代码复制 + 行号 + Callout + 阅读进度条
  • 🖼️ 图片灯箱 + 📌 锚点链接 + 🔗 外链归档
$ html-gen doc -i report.md -o report.html
📚
C 型 · 知识库
layout-knowledge.html (342 行)
知识库面试准备 技术文档项目 Wiki
  • 📑 顶部标签栏 + 左侧章节列表 (badge 标记)
  • 🔍 侧边栏搜索 (150ms debounce, section 自动隐藏)
  • ◀▶ 侧边栏折叠 + ↔ 宽度拖拽 (200-400px)
  • 🌙☀️ 主题 + 🇨🇳🇺🇸 双语 + 右上角工具栏
  • 📖 iframe / 内联 desc 双内容模式 + 欢迎面板
  • 💾 localStorage 状态记忆 (group + item)
$ html-gen knowledge -d data.json -o kb.html
🖼️
D 型 · 幻灯片
layout-slide.html (673 行)
课件演示会议分享 分段阅读演讲投屏
  • 📄 h2 自动分页 + 🖼️ 封面页 + H3 双列模式
  • 🔍 TOC 搜索 + 章节高亮 (翻页联动)
  • ◀▶ 侧边栏折叠 + ↔ 宽度拖拽 (200-400px)
  • 🌙☀️ 主题 + 🇨🇳🇺🇸 双语 + 右上角工具栏
  • ⌨️ 键盘翻页 (←→ Space Home End) + ● 圆点导航
  • 💾 localStorage 进度保存 + 页码实时更新 (i18n)
$ html-gen slide -i slides.md -o slides.html
⬇ 所有页面共享同一 Layer 1 样式基座 ⬇
🎨
Layer 1 · style-guide.css
样式基座 · 8K
CSS 变量 按钮系统 表格 弹窗 分页 Badge 表单

--cobalt-* 色系深色主题,CSS 变量驱动。:root.light 浅色覆盖。 所有模板通过生成器 inline 方式引入,输出自包含单文件。

Layer 3 · html-gen.py
CLI 生成器 · 546 行 · 零依赖
doc slide table knowledge help Markdown→HTML inject() company-report

读取模板 → inline CSS → 注入数据 → 输出自包含单文件 HTML。 纯 Python stdlib,零外部依赖。company-report.py 高层封装。

案例演示清单

完整清单(40 个 demo,含类型分组/引用子页/过期标记)用命令行查看: html-gen demo list

📚 知识库(C 型)
以剧读史 · 影视历史知识库
长亭科技商业分析
knowledge 模板 demo
🗂 表格(A 型)
A 型索引
Hermes Skills 列表
phase2 功能 demo
操作按钮 demo
全球国家速查表
📄 文档(B 型)
使用指南
A 型指南
B 型指南
Markdown 规范
D 型幻灯片