History

lewis 43c4a74f63 feat(presenter): add true presenter view (S) with speaker script + timer Runtime (assets/runtime.js): - S key now opens a split-view presenter mode: current slide (left 55%) + next-slide preview + large-font speaker script (150-300 words, scrollable) + elapsed timer + page counter - Legacy bottom notes drawer moved to N key (keeps backward compat) - R key resets timer (only active inside presenter view) - Esc closes all overlays (overview / notes / presenter) - Auto-picks up <aside class="notes">, <div class="notes">, or .speaker-notes Styles (assets/base.css): - New .presenter-view grid layout with pv-main / pv-side / pv-notes / pv-bar - body.presenter-mode hides deck chrome from the operator's eye - Timer styled with JetBrains Mono green (#3fb950) New template (templates/full-decks/presenter-mode-reveal/): - 6-slide demo deck designed around the S key presenter flow - 5 presets via T key: tokyo-night, dracula, catppuccin-mocha, nord, corporate-clean - Every slide ships a complete 150-300 word <aside class="notes"> example written in the "3 rules of speaker script" style - Scoped .tpl-presenter-mode-reveal CSS with rule-row, feature-row, code-block - README explains the full authoring flow Docs: - New references/presenter-mode.md — when to use, 3 rules of \u9010\u5b57\u7a3f writing (\u63d0\u793a\u4fe1\u53f7 / 150-300 \u5b57 / \u53e3\u8bed), required HTML structure, common mistakes, standard AI prompt for generating speaker scripts - SKILL.md: upgraded template count 14 -> 15, added Presenter Mode section in 'When to use' with trigger keywords - full-decks.md: row 15 added with \ud83c\udfa4 marker - full-decks-index.html gallery now lists presenter-mode-reveal		2026-04-17 22:19:53 +08:00
..
README.md	feat(presenter): add true presenter view (S) with speaker script + timer	2026-04-17 22:19:53 +08:00
index.html	feat(presenter): add true presenter view (S) with speaker script + timer	2026-04-17 22:19:53 +08:00
style.css	feat(presenter): add true presenter view (S) with speaker script + timer	2026-04-17 22:19:53 +08:00

README.md

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 用 file:// 打开，主屏全屏、副屏按 S 进演讲者视图

README.md Unescape Escape