ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

mdx-deck 演示者模式(Presenter Mode)与演讲者备注(Speaker Notes)完全指南

mdx-deck 演示者模式(Presenter Mode)与演讲者备注(Speaker Notes)完全指南 开发工具前端【免费下载链接】mdx-deck♠️ React MDX-based presentation decks项目地址https://gitcode.com/gh_mirrors/md/mdx-deck点击查看免费下载mdx-deck 是基于 React MDX 的幻灯片演示框架其演示者模式Presenter Mode专为现场演讲场景设计演讲者在自己的屏幕控制进度观众在投影仪上只看干净的幻灯片内容。本文以仓库文档 docs/presenting.md 为核心骨架深入讲解演示者模式的完整操作流程、演讲者备注Speaker Notes的写法与底层实现原理并结合 packages/gatsby-theme/src 源码带你掌握一次专业演讲从编写备注到双屏开讲的完整闭环。图片说明上图为 mdx-deck 演示者模式的典型布局来源 docs/images/presenter-mode.png左侧为当前幻灯片含缩略图指示器右侧为下一张幻灯片预览底部状态栏显示页码Slide 1 of 7、计时器、系统时钟与Open in New Window链接。一、核心概念什么是演示者模式演示者模式Presenter Mode是 mdx-deck 面向真实演讲场景提供的演讲者专属视图。与观众看到的普通幻灯片不同演示者模式下你的屏幕会额外显示当前幻灯片与投影仪/观众屏幕内容同步下一张幻灯片预览提前看到即将展示的内容方便组织语言与节奏演讲者备注Speaker Notes只显示在演示者屏幕上的提示文字底部状态栏页码当前页/总页数、演讲计时器、系统时钟、以及在新窗口打开链接。从源码看演示者模式由 packages/gatsby-theme/src/components/presenter.js 渲染它通过useDeck()获取全局的演讲上下文当前索引index、幻灯片总数length、演讲者备注notes并使用Zoom组件对当前幻灯片缩放3/4和下一张幻灯片Zoom ratio{4/3} zoom{1/4}进行缩放排版。底部状态栏则由 presenter-footer.js 提供内嵌页码指示、新窗口链接、计时器timer.js与时钟clock.js。这些组件组合后即形成文档开头截图 docs/images/presenter-mode.png 所示的界面。二、进入演示者模式根据 docs/presenting.md 的说明进入演示者模式只需一个快捷键Opt P按下后当前窗口即切换为演示者模式视图再次按下则退出演示者模式回到普通模式。从 use-keyboard.js 的源码可以看到这一快捷键的底层实现} else if (altKey) { switch (e.keyCode) { case keys.p: // 80即字母 P context.setState(toggleMode(modes.presenter)) break ...其中toggleMode会在当前模式与modes.presenterPRESENTER见 constants.js之间切换即按一次进入再按一次退出。这里使用altKeymacOS 的Opt键即 Option/Alt 键配合字母P组合触发注意该判断位于shiftKey分支之后且metaKey/ctrlKey按下时会直接忽略第 39 行因此与系统级或浏览器级快捷键冲突的概率较低。演示者模式的完整快捷键一览结合 use-keyboard.js 的完整按键映射keys常量定义于第 8–20 行以下是演示者模式及周边常用快捷键汇总快捷键功能源码依据Opt P切换演示者模式Presenter Modecase keys.p位于altKey分支Opt O切换概览模式Overview Modecase keys.o键码 79Opt G切换网格模式Grid Modecase keys.g键码 71→/↓/PageDown/Space下一张幻灯片或下一步骤keys.right/down/pageDown/space←/↑/PageUp上一张幻灯片或上一步骤keys.left/up/pageUpShift Space上一张幻灯片shiftKey分支Shift P切换打印模式并进入/print页面shiftKey分支Esc退出当前模式回到普通模式case keys.esc需要特别说明的是按键处理器在input、select、textarea、a、button等元素获得焦点时会忽略自定义快捷键use-keyboard.js避免在编辑文本或点击链接时误触翻页。这在演示过程中需要小心如果你刚点击过页面上的某个链接/按钮快捷键可能暂时失效此时按Esc或点击空白区域让焦点回到页面主体即可恢复。三、双屏演讲的标准操作流程docs/presenting.md 给出了现场演讲的完整流程这是该文档的核心实战部分原文如下按Opt P进入演示者模式点击窗口底部的链接在另一个标签页打开演示将新标签页移动到观众可见的屏幕或投影仪所在窗口在原始窗口控制演示进度务必隐藏鼠标光标避免其显示在观众屏幕上。结合源码这一流程的每一步都有对应的实现支撑第 2 步的底部链接即 presenter-footer.js 中的 Open in New Window ↗︎ 链接它通过globalHistory.location.href获取当前页面的完整 URL并使用target_blank在新标签页打开a href{globalHistory.location.href} relnoopener noreferrer target_blank sx{{ color: inherit, textDecoration: none }} Open in New Window ↗︎ /a第 4 步的控制演示演示者窗口与观众窗口共享同一 URL 路由均基于index路由翻页动作通过 navigate.js 调用navigate([slug, n].join(/))改变路由而新窗口与该窗口共享浏览器的历史/缓存状态因此在原始窗口翻页时观众窗口会同步跳转。换言之两个窗口通过路由保持双端同步这就是控制原始窗口、观众看新窗口得以成立的技术基础。第 5 步隐藏鼠标属于演讲礼仪/操作层面的建议仓库本身未提供自动隐藏光标的开关需要演讲者自行处理例如使用操作系统级的演示时隐藏光标选项或移动鼠标到屏幕角落。关于步骤Steps与翻页的细节在演示者模式下翻页时要注意 mdx-deck 的翻页是步骤感知的。从 navigate.js 的实现可见export const next context { const { steps, step, setState } context if (!steps || step steps) return nextSlide(context) setState({ step: step 1 }) }即如果当前幻灯片内部有步骤如Steps组件、Appear组件等产生的分步内容且尚未播完按翻页键会先推进步骤步骤播完后再跳到下一张幻灯片。向后翻页时previous则会先回到上一张幻灯片并将步骤重置为该页的步骤总数。这与 docs/components.md 中Steps组件的用法配合使用可以在演示者模式下实现逐步揭示的演讲效果。四、演讲者备注Speaker Notes4.1 基本用法演讲者备注Speaker Notes是只在演示者模式中显示的提示文字普通模式下观众永远看不到。根据 docs/presenting.md 的说明只需在任意幻灯片中使用Notes /组件即可import { Notes } from mdx-deck # Slide Content Notes Only visible in presenter mode /Notes几点要点必须在文件顶部import { Notes } from mdx-deckNotes的内容可以是纯文本 / Markdown 列表 / 任意 JSX。在 docs/demo.mdx 中可以看到两种典型写法Markdown 列表写法第 58–63 行与 JSX 写法第 85–90 行Notes - These are speaker notes - And they wont be rendered in your slide /NotesNotes ul liSpeaker notes can also be/li liWritten in JSX/li /ul /Notes备注不会渲染进观众看到的幻灯片只存在于演示者模式的右侧预览区下方。4.2 底层实现原理Notes组件的实现在 packages/gatsby-theme/src/components/notes.jsexport const Notes props { const context useDeck() useEffect(() { context.register(context.index, notes, props.children) }, [props.children]) return false }可以看到Notes组件本身不渲染任何 DOMreturn false它只是通过useDeck()拿到全局上下文并把props.children即你写在标签内的内容注册到当前幻灯片索引context.index对应的元数据中。这里的context.register来自 app.jsconst register (index, key, value) { if (state.metadata[index] state.metadata[index][key]) return setState({ metadata: { [index]: { [key]: value, }, }, }) }metadata是全局 reducer 状态的一部分初始为{}见 app.js以{ [幻灯片索引]: { notes: 内容 } }的结构存储。注册有去重保护同一页同一键notes只注册一次。而备注的消费方是演示者模式组件 presenter.jsconst notes context.notes ? React.Children.toArray(context.notes) : false ... {notes ( div sx{{ my: 3 }} {notes} /div )}它从useDeck()中取出当前索引对应的notes元数据渲染在右侧下一张预览的下方。只有演示者模式PRESENTER会渲染notes普通模式根本不渲染 presenter.js这从机制上保证了备注只对演讲者可见。4.3 备注的编写建议结合 docs/demo.mdx 中实际使用的备注风格建议用简短的要点列出这张幻灯片你要讲什么、重点是什么、别忘了什么可以直接放完整台词纯文本即可也可以放结构化列表涉及图片幻灯片时可以写图片意图说明demo.mdx 第 109–111 行写的是Testing object fit即记录测试意图因为备注支持 JSX甚至可以嵌入链接、强调等元素。五、演示者模式的状态栏页码、计时器与时钟演示者模式底部状态栏presenter-footer.js从左到右包含四块内容页码指示{index} / {length - 1}即当前页从 0 开始与总页数length - 1Open in New Window ↗︎链接用于双屏演讲时打开观众窗口计时器Timer由 timer.js 实现时钟Clock由 clock.js 实现。计时器的操作timer.js 提供两个按钮与一个时间显示Start / Stoptoggle切换timer布尔状态计时中每秒把seconds 1写入全局状态ResetsetState({ seconds: 0 })清零当seconds为 0 时按钮禁用时间显示格式为hh:mm:ss依赖hhmmss库如截图 docs/images/presenter-mode.png 底部的00:17。计时器状态timer、seconds同样存于全局 context 中因此切页、切换模式都不会丢失计时进度方便演讲者精确控制每场演讲的时长。时钟clock.js 每秒刷新一次toLocaleTimeString()输出当前系统时间帮助演讲者把握讲了多久、还剩多少时间。在截图 docs/images/presenter-mode.png 右下角可以看到示例时间5:41:17 PM。六、从演示到导出演示者模式的延伸场景演示者模式并非孤立功能它与其他模式共享同一套模式状态机constants.js 定义了normal / presenter / overview / grid / print五种模式与同一套useDeck()上下文。掌握演示者模式后你可以顺带了解概览模式Opt O左侧为可滚动缩略图列表SlideList右侧为当前幻灯片大图预览点击缩略图即可跳转实现在 overview.js适合演讲前快速通览全部内容网格模式Opt G将全部幻灯片平铺展示打印模式Shift P跳转到/print路径配合 docs/exporting.md 可导出 PDF 讲义。注概览、网格、打印等模式在 docs/presenting.md 中未展开描述此处仅为演示者模式周边能力的延伸提示具体用法可查阅 docs/api.md 与 docs/components.md。七、常见问题排查按Opt P无反应检查当前焦点元素是否落在input/button等元素上快捷键会被忽略确认没有其他软件占用了Alt P组合键。观众窗口不同步确认两个窗口打开的是同一个 URL含相同 slug 前缀演示者窗口翻页实际是路由跳转navigate([slug, n].join(/))观众窗口需保持在同一路由体系下。备注没有显示确认在 mdx 文件顶部import { Notes } from mdx-deck确认当前处于演示者模式Opt P普通模式下不渲染备注。想要隐藏光标仓库未内置该功能请在操作系统层面设置演示时隐藏指针或演讲时把鼠标移出投影区域。八、小结演示者模式是 mdx-deck 现场演讲体验的核心。通过Opt P一键进入配合新窗口打开 双屏同步的流程设计以及只对演讲者可见的Notes备注、页码/计时器/时钟状态栏mdx-deck 把写演示、讲演示、控演示整合为一条流畅的工作流。如果想进一步深入推荐继续阅读 docs/api.md模式与上下文 API、docs/components.mdSteps、Appear等与翻页联动的组件以及 docs/exporting.md打印/导出并可在 packages/gatsby-theme/src/components 目录下查看上述全部组件的源码实现。赞分享开发工具前端【免费下载链接】mdx-deck♠️ React MDX-based presentation decks项目地址https://gitcode.com/gh_mirrors/md/mdx-deck点击查看免费下载相关推荐终极指南用MOOTDX构建免费高效的量化数据基础设施终极指南用MOOTDX构建免费高效的量化数据基础设施 在量化投资领域获取稳定、实时且免费的金融数据一直是开发者的核心痛点。MOOTDX作为Python通达信金融科技数据分析Slidev演讲者模式完全指南多设备协同演示技巧Slidev演讲者模式完全指南多设备协同演示技巧 Slidev作为面向开发者的演示工具其 演讲者模式 提供了强大的多设备协同功能让演讲变得更加专业和流畅。前端开发工具深度演讲者Deep Speaker项目指南深度演讲者Deep Speaker项目指南 目录结构及介绍 深度演讲者Deep Speaker是基于神经网络的一种说话人嵌入系统其源代码在GitHub上一篇为什么你的微服务拆分总是失败Modularization-examples教你避免常见陷阱下一篇探索英特尔ISL的MultiObjectiveOptimization项目多目标优化的新里程创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表