🖥️ Html Slideshow — Markdown转HTML幻灯片

将Markdown格式的演示大纲，经过AI内容理解后，自动分页切分，根据每页的布局规划生成对应HTML结构，最终生成可交互的静态HTML幻灯片。

优化后的工作流程

1️⃣ 内容理解

读取完整大纲/主题文稿，AI理解内容逻辑，从材料内容角度查漏补缺，将内容按照PPTX幻灯片的诉求重新梳理成完整大纲及内容。

核心要点：

• 不是简单复制原文，而是按PPT展示逻辑重构(财报类的模版financial.md）
• 提炼核心观点，每个章节/重点清晰呈现
• 补充必要的背景说明和过渡语句

2️⃣ 内容分页

根据新的完整大纲，AI理解内容逻辑，合理切分成页，每页单独保存md文件到 slides-md/ 目录。

分页原则：

• 每页一个独立完整的主题
• 逻辑连贯，避免内容割裂
• 适当留白，保持视觉呼吸感

3️⃣ 布局解析

读取每页md文件，解析"页面布局规划"字段，生成具体HTML布局结构（分栏、网格等）。

支持的布局：

• 左右分栏 / 两栏布局
• 2×2网格 / 四格布局
• 上中下纵向分布
• 左侧内容+右侧图表
• 表格展示、图表集成

4️⃣ 样式统一

全局CSS统一风格，支持多主题（default/nvidia/aliyun/dark），保持配色一致。

5️⃣ 交互完整

键盘翻页、全屏演示，支持任何现代浏览器。

---

特性

• 严格16:9比例：每页固定16:9，不滚动，完美适配演示屏
• 智能分页：AI理解内容逻辑，自动切分成逻辑完整的页面
• 布局识别：根据"页面布局规划"文字描述，生成对应HTML布局
• 完整键盘交互：方向键、空格、回车、退格都支持翻页，F键全屏
• 多主题支持：default(蓝色商务)、nvidia(绿色)、aliyun(橙色)、dark(深色)、tech(科技风格-白色主色调/黑色字体/红色高亮)
• 静态输出：纯HTML+CSS+JS，所有资源CDN加载，打开即可演示

使用方法

完整流程（从大纲到幻灯片）：

# 1. AI分析内容，理解重构+分页生成每页md
node /home/Vincent/.openclaw/workspace/skills/html-slideshow/scripts/split-slides.js \
  --input /path/to/outline.md \
  --output /path/to/output \
  --title "演示标题"
# 2. 根据每页md生成HTML
node /home/Vincent/.openclaw/workspace/skills/html-slideshow/scripts/generate-html.js \
  --input-dir /path/to/output/slides-md \
  --output /path/to/output/html \
  --title "演示标题" \
  --theme tech
# 或 aliyun/nvidia/dark/default

支持的布局

根据"页面布局规划"文字自动识别：

描述	生成布局
"左右分栏" / "两栏布局"	grid-template-columns: 1fr 1fr
"2×2网格" / "四四布局"	2行2列网格
"上中下" / "顶部标题+中部内容+底部总结"	flex纵向分布
"左侧表格右侧图表"	左侧表格 + 右侧图表容器

交互快捷键

按键	功能
→ / Space / Enter / PageDown	下一页
← / Backspace / PageUp	上一页
F / f	切换全屏
Esc	退出全屏

输出结构

output/
├── slides-md/ # 每页拆分后的markdown
│   ├── 01-cover.md
│   ├── 02-overview.md
│   └── ...
└── html/ # 最终HTML输出
    ├── index.html
    └── slides
        ├── 01-cover.html
        ├── 02-overview.html
        └── ...

依赖

• Node.js
• Chart.js (CDN)
• Marked (CDN)

示例

examples 目录包含完整示例。