Reveal.js Skill

将演示稿交给浏览器:真实图表、可改网页和可编排布局。

经营复盘 · 数据趋势

本次实作 · 演示数据

研究展示 · 样本构成

本次实作 · 演示数据

产品发布 · 主视觉

IDEAS
IN MOTION

把你的观点带到现场

本次实作 · 品牌式排版

技术教学 · 代码解释

const data = [20,32,45];
chart.data = data;
chart.update();

本次实作 · 代码文本布局

方法培训 · 进程

01

明确主张

02

设计证据

03

现场沟通

本次实作 · 有序布局

方案讨论 · 两栏对照

静态稿

便于归档
交互不保留

网页稿

图表可响应
源码可维护

本次实作 · 内容对照

场景:经营复盘 / 研究讲解 / 产品分享  人群:经营团队 / 研究人员 / 内容创作者

浏览器改字 + 真正的网页图表

两个特色:附带内容编辑器;Chart.js 直接读取演示数据。

图表演示:改变 data 数组即可更新

data: [24, 36, 28, 48]
maintainAspectRatio: false

本次真实 Canvas 图表;演示数据。不是 PowerPoint 图表对象。

01 浏览器内编辑

edit-html.js 启动编辑页;点击文字、修改、保存HTML。

02 Chart.js 图表

柱形、折线、环形等;数据和样式在源码中维护。

03 结构脚手架

脚本生成水平页、垂直页组与章节页。

04 检查与网页排版

内置溢出检查;CSS主题与网格可按内容调整。

边界:HTML文字不等于PPT原生文字;依赖CDN的原始脚手架离线时需把资源本地化。

交付 HTML,编辑也留在 HTML

本次验证网页 3 页、图表渲染与截图;没有冒充原生 PPTX。

输入格式

支持:HTML / CSS
图表 JSON / CSV

输出格式

支持:HTML / CSS
PDF和PNG经浏览器导出

原生文字

不支持(PowerPoint)
HTML文字可直接编辑

原生形状

不支持(PowerPoint)
CSS布局保留在网页

原生图表 / 数据

不支持(PowerPoint)
网页Chart.js数据可修改

图片

支持:网页图片/背景
本次为图表与文字实作

母版 / 品牌

部分支持:CSS主题
非PowerPoint母版

修改方式

HTML/CSS或浏览器编辑器
图表修改data数组

运行依赖

浏览器 / Reveal.js
Node用于辅助脚本

优先选它的条件

面向浏览器演讲,团队能维护 HTML 与 CSS。

换另一条路线的条件

必须交付可逐对象编辑的 PowerPoint 文件。

本次产物:presentation.html、styles.css、PDF、PNG;可运行附带 edit-html.js 微调文字。