Manim Slides 高级技巧：自定义 HTML 模板打造专属演示风格

Manim Slides 高级技巧自定义 HTML 模板打造专属演示风格【免费下载链接】manim-slidesTool for live presentations using manim项目地址: https://gitcode.com/gh_mirrors/ma/manim-slides想要让你的数学动画演示与众不同吗Manim Slides 的自定义 HTML 模板功能让你可以完全掌控演示的外观和交互体验 通过自定义模板你可以创建具有品牌风格、增强功能或独特布局的专业演示文稿。为什么需要自定义 HTML 模板Manim Slides 默认使用 Reveal.js 作为 HTML 演示引擎但有时你可能需要品牌一致性添加公司 logo 和品牌色彩增强功能集成实时时钟、进度条或互动元素特殊布局创建非传统的幻灯片排列方式远程同步实现演示者与观众之间的实时同步获取默认模板开始定制要开始自定义首先获取默认模板文件manim-slides convert --tohtml --show-template my_template.html或者直接从项目模板目录复制manim_slides/templates/revealjs.htmlmanim_slides/templates/firebase_sync.html基础模板结构解析Manim Slides 的 HTML 模板使用 Jinja2 模板引擎包含以下关键部分1. 幻灯片循环生成模板的核心是幻灯片循环逻辑它会根据你的 Manim 场景自动生成相应的 HTML 结构{% for presentation_config in presentation_configs %} {% for slide_config in presentation_config.slides %} section>Reveal.initialize({ width: {{ width }}, height: {{ height }}, margin: {{ margin }}, minScale: {{ min_scale }}, maxScale: {{ max_scale }}, controls: {{ controls }}, transition: {{ transition }} });3. 样式自定义通过 CSS 可以完全改变演示的外观/* 自定义品牌样式 */ .reveal .slides { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } /* 添加水印 */ .reveal .slides::after { content: © Your Company; position: fixed; bottom: 10px; right: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }实用自定义技巧技巧 1添加实时时钟 ⏰在演示中添加实时时钟可以帮助你更好地控制时间!-- 在模板中添加时钟元素 -- div idclock styleposition: fixed; bottom: 20px; left: 20px; background: rgba(0,0,0,0.7); color: white; padding: 5px 10px; border-radius: 5px; font-family: monospace; font-size: 18px; /div script // 添加时钟更新脚本 function updateClock() { const now new Date(); const time now.toLocaleTimeString(); document.getElementById(clock).textContent time; } setInterval(updateClock, 1000); updateClock(); /script技巧 2创建进度指示器 添加幻灯片进度条让观众了解演示进度!-- 进度条容器 -- div idprogress styleposition: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.1); z-index: 1000; div idprogress-bar styleheight: 100%; width: 0%; background: linear-gradient(90deg, #4CAF50, #8BC34A); transition: width 0.3s;/div /div script // 更新进度条 Reveal.addEventListener(slidechanged, function(event) { const total Reveal.getTotalSlides(); const current Reveal.getIndices().h 1; const progress (current / total) * 100; document.getElementById(progress-bar).style.width progress %; }); /script技巧 3品牌化定制 为你的演示添加品牌元素!-- 品牌 Header -- header styleposition: fixed; top: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; z-index: 1000; border-bottom: 1px solid #eaeaea; div styledisplay: flex; align-items: center; gap: 10px; img src{{ brand_logo }} alt公司 Logo styleheight: 30px; span stylefont-weight: bold; color: #333;{{ company_name }}/span /div div stylecolor: #666; font-size: 14px; 演示者: {{ presenter_name }} /div /header高级功能实时同步演示Manim Slides 提供了强大的 Firebase 同步模板让你可以与观众实时互动使用 Firebase 同步模板manim-slides convert MainScene --one-file --use-template firebase_sync.html配置 Firebase 项目创建 Firebase 项目访问 Firebase 控制台启用实时数据库选择 Realtime Database 并创建启用匿名认证在 Authentication Sign-in method 中启用获取配置信息从项目设置中获取apiKeyauthDomaindatabaseURLprojectId安全规则配置在 Firebase 控制台设置安全规则{ rules: { rooms: { $roomId: { .read: true, .write: auth ! null ( (!data.exists() newData.child(meta/presenterId).val() auth.uid) || (data.child(meta/presenterId).val() auth.uid newData.child(meta/presenterId).val() auth.uid) ) } } } }模板变量参考Manim Slides 提供了丰富的模板变量供你使用变量名类型描述titlestring演示标题presentation_configslist演示配置列表widthnumber幻灯片宽度heightnumber幻灯片高度marginnumber边距大小min_scalenumber最小缩放比例max_scalenumber最大缩放比例controlsboolean是否显示控制按钮transitionstring幻灯片过渡效果使用自定义模板创建好模板后使用--use-template参数应用# 使用自定义模板 manim-slides convert MyPresentation --tohtml --use-templatemy_custom_template.html # 生成单文件版本 manim-slides convert MyPresentation --tohtml --one-file --use-templatemy_custom_template.html最佳实践建议从默认模板开始基于 manim_slides/templates/revealjs.html 进行修改保持兼容性确保模板在不同浏览器和设备上正常工作性能优化避免在模板中添加过多重资源响应式设计确保模板在移动设备上表现良好测试充分在发布前全面测试所有功能常见问题解答Q: 如何添加自定义 JavaScript 库A: 在模板的head部分添加相应的script标签即可。Q: 可以修改幻灯片过渡效果吗A: 是的通过修改transition变量或直接修改 Reveal.js 配置。Q: 如何添加演讲者备注A: 模板已经支持演讲者备注只需在 Manim 场景中使用self.next_slide(notes备注内容)。Q: 自定义模板会影响性能吗A: 合理的设计不会影响性能避免添加过多复杂的动画或大型资源。结语通过自定义 HTML 模板你可以将 Manim Slides 的数学动画演示提升到新的水平无论是品牌定制、功能增强还是特殊布局模板系统都为你提供了无限的可能性。现在就开始创建属于你自己的独特演示风格吧记住好的演示不仅仅是内容更是体验。✨相关资源参考manim_slides/templates/ - 官方模板目录docs/source/reference/customize_html.md - 详细文档example.py - 示例代码【免费下载链接】manim-slidesTool for live presentations using manim项目地址: https://gitcode.com/gh_mirrors/ma/manim-slides创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考