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
This commit is contained in:
lewis
parent
c52acbff47
commit
43c4a74f63
25
SKILL.md
25
SKILL.md
|
|
@ -20,11 +20,11 @@ One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.
|
||||||
## What the skill gives you
|
## What the skill gives you
|
||||||
|
|
||||||
- **36 themes** (`assets/themes/*.css`) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
|
- **36 themes** (`assets/themes/*.css`) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
|
||||||
- **14 full-deck templates** (`templates/full-decks/<name>/`) — complete multi-slide decks with scoped `.tpl-<name>` CSS. 8 extracted from real-world decks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 6 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module)
|
- **15 full-deck templates** (`templates/full-decks/<name>/`) — complete multi-slide decks with scoped `.tpl-<name>` CSS. 8 extracted from real-world decks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal), 7 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, **presenter-mode-reveal** — 演讲者模式专用)
|
||||||
- **31 layouts** (`templates/single-page/*.html`) with realistic demo data
|
- **31 layouts** (`templates/single-page/*.html`) with realistic demo data
|
||||||
- **27 CSS animations** (`assets/animations/animations.css`) via `data-anim`
|
- **27 CSS animations** (`assets/animations/animations.css`) via `data-anim`
|
||||||
- **20 canvas FX animations** (`assets/animations/fx/*.js`) via `data-fx` — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
|
- **20 canvas FX animations** (`assets/animations/fx/*.js`) via `data-fx` — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
|
||||||
- **Keyboard runtime** (`assets/runtime.js`) — arrows, T (theme), A (anim), F/S/O
|
- **Keyboard runtime** (`assets/runtime.js`) — arrows, T (theme), A (anim), F/O, **S (presenter view: current + next + large speaker script + timer)**, N (legacy notes drawer), R (reset timer)
|
||||||
- **FX runtime** (`assets/animations/fx-runtime.js`) — auto-inits `[data-fx]` on slide enter, cleans up on leave
|
- **FX runtime** (`assets/animations/fx-runtime.js`) — auto-inits `[data-fx]` on slide enter, cleans up on leave
|
||||||
- **Showcase decks** for themes / layouts / animations / full-decks gallery
|
- **Showcase decks** for themes / layouts / animations / full-decks gallery
|
||||||
- **Headless Chrome render script** for PNG export
|
- **Headless Chrome render script** for PNG export
|
||||||
|
|
@ -34,6 +34,19 @@ One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.
|
||||||
Use when the user asks for any kind of slide-based output or wants to turn
|
Use when the user asks for any kind of slide-based output or wants to turn
|
||||||
text/notes into a presentable deck. Prefer this over building from scratch.
|
text/notes into a presentable deck. Prefer this over building from scratch.
|
||||||
|
|
||||||
|
### 🎤 Presenter Mode (演讲者模式 + 逐字稿)
|
||||||
|
|
||||||
|
If the user mentions any of: **演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器**, or says things like "我要去给团队讲 xxx", "要做一场技术分享", "怕讲不流畅", "想要一份带逐字稿的 PPT" — **use the `presenter-mode-reveal` full-deck template** and write 150–300 words of 逐字稿 in each slide's `<aside class="notes">`.
|
||||||
|
|
||||||
|
See [references/presenter-mode.md](references/presenter-mode.md) for the full authoring guide including the 3 rules of speaker script writing:
|
||||||
|
1. **不是讲稿，是提示信号** — 加粗核心词 + 过渡句独立成段
|
||||||
|
2. **每页 150–300 字** — 2–3 分钟/页的节奏
|
||||||
|
3. **用口语，不用书面语** — "因此"→"所以"，"该方案"→"这个方案"
|
||||||
|
|
||||||
|
All full-deck templates technically support the S key presenter view (it's built into `runtime.js`), but only `presenter-mode-reveal` is designed from the ground up around the feature with proper example 逐字稿 on every slide.
|
||||||
|
|
||||||
|
Keyboard in presenter mode: `S` toggle · `T` cycle theme · `← →` navigate · `R` reset timer · `Esc` close.
|
||||||
|
|
||||||
## Before you author anything — ALWAYS ask or recommend
|
## Before you author anything — ALWAYS ask or recommend
|
||||||
|
|
||||||
**Do not start writing slides until you understand three things.** Either ask
|
**Do not start writing slides until you understand three things.** Either ask
|
||||||
|
|
@ -132,7 +145,8 @@ Chinese + English deck, and how to export.
|
||||||
- [references/themes.md](references/themes.md) — all 36 themes with when-to-use.
|
- [references/themes.md](references/themes.md) — all 36 themes with when-to-use.
|
||||||
- [references/layouts.md](references/layouts.md) — all 31 layout types.
|
- [references/layouts.md](references/layouts.md) — all 31 layout types.
|
||||||
- [references/animations.md](references/animations.md) — 27 CSS + 20 canvas FX animations.
|
- [references/animations.md](references/animations.md) — 27 CSS + 20 canvas FX animations.
|
||||||
- [references/full-decks.md](references/full-decks.md) — all 14 full-deck templates.
|
- [references/full-decks.md](references/full-decks.md) — all 15 full-deck templates.
|
||||||
|
- [references/presenter-mode.md](references/presenter-mode.md) — **演讲者模式 + 逐字稿编写指南（技术分享/演讲必看）**.
|
||||||
- [references/authoring-guide.md](references/authoring-guide.md) — full workflow.
|
- [references/authoring-guide.md](references/authoring-guide.md) — full workflow.
|
||||||
|
|
||||||
## File structure
|
## File structure
|
||||||
|
|
@ -180,11 +194,14 @@ capture, runtime.js exposes `#/N` deep-links, and render.sh iterates 1..N.
|
||||||
```
|
```
|
||||||
← → Space PgUp PgDn Home End navigate
|
← → Space PgUp PgDn Home End navigate
|
||||||
F fullscreen
|
F fullscreen
|
||||||
S speaker notes overlay
|
S presenter view (current + next + script + timer)
|
||||||
|
N quick notes drawer (bottom, legacy)
|
||||||
|
R reset timer (only in presenter view)
|
||||||
O slide overview grid
|
O slide overview grid
|
||||||
T cycle themes (reads data-themes attr)
|
T cycle themes (reads data-themes attr)
|
||||||
A cycle demo animation on current slide
|
A cycle demo animation on current slide
|
||||||
#/N in URL deep-link to slide N
|
#/N in URL deep-link to slide N
|
||||||
|
Esc close all overlays
|
||||||
```
|
```
|
||||||
|
|
||||||
## License & author
|
## License & author
|
||||||
|
|
|
||||||
|
|
@ -131,6 +131,47 @@ h4,.h4{font-size:22px;line-height:1.3;font-weight:600;margin:0 0 8px}
|
||||||
.overview .thumb .n{position:absolute;top:8px;left:10px;font-weight:700;font-size:14px;color:var(--text-3)}
|
.overview .thumb .n{position:absolute;top:8px;left:10px;font-weight:700;font-size:14px;color:var(--text-3)}
|
||||||
.overview .thumb .t{position:absolute;bottom:10px;left:14px;right:14px;font-weight:600;color:var(--text-1)}
|
.overview .thumb .t{position:absolute;bottom:10px;left:14px;right:14px;font-weight:600;color:var(--text-1)}
|
||||||
|
|
||||||
|
/* ================= PRESENTER VIEW ================= */
|
||||||
|
/* Split-view presenter mode: current slide + next preview + speaker script + timer.
|
||||||
|
* Toggle with S key. Hides the audience deck, shows this view only to presenter. */
|
||||||
|
.presenter-view{position:fixed;inset:0;z-index:80;display:none;
|
||||||
|
background:#0a0e1a;color:#e6edf3;font-family:var(--font-sans);
|
||||||
|
grid-template-columns:1.35fr 1fr;gap:20px;padding:20px}
|
||||||
|
.presenter-view.open{display:grid}
|
||||||
|
body.presenter-mode .deck,
|
||||||
|
body.presenter-mode .progress-bar,
|
||||||
|
body.presenter-mode .deck-header,
|
||||||
|
body.presenter-mode .deck-footer,
|
||||||
|
body.presenter-mode .notes-overlay{display:none!important}
|
||||||
|
.pv-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8b949e;
|
||||||
|
margin-bottom:8px;font-weight:600}
|
||||||
|
.pv-main{display:flex;flex-direction:column;min-height:0}
|
||||||
|
.pv-stage{flex:1;background:var(--bg,#0d1117);border:1px solid rgba(255,255,255,.08);
|
||||||
|
border-radius:14px;overflow:hidden;position:relative}
|
||||||
|
.pv-stage .slide{position:absolute;inset:0;transform:none!important;opacity:1!important;
|
||||||
|
width:100%;height:100%}
|
||||||
|
.pv-side{display:flex;flex-direction:column;gap:14px;min-height:0}
|
||||||
|
.pv-next{flex:0 0 30%;display:flex;flex-direction:column;min-height:0}
|
||||||
|
.pv-next-stage{border:1px solid rgba(255,255,255,.06);border-radius:10px;opacity:.85}
|
||||||
|
.pv-next .pv-end{display:flex;align-items:center;justify-content:center;height:100%;
|
||||||
|
font-size:18px;color:#8b949e;letter-spacing:.12em}
|
||||||
|
.pv-notes{flex:1;display:flex;flex-direction:column;min-height:0;
|
||||||
|
background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
|
||||||
|
border-radius:12px;padding:16px 20px}
|
||||||
|
.pv-notes-body{flex:1;overflow:auto;font-size:18px;line-height:1.75;color:#d0d7de;
|
||||||
|
padding-right:6px;font-family:var(--font-sans)}
|
||||||
|
.pv-notes-body p{margin:0 0 .8em 0}
|
||||||
|
.pv-notes-body strong{color:#f0883e}
|
||||||
|
.pv-notes-body em{color:#58a6ff;font-style:normal}
|
||||||
|
.pv-empty{color:#484f58;font-style:italic}
|
||||||
|
.pv-bar{display:flex;align-items:center;gap:16px;padding:10px 14px;
|
||||||
|
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
|
||||||
|
border-radius:10px;font-size:13px;color:#8b949e}
|
||||||
|
.pv-timer{font-family:var(--font-mono,monospace);font-size:22px;font-weight:700;color:#3fb950;
|
||||||
|
letter-spacing:.04em}
|
||||||
|
.pv-count{font-weight:600;color:#e6edf3}
|
||||||
|
.pv-hint{margin-left:auto;font-size:11px;color:#6e7681;letter-spacing:.08em}
|
||||||
|
|
||||||
/* ================= UTILITY ================= */
|
/* ================= UTILITY ================= */
|
||||||
.hidden{display:none!important}
|
.hidden{display:none!important}
|
||||||
.nowrap{white-space:nowrap}
|
.nowrap{white-space:nowrap}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,8 @@
|
||||||
* Features:
|
* Features:
|
||||||
* ← → / space / PgUp PgDn / Home End navigation
|
* ← → / space / PgUp PgDn / Home End navigation
|
||||||
* F fullscreen
|
* F fullscreen
|
||||||
* S speaker notes overlay
|
* S presenter mode (split view: current + next + notes + timer)
|
||||||
|
* N quick notes overlay (bottom drawer, legacy)
|
||||||
* O slide overview grid
|
* O slide overview grid
|
||||||
* T cycle themes (reads data-themes on <html> or <body>)
|
* T cycle themes (reads data-themes on <html> or <body>)
|
||||||
* A cycle demo animation on current slide
|
* A cycle demo animation on current slide
|
||||||
|
|
@ -76,9 +77,11 @@
|
||||||
barFill.style.width = ((n+1)/total*100)+'%';
|
barFill.style.width = ((n+1)/total*100)+'%';
|
||||||
const numEl = document.querySelector('.slide-number');
|
const numEl = document.querySelector('.slide-number');
|
||||||
if (numEl) { numEl.setAttribute('data-current', n+1); numEl.setAttribute('data-total', total); }
|
if (numEl) { numEl.setAttribute('data-current', n+1); numEl.setAttribute('data-total', total); }
|
||||||
// notes
|
// notes (bottom overlay, legacy N key)
|
||||||
const note = slides[n].querySelector('.notes');
|
const note = slides[n].querySelector('.notes, aside.notes, .speaker-notes');
|
||||||
notes.innerHTML = note ? note.innerHTML : '';
|
notes.innerHTML = note ? note.innerHTML : '';
|
||||||
|
// presenter view live update
|
||||||
|
renderPresenter(n);
|
||||||
// hash
|
// hash
|
||||||
if (location.hash !== '#/'+(n+1)) history.replaceState(null,'','#/'+(n+1));
|
if (location.hash !== '#/'+(n+1)) history.replaceState(null,'','#/'+(n+1));
|
||||||
// re-trigger entry animations
|
// re-trigger entry animations
|
||||||
|
|
@ -106,6 +109,98 @@
|
||||||
|
|
||||||
function toggleNotes(force){ notes.classList.toggle('open', force!==undefined?force:!notes.classList.contains('open')); }
|
function toggleNotes(force){ notes.classList.toggle('open', force!==undefined?force:!notes.classList.contains('open')); }
|
||||||
function toggleOverview(force){ overview.classList.toggle('open', force!==undefined?force:!overview.classList.contains('open')); }
|
function toggleOverview(force){ overview.classList.toggle('open', force!==undefined?force:!overview.classList.contains('open')); }
|
||||||
|
|
||||||
|
// ========== PRESENTER MODE ==========
|
||||||
|
// Split view: current slide (left) + next slide thumb + large speaker notes + timer
|
||||||
|
let presenter = document.querySelector('.presenter-view');
|
||||||
|
if (!presenter) {
|
||||||
|
presenter = document.createElement('div');
|
||||||
|
presenter.className = 'presenter-view';
|
||||||
|
presenter.innerHTML = ''
|
||||||
|
+ '<div class="pv-main">'
|
||||||
|
+ '<div class="pv-label">CURRENT</div>'
|
||||||
|
+ '<div class="pv-stage" id="pv-stage"></div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div class="pv-side">'
|
||||||
|
+ '<div class="pv-next">'
|
||||||
|
+ '<div class="pv-label">NEXT</div>'
|
||||||
|
+ '<div class="pv-stage pv-next-stage" id="pv-next"></div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div class="pv-notes">'
|
||||||
|
+ '<div class="pv-label">SPEAKER SCRIPT · 逐字稿</div>'
|
||||||
|
+ '<div class="pv-notes-body" id="pv-notes-body"></div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div class="pv-bar">'
|
||||||
|
+ '<div class="pv-timer" id="pv-timer">00:00</div>'
|
||||||
|
+ '<div class="pv-count" id="pv-count">1 / ' + total + '</div>'
|
||||||
|
+ '<div class="pv-hint">S 退出 · ← → 翻页 · R 重置计时</div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>';
|
||||||
|
document.body.appendChild(presenter);
|
||||||
|
}
|
||||||
|
const pvStage = presenter.querySelector('#pv-stage');
|
||||||
|
const pvNext = presenter.querySelector('#pv-next');
|
||||||
|
const pvBody = presenter.querySelector('#pv-notes-body');
|
||||||
|
const pvTimer = presenter.querySelector('#pv-timer');
|
||||||
|
const pvCount = presenter.querySelector('#pv-count');
|
||||||
|
|
||||||
|
let timerStart = 0, timerHandle = null;
|
||||||
|
function fmtTime(ms){
|
||||||
|
const s = Math.floor(ms/1000);
|
||||||
|
const mm = String(Math.floor(s/60)).padStart(2,'0');
|
||||||
|
const ss = String(s%60).padStart(2,'0');
|
||||||
|
return mm + ':' + ss;
|
||||||
|
}
|
||||||
|
function startTimer(){
|
||||||
|
if (timerHandle) return;
|
||||||
|
timerStart = Date.now();
|
||||||
|
timerHandle = setInterval(() => {
|
||||||
|
pvTimer.textContent = fmtTime(Date.now() - timerStart);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
function stopTimer(){ if (timerHandle) { clearInterval(timerHandle); timerHandle = null; } }
|
||||||
|
function resetTimer(){ timerStart = Date.now(); pvTimer.textContent = '00:00'; }
|
||||||
|
|
||||||
|
function renderPresenter(n){
|
||||||
|
if (!presenter.classList.contains('open')) return;
|
||||||
|
// Clone current + next slides for mini display
|
||||||
|
pvStage.innerHTML = '';
|
||||||
|
pvNext.innerHTML = '';
|
||||||
|
const curClone = slides[n].cloneNode(true);
|
||||||
|
curClone.style.position = 'relative';
|
||||||
|
curClone.style.opacity = '1';
|
||||||
|
curClone.style.transform = 'none';
|
||||||
|
curClone.classList.add('is-active');
|
||||||
|
pvStage.appendChild(curClone);
|
||||||
|
|
||||||
|
if (n + 1 < total) {
|
||||||
|
const nxtClone = slides[n+1].cloneNode(true);
|
||||||
|
nxtClone.style.position = 'relative';
|
||||||
|
nxtClone.style.opacity = '1';
|
||||||
|
nxtClone.style.transform = 'none';
|
||||||
|
nxtClone.classList.add('is-active');
|
||||||
|
pvNext.appendChild(nxtClone);
|
||||||
|
} else {
|
||||||
|
pvNext.innerHTML = '<div class="pv-end">— END —</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Notes
|
||||||
|
const note = slides[n].querySelector('.notes, aside.notes, .speaker-notes');
|
||||||
|
pvBody.innerHTML = note ? note.innerHTML : '<span class="pv-empty">（这一页还没有逐字稿）</span>';
|
||||||
|
pvCount.textContent = (n+1) + ' / ' + total;
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePresenter(force){
|
||||||
|
const willOpen = force !== undefined ? force : !presenter.classList.contains('open');
|
||||||
|
presenter.classList.toggle('open', willOpen);
|
||||||
|
document.body.classList.toggle('presenter-mode', willOpen);
|
||||||
|
if (willOpen) {
|
||||||
|
startTimer();
|
||||||
|
renderPresenter(idx);
|
||||||
|
} else {
|
||||||
|
stopTimer();
|
||||||
|
}
|
||||||
|
}
|
||||||
function fullscreen(){ const el=document.documentElement;
|
function fullscreen(){ const el=document.documentElement;
|
||||||
if (!document.fullscreenElement) el.requestFullscreen&&el.requestFullscreen();
|
if (!document.fullscreenElement) el.requestFullscreen&&el.requestFullscreen();
|
||||||
else document.exitFullscreen&&document.exitFullscreen();
|
else document.exitFullscreen&&document.exitFullscreen();
|
||||||
|
|
@ -157,11 +252,13 @@
|
||||||
case 'Home': go(0); break;
|
case 'Home': go(0); break;
|
||||||
case 'End': go(total-1); break;
|
case 'End': go(total-1); break;
|
||||||
case 'f': case 'F': fullscreen(); break;
|
case 'f': case 'F': fullscreen(); break;
|
||||||
case 's': case 'S': toggleNotes(); break;
|
case 's': case 'S': togglePresenter(); break;
|
||||||
|
case 'n': case 'N': toggleNotes(); break;
|
||||||
|
case 'r': case 'R': if (presenter.classList.contains('open')) resetTimer(); break;
|
||||||
case 'o': case 'O': toggleOverview(); break;
|
case 'o': case 'O': toggleOverview(); break;
|
||||||
case 't': case 'T': cycleTheme(); break;
|
case 't': case 'T': cycleTheme(); break;
|
||||||
case 'a': case 'A': cycleAnim(); break;
|
case 'a': case 'A': cycleAnim(); break;
|
||||||
case 'Escape': toggleOverview(false); toggleNotes(false); break;
|
case 'Escape': toggleOverview(false); toggleNotes(false); togglePresenter(false); break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -82,9 +82,12 @@ These are not extracted from a single source — they are generic scaffolds for
|
||||||
| 12 | `weekly-report` | 7 | Corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table | 周报, team status update, business review |
|
| 12 | `weekly-report` | 7 | Corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table | 周报, team status update, business review |
|
||||||
| 13 | `xhs-post` | 9 | **3:4 @ 810×1080**, warm pastel, dashed sticker cards, page dots | 小红书 图文 post, Instagram carousel |
|
| 13 | `xhs-post` | 9 | **3:4 @ 810×1080**, warm pastel, dashed sticker cards, page dots | 小红书 图文 post, Instagram carousel |
|
||||||
| 14 | `course-module` | 7 | Warm paper + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check | 教学模块, online course, workshop module |
|
| 14 | `course-module` | 7 | Warm paper + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check | 教学模块, online course, workshop module |
|
||||||
|
| 15 | `presenter-mode-reveal` 🎤 | 6 | **演讲者模式专用** · tokyo-night 默认 · 5 主题 T 键切换 · 每页带 150–300 字逐字稿示例 | **技术分享/演讲/课程**—需要按 S 键看逐字稿的场景 ✨ |
|
||||||
|
|
||||||
Each folder: `index.html`, scoped `style.css` (prefixed `.tpl-<name>`), `README.md`. The `xhs-post` template overrides the default `.slide` box to fixed `810×1080` for 3:4 portrait.
|
Each folder: `index.html`, scoped `style.css` (prefixed `.tpl-<name>`), `README.md`. The `xhs-post` template overrides the default `.slide` box to fixed `810×1080` for 3:4 portrait.
|
||||||
|
|
||||||
|
> 🎤 **任何演讲场景（技术分享 / 课程 / 路演）都推荐用 `presenter-mode-reveal`**，或者参考 [presenter-mode.md](./presenter-mode.md) 指南给其他模板加 `<aside class="notes">` 逐字稿。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Authoring notes
|
## Authoring notes
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,221 @@
|
||||||
|
# Presenter Mode Guide · 演讲者模式指南
|
||||||
|
|
||||||
|
这份文档说明如何在 html-ppt skill 里做出**带逐字稿的演讲者模式 PPT**。
|
||||||
|
|
||||||
|
## 何时使用演讲者模式
|
||||||
|
|
||||||
|
当用户的需求涉及以下任何一项时，**优先使用演讲者模式**：
|
||||||
|
|
||||||
|
- 提到"**演讲**"、"**分享**"、"**讲稿**"、"**逐字稿**"、"**speaker notes**"
|
||||||
|
- 提到"**presenter view**"、"**演讲者视图**"、"**演讲者模式**"
|
||||||
|
- 需要"**30 分钟 / 45 分钟 / 1 小时**的分享"
|
||||||
|
- 说"我要去给团队讲 xxx"、"要做一场技术分享"、"要做路演"
|
||||||
|
- 强调"**不想忘词**"、"**怕讲不流畅**"、"**需要提词器**"
|
||||||
|
|
||||||
|
如果用户只要做一份"静态好看的 PPT"（例如小红书图文、产品图册、汇报 slides 自己不讲），**不需要**演讲者模式。
|
||||||
|
|
||||||
|
## 两种做法
|
||||||
|
|
||||||
|
### ✅ 推荐做法：直接用 `presenter-mode-reveal` 模板
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp -r templates/full-decks/presenter-mode-reveal examples/my-talk
|
||||||
|
```
|
||||||
|
|
||||||
|
这个模板已经预设好所有必需元素：
|
||||||
|
- 支持 S 键切换演讲者视图
|
||||||
|
- 5 个主题可用 T 键循环（tokyo-night / dracula / catppuccin-mocha / nord / corporate-clean）
|
||||||
|
- 左右键翻页
|
||||||
|
- 每一页都有 150–300 字的示例逐字稿
|
||||||
|
- 底部有键位提示
|
||||||
|
|
||||||
|
直接改内容即可。
|
||||||
|
|
||||||
|
### 🔧 进阶做法：给任意已有模板加演讲者模式
|
||||||
|
|
||||||
|
html-ppt 的 **S 键演讲者视图是 `runtime.js` 内置的，所有 full-deck 模板都自动支持**。你只需要做两件事：
|
||||||
|
|
||||||
|
1. **每张 slide 末尾加 `<aside class="notes">`**（或 `<div class="notes">`），里面写逐字稿
|
||||||
|
2. **确认 HTML 引入了 `assets/runtime.js`**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<section class="slide">
|
||||||
|
<h2>你的标题</h2>
|
||||||
|
<p>内容...</p>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>这里是演讲时要说的话，150-300 字...</p>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 逐字稿写作三铁律
|
||||||
|
|
||||||
|
这是整个方法论的核心。AI 在帮用户写逐字稿时必须遵守：
|
||||||
|
|
||||||
|
### 铁律 1：不是讲稿，是"提示信号"
|
||||||
|
|
||||||
|
❌ **错误写法**（像在念稿）：
|
||||||
|
```
|
||||||
|
大家好，欢迎来到今天的分享。今天我将要给大家介绍一下我们团队在过去三个月做的工作。
|
||||||
|
首先，我们来看一下背景情况。在过去的三个月中，我们遇到了以下几个问题……
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ **正确写法**（提示信号 + 加粗核心）：
|
||||||
|
```
|
||||||
|
<p>欢迎！今天分享我们团队<strong>过去 3 个月</strong>的工作。</p>
|
||||||
|
<p>先说<em>背景</em>——三个月前我们遇到了<strong>三个核心问题</strong>：
|
||||||
|
延迟高、成本炸、稳定性差。</p>
|
||||||
|
<p>接下来逐个讲解怎么解的。</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
**差别**：正确版本把关键词加粗，过渡句独立成段，看一眼就能接上。
|
||||||
|
|
||||||
|
### 铁律 2：每页 150–300 字
|
||||||
|
|
||||||
|
- **少于 150 字**：提示不够，讲到一半会卡
|
||||||
|
- **多于 300 字**：你根本来不及扫完
|
||||||
|
- **2–3 分钟/页** 是最舒服的节奏
|
||||||
|
|
||||||
|
### 铁律 3：用口语，不用书面语
|
||||||
|
|
||||||
|
| ❌ 书面语 | ✅ 口语 |
|
||||||
|
|---|---|
|
||||||
|
| 因此 | 所以 |
|
||||||
|
| 该方案 | 这个方案 |
|
||||||
|
| 然而 | 但是 / 不过 |
|
||||||
|
| 进行优化 | 优化一下 |
|
||||||
|
| 我们将会 | 我们会 / 接下来 |
|
||||||
|
| 综上所述 | 所以简单来说 |
|
||||||
|
|
||||||
|
**检查方法**：写完读一遍，听起来像说话才对。
|
||||||
|
|
||||||
|
## 必备 HTML 结构
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN" data-themes="tokyo-night,dracula,corporate-clean">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>...</title>
|
||||||
|
<link rel="stylesheet" href="../../../assets/fonts.css">
|
||||||
|
<link rel="stylesheet" href="../../../assets/base.css">
|
||||||
|
<link rel="stylesheet" id="theme-link" href="../../../assets/themes/tokyo-night.css">
|
||||||
|
<link rel="stylesheet" href="../../../assets/animations/animations.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="deck">
|
||||||
|
|
||||||
|
<section class="slide" data-title="Cover">
|
||||||
|
<h1>你的标题</h1>
|
||||||
|
<p>副标题</p>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>讲稿段落 1（加<strong>加粗关键词</strong>）。</p>
|
||||||
|
<p>讲稿段落 2（过渡句独立成段）。</p>
|
||||||
|
<p>讲稿段落 3（自然收尾，引出下一页）。</p>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 更多 slide ... -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script src="../../../assets/runtime.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 演讲者视图显示的内容
|
||||||
|
|
||||||
|
按 `S` 键后，屏幕分成两部分：
|
||||||
|
|
||||||
|
```
|
||||||
|
┌────────────────────────┬──────────────────────┐
|
||||||
|
│ │ NEXT │
|
||||||
|
│ CURRENT │ [下一页缩略图] │
|
||||||
|
│ [当前页大图] ├──────────────────────┤
|
||||||
|
│ │ SPEAKER SCRIPT │
|
||||||
|
│ │ [大字号逐字稿] │
|
||||||
|
│ │ [可滚动] │
|
||||||
|
│ ├──────────────────────┤
|
||||||
|
│ │ ⏱ 12:34 3 / 8 💡 │
|
||||||
|
└────────────────────────┴──────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
- **左侧 55%**：当前页实时预览
|
||||||
|
- **右上 30%**：下一页预览（帮助过渡）
|
||||||
|
- **右中**：逐字稿，字号 18px，高对比度，可滚动
|
||||||
|
- **右下**：计时器 + 页码 + 键位提示
|
||||||
|
|
||||||
|
## 键盘快捷键（演讲者模式）
|
||||||
|
|
||||||
|
| 键 | 动作 |
|
||||||
|
|---|---|
|
||||||
|
| `S` | 进入 / 退出演讲者视图 |
|
||||||
|
| `←` `→` / Space / PgDn | 翻页（即使在演讲者视图里） |
|
||||||
|
| `T` | 切换主题 |
|
||||||
|
| `R` | 重置计时器（仅演讲者视图下） |
|
||||||
|
| `F` | 全屏 |
|
||||||
|
| `O` | 总览 |
|
||||||
|
| `Esc` | 关闭所有浮层 |
|
||||||
|
|
||||||
|
## 双屏演讲的标准流程
|
||||||
|
|
||||||
|
1. 副屏（你看的屏幕）：打开 HTML，按 `F` 全屏
|
||||||
|
2. 主屏（观众看的）：Cmd+Tab 或投屏软件把全屏窗口发到主屏
|
||||||
|
3. 副屏上按 `S` → 你看演讲者视图，观众看干净的 slide
|
||||||
|
4. 你翻页，主屏同步
|
||||||
|
|
||||||
|
> 💡 html-ppt 目前不支持"真正的 dual-screen 独立窗口"——演讲者视图和主视图在同一个 HTML 里切换。如果需要双屏独立显示，推荐用 reveal.js 的原生 speaker view（`/speaker.html`）。
|
||||||
|
|
||||||
|
## 常见错误
|
||||||
|
|
||||||
|
### ❌ 把逐字稿写在 slide 可见位置
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 错误：这段文字观众会看到 -->
|
||||||
|
<p style="font-size:12px;color:gray">
|
||||||
|
这里讲 xxx，然后讲 yyy...
|
||||||
|
</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ 正确：
|
||||||
|
```html
|
||||||
|
<aside class="notes">
|
||||||
|
<p>这里讲 xxx，然后讲 yyy...</p>
|
||||||
|
</aside>
|
||||||
|
```
|
||||||
|
|
||||||
|
`.notes` 类默认 `display:none`，只在演讲者视图可见。
|
||||||
|
|
||||||
|
### ❌ 忘记引入 runtime.js
|
||||||
|
|
||||||
|
没有 `<script src="../../../assets/runtime.js"></script>` = 没有 S 键、没有演讲者视图、没有翻页。
|
||||||
|
|
||||||
|
### ❌ 逐字稿用书面语
|
||||||
|
|
||||||
|
念出来像 AI 机器人。**写完一定读一遍**。
|
||||||
|
|
||||||
|
### ❌ 每页 50 字
|
||||||
|
|
||||||
|
提示不够，照样忘词。
|
||||||
|
|
||||||
|
### ❌ 每页 500 字
|
||||||
|
|
||||||
|
眼睛根本扫不过来，等于没写。
|
||||||
|
|
||||||
|
## 用 AI 生成逐字稿的标准 prompt
|
||||||
|
|
||||||
|
> "请为每一张 slide 写一段 **150-300 字**的逐字稿，放在 `<aside class="notes">` 里。
|
||||||
|
> 要求：
|
||||||
|
> 1. 用**口语**，不要书面语（所以/但是/接下来，不是因此/然而/综上所述）
|
||||||
|
> 2. 把**核心关键词**用 `<strong>` 加粗
|
||||||
|
> 3. 过渡句独立成段（每段 1-3 句）
|
||||||
|
> 4. 读起来像说话，不像念稿
|
||||||
|
> 5. 结尾要有自然的过渡，引出下一页"
|
||||||
|
|
||||||
|
## 推荐搭配
|
||||||
|
|
||||||
|
- **主题**：`tokyo-night`（深色，技术分享首选）、`corporate-clean`（浅色，商务汇报）、`dracula`（深色备选）
|
||||||
|
- **字体**：默认 Noto Sans SC + JetBrains Mono，无需更改
|
||||||
|
- **动效**：克制使用，`fade-up` / `rise-in` 最自然，不要用 `glitch-in` / `confetti-burst` 之类花哨的
|
||||||
|
- **页数**：30 分钟分享 = 8–12 页；45 分钟 = 12–16 页；1 小时 = 16–22 页
|
||||||
|
|
@ -59,7 +59,8 @@ const TPLS = [
|
||||||
['tech-sharing', 'Tech Sharing 技术分享','scenario','internal tech talk, conference talk'],
|
['tech-sharing', 'Tech Sharing 技术分享','scenario','internal tech talk, conference talk'],
|
||||||
['weekly-report', 'Weekly Report 周报','scenario', 'status update, business review'],
|
['weekly-report', 'Weekly Report 周报','scenario', 'status update, business review'],
|
||||||
['xhs-post', '小红书 图文 9 屏 3:4','scenario', 'xiaohongshu / ig carousel'],
|
['xhs-post', '小红书 图文 9 屏 3:4','scenario', 'xiaohongshu / ig carousel'],
|
||||||
['course-module', 'Course Module 教学模块','scenario','online course, workshop module']
|
['course-module', 'Course Module 教学模块','scenario','online course, workshop module'],
|
||||||
|
['presenter-mode-reveal', '🎤 Presenter Mode 演讲者模式','scenario','tech sharing, talk with 逐字稿, speaker view']
|
||||||
];
|
];
|
||||||
|
|
||||||
const deck = document.querySelector('.deck');
|
const deck = document.querySelector('.deck');
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
# presenter-mode-reveal · 演讲者模式模板
|
||||||
|
|
||||||
|
一份专为**带逐字稿的技术分享**设计的 full-deck 模板。核心卖点是真正可用的**演讲者视图 (Presenter View)**：当前页 + 下页预览 + 大字号逐字稿 + 计时器，全部集成在 `runtime.js` 里，零依赖。
|
||||||
|
|
||||||
|
## 使用场景
|
||||||
|
|
||||||
|
- 技术分享 / tech talk（30-60 min）
|
||||||
|
- 产品发布会主讲
|
||||||
|
- 课程讲授
|
||||||
|
- 任何**需要照着讲、但不能念稿**的正式演讲
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
```bash
|
||||||
|
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
|
||||||
|
<html lang="zh-CN" data-themes="tokyo-night,dracula,catppuccin-mocha,nord,corporate-clean">
|
||||||
|
```
|
||||||
|
|
||||||
|
按 `T` 循环切换。可以改成任何 `assets/themes/*.css` 里的主题。
|
||||||
|
|
||||||
|
## 写逐字稿的规范
|
||||||
|
|
||||||
|
**每一页的 `<aside class="notes">` 里写 150–300 字**。三条铁律：
|
||||||
|
|
||||||
|
1. **不是讲稿，是提示信号** — 核心点加粗、过渡句成段、数据列清楚
|
||||||
|
2. **150–300 字/页** — 按 2–3 分钟/页的节奏
|
||||||
|
3. **用口语写** — "因此" → "所以"；"该方案" → "这个方案"；读一遍不拗口才对
|
||||||
|
|
||||||
|
示例：
|
||||||
|
```html
|
||||||
|
<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 进演讲者视图
|
||||||
|
|
@ -0,0 +1,187 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN" data-themes="tokyo-night,dracula,catppuccin-mocha,nord,corporate-clean">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>演讲者模式示例 · Presenter Mode Deck</title>
|
||||||
|
<link rel="stylesheet" href="../../../assets/fonts.css">
|
||||||
|
<link rel="stylesheet" href="../../../assets/base.css">
|
||||||
|
<link rel="stylesheet" id="theme-link" href="../../../assets/themes/tokyo-night.css">
|
||||||
|
<link rel="stylesheet" href="../../../assets/animations/animations.css">
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body class="tpl-presenter-mode-reveal">
|
||||||
|
<div class="deck">
|
||||||
|
|
||||||
|
<!-- ============ 1. COVER ============ -->
|
||||||
|
<section class="slide" data-title="Cover">
|
||||||
|
<p class="kicker">presenter-mode / demo</p>
|
||||||
|
<h1 class="h1 anim-fade-up" data-anim="fade-up">如何做一场<br><span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">有逐字稿</span>的技术分享</h1>
|
||||||
|
<p class="lede mt-m">按 <span class="mono">S</span> 进入演讲者视图 · <span class="mono">T</span> 切换主题 · <span class="mono">← →</span> 翻页</p>
|
||||||
|
<div class="speaker">
|
||||||
|
<div class="av"></div>
|
||||||
|
<div><b>@lewis</b><span>sharing talk · 30 min</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="deck-footer">
|
||||||
|
<span class="mono">#presenter #逐字稿 #tech-talk</span>
|
||||||
|
<span class="slide-number" data-current="1" data-total="6"></span>
|
||||||
|
</div>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>大家好，欢迎来到今天的技术分享。我是 lewis，今天想跟大家聊一个很多人忽略但其实非常影响演讲效果的话题——<strong>如何让一场技术分享既有深度，又讲得不卡壳</strong>。</p>
|
||||||
|
<p>在正式开始之前，先跟大家介绍一下这份 deck 本身：这是一个支持<em>演讲者模式</em>的 HTML 幻灯片模板。现在你们看到的是观众视图，但我自己的屏幕上看到的是完全不一样的东西——当前页、下一页、完整逐字稿、计时器，全在一块屏幕上。</p>
|
||||||
|
<p>为什么我要专门做这个？因为我发现自己做技术分享时最大的痛点不是 PPT 不够好看，而是<strong>讲到某一页突然不知道该说什么，或者忘了过渡怎么接</strong>。今天这份分享既是内容本身，也是个演示——我会一直开着演讲者模式讲，你们可以观察我讲得有多流畅。</p>
|
||||||
|
<p>今天分享大概 30 分钟，分 5 个部分。有问题随时打断。Let's go.</p>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ 2. AGENDA ============ -->
|
||||||
|
<section class="slide" data-title="Agenda">
|
||||||
|
<p class="kicker">agenda</p>
|
||||||
|
<h2 class="h2">今天要讲的 5 件事</h2>
|
||||||
|
<div class="stack mt-l">
|
||||||
|
<div class="agenda-row"><span class="num">01</span><span class="t">为什么 PPT 本身做得好还不够</span><span class="d">~5min</span></div>
|
||||||
|
<div class="agenda-row"><span class="num">02</span><span class="t">演讲者模式到底该有哪些信息</span><span class="d">~6min</span></div>
|
||||||
|
<div class="agenda-row"><span class="num">03</span><span class="t">逐字稿怎么写才不像念稿</span><span class="d">~8min</span></div>
|
||||||
|
<div class="agenda-row"><span class="num">04</span><span class="t">Live demo · html-ppt skill 怎么用</span><span class="d">~8min</span></div>
|
||||||
|
<div class="agenda-row"><span class="num">05</span><span class="t">Takeaways + Q&A</span><span class="d">~3min</span></div>
|
||||||
|
</div>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>先过一下今天的议程。</p>
|
||||||
|
<p>第一部分我想先说服你们<strong>"PPT 做得漂亮≠讲得好"</strong>。我见过太多很精致的 deck，但讲的人一上去就开始 "嗯…这个…就是…"。</p>
|
||||||
|
<p>第二部分聊演讲者视图。业界的产品其实差别蛮大的，Keynote、PowerPoint、reveal.js 都有各自的方案，但真正好用的设计逻辑是什么，我会给出我的答案。</p>
|
||||||
|
<p>第三部分是今天的<em>核心</em>——逐字稿。很多人以为逐字稿就是把要说的话一字不差写下来，错。逐字稿的目的是让你<strong>"看一眼就接得上"</strong>，写法完全不一样。</p>
|
||||||
|
<p>第四部分会现场 demo 我自己用的 html-ppt skill，展示如何 30 分钟出一份带逐字稿的 deck。</p>
|
||||||
|
<p>最后收尾 + 答疑。</p>
|
||||||
|
<p>OK，进入第一部分。</p>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ 3. PROBLEM ============ -->
|
||||||
|
<section class="slide" data-title="Problem">
|
||||||
|
<p class="kicker">// part 01 · problem</p>
|
||||||
|
<h2 class="h2">做 PPT 和讲 PPT，<br>是<span class="accent">两件事</span>。</h2>
|
||||||
|
<div class="grid g3 mt-l">
|
||||||
|
<div class="card card-accent">
|
||||||
|
<h4>✅ PPT 做得好</h4>
|
||||||
|
<p class="dim">主题统一、排版干净、图表清晰、动效克制。这些是"静态作品"的质量。</p>
|
||||||
|
</div>
|
||||||
|
<div class="card card-accent">
|
||||||
|
<h4>❌ 讲得好</h4>
|
||||||
|
<p class="dim">逻辑连贯、语速稳定、不 "嗯啊"、能接住问题、能当场调整节奏。</p>
|
||||||
|
</div>
|
||||||
|
<div class="card card-accent">
|
||||||
|
<h4>💡 差别在哪</h4>
|
||||||
|
<p class="dim">前者是<strong>纸上功夫</strong>，后者需要你<strong>"看一眼幻灯片就知道下句话说什么"</strong>。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>我先抛一个可能有争议的观点——<strong>做 PPT 和讲 PPT 是两件完全不同的事</strong>。</p>
|
||||||
|
<p>大家看左边这张卡片，"PPT 做得好" 意味着什么？主题统一、排版干净、图表清晰、动效克制——这些都是<em>静态作品</em>的质量标准，可以离线评判。</p>
|
||||||
|
<p>但中间这张卡片就不一样了："讲得好" 意味着逻辑连贯、语速稳定、不卡壳、能接住提问、能根据现场反应调整节奏——这些是<strong>临场能力</strong>，跟 PPT 好不好看基本没关系。</p>
|
||||||
|
<p>最关键的是右边这句话——讲得好的人，本质上是"<strong>看一眼幻灯片就知道下句话说什么</strong>"。这个能力靠什么？不是背稿，也不是即兴发挥，而是靠<em>合理设计的提词器系统</em>。</p>
|
||||||
|
<p>今天接下来 25 分钟，我就是围绕这个核心问题展开的。</p>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ 4. SOLUTION ============ -->
|
||||||
|
<section class="slide" data-title="Presenter View">
|
||||||
|
<p class="kicker">// part 02 · presenter view</p>
|
||||||
|
<h2 class="h2">演讲者视图应该有<span class="accent">四块信息</span></h2>
|
||||||
|
<div class="grid g2 mt-l">
|
||||||
|
<div>
|
||||||
|
<div class="feature-row"><span class="num blue">①</span><div><b>当前页大图</b><p class="dim">占视图一半以上，保证你能扫一眼就知道观众现在看到什么。</p></div></div>
|
||||||
|
<div class="feature-row"><span class="num green">②</span><div><b>下一页预览</b><p class="dim">帮你提前准备过渡句，避免"下一页我忘了讲什么了"。</p></div></div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="feature-row"><span class="num orange">③</span><div><b>逐字稿区域</b><p class="dim">大字号、高对比度、支持滚动，这才是演讲者真正在看的东西。</p></div></div>
|
||||||
|
<div class="feature-row"><span class="num purple">④</span><div><b>计时器 + 页码</b><p class="dim">知道自己讲了多久、还剩几页，节奏全凭这个。</p></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>演讲者模式应该给你四块信息。我按重要性排序。</p>
|
||||||
|
<p>第一块，<strong>当前页大图</strong>。这个必须占据视图一半以上空间，因为它是你跟观众的"同步锚"——观众看到什么，你脑子里也得是什么。</p>
|
||||||
|
<p>第二块，<strong>下一页预览</strong>。这个很多人不理解为什么要放，我解释一下：演讲最卡的瞬间不是讲某一页，而是<em>翻到下一页的那 2 秒</em>。如果你提前看到下一页长什么样，过渡句自然就有了。</p>
|
||||||
|
<p>第三块，<strong>逐字稿区域</strong>——这是今天的重点，下一部分我会专门讲。这里先说一个硬性要求：字号必须大、对比度必须高、必须能滚动。因为你讲的时候<em>只有余光瞄一下</em>，字小了根本来不及读。</p>
|
||||||
|
<p>第四块，<strong>计时器和页码</strong>。知道自己讲了多久、还剩几页——节奏感全靠它。Keynote 做得最好，reveal.js 默认不够清楚。</p>
|
||||||
|
<p>这四块缺一不可。今天这个 deck 我把这四块都做出来了，按 S 大家可以试试。</p>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ 5. SCRIPT ============ -->
|
||||||
|
<section class="slide" data-title="Script">
|
||||||
|
<p class="kicker">// part 03 · script</p>
|
||||||
|
<h2 class="h2">逐字稿的<span class="accent">3 条铁律</span></h2>
|
||||||
|
<div class="stack mt-l">
|
||||||
|
<div class="rule-row">
|
||||||
|
<span class="num red">01</span>
|
||||||
|
<div>
|
||||||
|
<b>不是一字不差的讲稿，是<span class="accent">"提示信号"</span></b>
|
||||||
|
<p class="dim">把要讲的核心点加粗，把过渡句单独成段，把数据和名字列清楚——<em>让你看一眼就接得上</em>。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-row">
|
||||||
|
<span class="num red">02</span>
|
||||||
|
<div>
|
||||||
|
<b>每页 <span class="accent">150–300 字</span>，不多不少</b>
|
||||||
|
<p class="dim">少于 150 字提示不够，多于 300 字你没时间读。按 2–3 分钟/页的节奏控制。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-row">
|
||||||
|
<span class="num red">03</span>
|
||||||
|
<div>
|
||||||
|
<b>用<span class="accent">口语</span>写，不用书面语</b>
|
||||||
|
<p class="dim">"因此" → "所以"；"该方案" → "这个方案"。写的时候读一遍，听起来像说话才对。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>进入最核心的一部分——逐字稿怎么写。我总结了 3 条铁律。</p>
|
||||||
|
<p><strong>第一条，逐字稿不是讲稿</strong>。很多人一听"逐字稿"就以为要把每句话一字不差写下来。错。如果你照着稿念，观众会立刻看出来，信任感瞬间崩塌。</p>
|
||||||
|
<p>逐字稿的真实作用是<em>"提示信号"</em>——把核心要点加粗，把过渡句单独成段，把数据和专有名词列清楚。这样你讲的时候<strong>瞄一眼就能接得上</strong>，但说出来的还是你自己的话。</p>
|
||||||
|
<p><strong>第二条，每页控制在 150 到 300 字</strong>。这个是我做了十几场分享摸出来的经验值。少于 150 字提示不够，讲到一半卡住；多于 300 字你根本来不及扫完。按一页讲 2 到 3 分钟算，这个字数刚好。</p>
|
||||||
|
<p><strong>第三条，用口语写</strong>。这条最多人栽跟头。你写"因此"，讲出来会变成"所以"；你写"该方案"，讲出来会变成"这个方案"。<em>写的时候读一遍</em>，不拗口才对。</p>
|
||||||
|
<p>这三条配合起来，你会发现讲 PPT 突然变成了一件很舒服的事。</p>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ 6. DEMO + CLOSING ============ -->
|
||||||
|
<section class="slide" data-title="Demo & Close">
|
||||||
|
<p class="kicker">// part 04-05 · demo + close</p>
|
||||||
|
<h2 class="h2">现在<span class="accent">你也能做到</span></h2>
|
||||||
|
<div class="code-block mt-m">
|
||||||
|
<span class="comment"># 安装 html-ppt skill</span>
|
||||||
|
<span class="cmd">npx</span> skills add <span class="flag">https://github.com/lewislulu/html-ppt-skill</span>
|
||||||
|
|
||||||
|
<span class="comment"># 复制演讲者模式模板</span>
|
||||||
|
<span class="cmd">cp -r</span> templates/full-decks/presenter-mode-reveal examples/my-talk
|
||||||
|
<span class="cmd">open</span> examples/my-talk/index.html
|
||||||
|
|
||||||
|
<span class="comment"># 键盘操作</span>
|
||||||
|
<span class="flag">S</span> <span class="comment">→ 进入演讲者视图</span>
|
||||||
|
<span class="flag">T</span> <span class="comment">→ 切换主题（5 种预设）</span>
|
||||||
|
<span class="flag">← →</span> <span class="comment">→ 翻页</span>
|
||||||
|
<span class="flag">R</span> <span class="comment">→ 重置计时器</span>
|
||||||
|
</div>
|
||||||
|
<p class="lede mt-m tc">关键是：<strong>每一页 <aside class="notes"> 里写 150–300 字逐字稿</strong>。</p>
|
||||||
|
<div class="deck-footer">
|
||||||
|
<span class="mono">#thanks · Q&A</span>
|
||||||
|
<span class="slide-number" data-current="6" data-total="6"></span>
|
||||||
|
</div>
|
||||||
|
<aside class="notes">
|
||||||
|
<p>最后我演示一下这个 skill 怎么用，给大家省点时间自己摸索。</p>
|
||||||
|
<p>第一步，装 html-ppt skill，一行命令。第二步，把我这个 <code>presenter-mode-reveal</code> 模板复制到你自己的 examples 目录。第三步，打开 html，按 S。</p>
|
||||||
|
<p>键盘操作我列在这里了。<strong>S 进入演讲者视图、T 切换主题、左右键翻页、R 重置计时器</strong>。主题默认带 5 个——tokyo-night、dracula、catppuccin-mocha、nord、corporate-clean——基本覆盖了深色技术分享、浅色商务汇报两种常见场景。</p>
|
||||||
|
<p>最关键的一步——<em>每一页底部的 <code><aside class="notes"></code> 里，老老实实写 150 到 300 字的逐字稿</em>。这是整个方法论的交付物。AI 可以帮你写初稿，但你一定要自己过一遍，读出来听听是不是你会说的话。</p>
|
||||||
|
<p>好，我今天就讲到这里。如果你做下一场分享的时候想起了这个"演讲者视图 + 逐字稿"的组合，并且觉得讲得比以前顺——那就是我最大的收获。谢谢大家，有问题现在开始。</p>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="position:fixed;bottom:12px;left:12px;font-size:11px;color:#484f5866;z-index:100;pointer-events:none">
|
||||||
|
S 演讲者视图 · T 切换主题 · ← → 翻页 · F 全屏 · O 总览 · R 重置计时
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../../../assets/runtime.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
/* tpl-presenter-mode-reveal · scoped styles
|
||||||
|
* Presenter-mode demo deck. Inherits tokens from active theme.
|
||||||
|
* Minimal overrides — focus is on content + notes structure.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.tpl-presenter-mode-reveal .slide {
|
||||||
|
padding: 72px 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tpl-presenter-mode-reveal .kicker {
|
||||||
|
font-family: var(--font-mono, monospace);
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-3);
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin: 0 0 18px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tpl-presenter-mode-reveal .h1 {
|
||||||
|
font-size: clamp(44px, 5.6vw, 76px);
|
||||||
|
line-height: 1.12;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
margin: 0 0 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tpl-presenter-mode-reveal .h2 {
|
||||||
|
font-size: clamp(32px, 3.6vw, 48px);
|
||||||
|
line-height: 1.22;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin: 0 0 28px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tpl-presenter-mode-reveal .lede {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 1.55;
|
||||||
|
color: var(--text-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tpl-presenter-mode-reveal .mono {
|
||||||
|
font-family: var(--font-mono, monospace);
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(255,255,255,0.08);
|
||||||
|
color: var(--accent, #58a6ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tpl-presenter-mode-reveal .accent {
|
||||||
|
color: var(--accent, #f0883e);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tpl-presenter-mode-reveal .speaker {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .speaker .av {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, var(--accent, #58a6ff), #bc8cff);
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .speaker b {
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .speaker span {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Agenda rows */
|
||||||
|
.tpl-presenter-mode-reveal .agenda-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 48px 1fr auto;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: center;
|
||||||
|
padding: 14px 18px;
|
||||||
|
border: 1px solid var(--border, rgba(255,255,255,0.1));
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background: var(--surface, rgba(255,255,255,0.03));
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .agenda-row .num {
|
||||||
|
font-family: var(--font-mono, monospace);
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--accent, #58a6ff);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .agenda-row .t {
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-1);
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .agenda-row .d {
|
||||||
|
font-family: var(--font-mono, monospace);
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
.tpl-presenter-mode-reveal .card {
|
||||||
|
background: var(--surface, rgba(255,255,255,0.03));
|
||||||
|
border: 1px solid var(--border, rgba(255,255,255,0.1));
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 22px 24px;
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .card-accent {
|
||||||
|
border-top: 3px solid var(--accent, #58a6ff);
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .card h4 {
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--text-1);
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .card .dim {
|
||||||
|
color: var(--text-2);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Feature rows (presenter view features) */
|
||||||
|
.tpl-presenter-mode-reveal .feature-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 14px 0;
|
||||||
|
border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .feature-row:last-child { border-bottom: none; }
|
||||||
|
.tpl-presenter-mode-reveal .feature-row .num {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .feature-row b {
|
||||||
|
display: block;
|
||||||
|
font-size: 17px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
color: var(--text-1);
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .feature-row .dim {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-2);
|
||||||
|
line-height: 1.55;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .blue { color: #58a6ff; }
|
||||||
|
.tpl-presenter-mode-reveal .green { color: #3fb950; }
|
||||||
|
.tpl-presenter-mode-reveal .orange { color: #f0883e; }
|
||||||
|
.tpl-presenter-mode-reveal .purple { color: #bc8cff; }
|
||||||
|
.tpl-presenter-mode-reveal .red { color: #f85149; }
|
||||||
|
|
||||||
|
/* Rule rows (3 铁律) */
|
||||||
|
.tpl-presenter-mode-reveal .rule-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 56px 1fr;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: start;
|
||||||
|
padding: 18px 22px;
|
||||||
|
border: 1px solid var(--border, rgba(255,255,255,0.1));
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
background: var(--surface, rgba(255,255,255,0.03));
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .rule-row .num {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 800;
|
||||||
|
font-family: var(--font-mono, monospace);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .rule-row b {
|
||||||
|
display: block;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
color: var(--text-1);
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .rule-row .dim {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--text-2);
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code block */
|
||||||
|
.tpl-presenter-mode-reveal .code-block {
|
||||||
|
background: #0d1117;
|
||||||
|
border: 1px solid rgba(255,255,255,0.1);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px 26px;
|
||||||
|
font-family: var(--font-mono, "SF Mono", monospace);
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #e6edf3;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.tpl-presenter-mode-reveal .code-block .comment { color: #8b949e; }
|
||||||
|
.tpl-presenter-mode-reveal .code-block .cmd { color: #3fb950; font-weight: 600; }
|
||||||
|
.tpl-presenter-mode-reveal .code-block .flag { color: #f0883e; }
|
||||||
|
|
||||||
|
/* Stack helper */
|
||||||
|
.tpl-presenter-mode-reveal .stack > * + * { margin-top: 0; }
|
||||||
|
|
||||||
|
/* Grid helpers */
|
||||||
|
.tpl-presenter-mode-reveal .grid { display: grid; gap: 20px; }
|
||||||
|
.tpl-presenter-mode-reveal .grid.g2 { grid-template-columns: 1fr 1fr; }
|
||||||
|
.tpl-presenter-mode-reveal .grid.g3 { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
|
||||||
|
.tpl-presenter-mode-reveal .mt-m { margin-top: 20px; }
|
||||||
|
.tpl-presenter-mode-reveal .mt-l { margin-top: 32px; }
|
||||||
|
.tpl-presenter-mode-reveal .mt-s { margin-top: 10px; }
|
||||||
|
.tpl-presenter-mode-reveal .tc { text-align: center; }
|
||||||
Loading…
Reference in New Issue