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 --to=html --show-template > my_template.html

或者直接从项目模板目录复制：

• manim_slides/templates/revealjs.html
• manim_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 id="clock" style="position: 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 id="progress" style="position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.1); z-index: 1000;"> <div id="progress-bar" style="height: 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 style="position: 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 style="display: flex; align-items: center; gap: 10px;"> <img src="{{ brand_logo }}" alt="公司 Logo" style="height: 30px;"> <span style="font-weight: bold; color: #333;">{{ company_name }}</span> </div> <div style="color: #666; font-size: 14px;"> 演示者: {{ presenter_name }} </div> </header>

高级功能：实时同步演示

Manim Slides 提供了强大的 Firebase 同步模板，让你可以与观众实时互动：

使用 Firebase 同步模板

manim-slides convert MainScene --one-file --use-template firebase_sync.html

配置 Firebase 项目

1. 创建 Firebase 项目：访问 Firebase 控制台
2. 启用实时数据库：选择 "Realtime Database" 并创建
3. 启用匿名认证：在 Authentication > Sign-in method 中启用
4. 获取配置信息：从项目设置中获取：
   • apiKey
   • authDomain
   • databaseURL
   • projectId

安全规则配置

在 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 提供了丰富的模板变量供你使用：

使用自定义模板

创建好模板后，使用--use-template参数应用：

# 使用自定义模板 manim-slides convert MyPresentation --to=html --use-template=my_custom_template.html # 生成单文件版本 manim-slides convert MyPresentation --to=html --one-file --use-template=my_custom_template.html

最佳实践建议

1. 从默认模板开始：基于 manim_slides/templates/revealjs.html 进行修改
2. 保持兼容性：确保模板在不同浏览器和设备上正常工作
3. 性能优化：避免在模板中添加过多重资源
4. 响应式设计：确保模板在移动设备上表现良好
5. 测试充分：在发布前全面测试所有功能

常见问题解答

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