3.0 KiB

Raw Blame History

presenter-mode-reveal · 演讲者模式模板

一份专为带逐字稿的技术分享设计的 full-deck 模板。核心卖点是真正可用的演讲者视图 (Presenter View)：当前页 + 下页预览 + 大字号逐字稿 + 计时器，全部集成在 runtime.js 里，零依赖。

使用场景

技术分享 / tech talk（30-60 min）
产品发布会主讲
课程讲授
任何需要照着讲、但不能念稿的正式演讲

快速开始

cp -r templates/full-decks/presenter-mode-reveal examples/my-talk
open examples/my-talk/index.html

键盘操作

键	动作
`S`	打开演讲者窗口（弹出新窗口，原页面不动）
`T`	切换主题（5 种预设）
`←` `→`	翻页
`Space` / `PgDn`	下一页
`F`	全屏
`O`	总览缩略图
`R`	重置计时器（仅演讲者视图下）
`Esc`	关闭所有浮层

主题切换

模板预设了 5 个适配演讲场景的主题，在 <html data-themes="..."> 属性里：

<html lang="zh-CN" data-themes="tokyo-night,dracula,catppuccin-mocha,nord,corporate-clean">

按 T 循环切换。可以改成任何 assets/themes/*.css 里的主题。

写逐字稿的规范

每一页的 <aside class="notes"> 里写 150–300 字。三条铁律：

不是讲稿，是提示信号 — 核心点加粗、过渡句成段、数据列清楚
150–300 字/页 — 按 2–3 分钟/页的节奏
用口语写 — "因此" → "所以"；"该方案" → "这个方案"；读一遍不拗口才对

示例：

<aside class="notes">
  <p>大家好，今天跟大家聊一个 <strong>很多人忽略的问题</strong>——...</p>
  <p>我先抛一个观点：<em>做 PPT 和讲 PPT 是两件事</em>。</p>
  <p>接下来我会用 3 个例子证明这个观点...</p>
</aside>

支持的 inline 标签：

<strong> — 高亮（橘色）
<em> — 斜体强调（蓝色）
<code> — 等宽字体
<p> — 分段（推荐每段讲 30-60 秒的内容）

文件结构

presenter-mode-reveal/
├── index.html       # 6 张示例 slide，每页都有完整逐字稿
├── style.css        # scoped .tpl-presenter-mode-reveal 样式
└── README.md        # 本文件

修改 / 扩展

加页：复制任意 <section class="slide"> 块，改内容和 <aside class="notes">
换主题：改 data-themes 列表，或直接改 <link id="theme-link" href="...">
改样式：只动 style.css，不要碰根目录的 assets/base.css
加动效：在元素上加 data-anim="fade-up" 等（参考 references/animations.md）

注意事项

观众永远看不到 .notes 内容 — CSS 默认 display:none，只在演讲者视图里可见
别把只给自己看的话写在 slide 本体上 — 所有提词必须在 <aside class="notes"> 里
双屏演讲：打开 index.html 按 S 弹出演讲者窗口，把观众窗口拖到投影/外接屏 F 全屏，演讲者窗口留在自己屏幕

3.0 KiB Raw Blame History Unescape Escape