外部Markdown演示

这是一个外部Markdown文件创建的幻灯片

---

代码块示例

// 语法高亮的代码块
class Presentation {
  constructor(title) {
    this.title = title;
    this.slides = [];
  }
  
  addSlide(content) {
    this.slides.push(content);
  }
}

Note: 这是演讲者备注，按S键在演示时查看

---

表格支持

功能	传统工具	Web框架
跨平台	❌ 有限支持	✅ 完全支持
代码展示	❌ 需插件	✅ 原生支持
版本控制	❌ 困难	✅ 原生支持

#### Markdown使用技巧

- 使用三个短横线`---`创建新幻灯片
- 使用`Note:`前缀添加演讲者备注
- 通过`data-separator`自定义分隔符
- 使用三个反引号```创建代码块，并指定语言
- 支持GFM (GitHub Flavored Markdown)语法

✅ **自测题**：如何在Markdown幻灯片中添加演讲者备注？如何控制幻灯片的分隔方式？

### 模块三：主题定制与视觉设计

**适用场景**：打造符合品牌风格或个人偏好的演示外观

#### 基础版实现
```html
<!-- 选择内置主题 -->
<link rel="stylesheet" href="dist/theme/black.css">

<script>
Reveal.initialize({
    // 主题相关配置
    theme: 'black',          // 主题名称
    transition: 'convex',    // 过渡效果
    backgroundTransition: 'zoom' // 背景过渡效果
});
</script>

进阶版实现

// 创建自定义主题文件 css/theme/source/mytheme.scss
@import "template/theme";

// 自定义变量覆盖
$backgroundColor: #f8f9fa;
$primaryColor: #2c3e50;
$secondaryColor: #3498db;
$headingColor: #2980b9;
$linkColor: #e74c3c;
$linkColorHover: #c0392b;

// 自定义样式
.reveal h1 {
    font-size: 2.5em;
    margin-bottom: 1em;
}

.reveal section img {
    border: none;
    box-shadow: none;
}

编译自定义主题：

gulp css-themes

在HTML中使用自定义主题：

<link rel="stylesheet" href="dist/theme/mytheme.css">

主题定制技巧

• 内置主题位于css/theme/source/目录
• 主题模板文件在css/theme/template/目录
• 使用gulp css-themes命令编译SCSS文件
• 通过自定义CSS变量实现简单样式调整
• 复杂定制需修改SCSS源文件并重新编译

⚠️ 常见陷阱：直接修改内置主题文件会导致更新框架时丢失自定义内容。正确做法是创建新的主题文件继承模板。

模块四：动画与交互效果

适用场景：增强演示的视觉吸引力，突出重点内容

基础版实现

<section>
    <h2>基本动画效果</h2>
    <!-- 淡入动画 -->
    <p class="fragment fade-in">这行会淡入</p>
    <p class="fragment fade-in-then-out">淡入后淡出</p>
    <p class="fragment highlight-red">高亮为红色</p>
</section>

进阶版实现

<section data-auto-animate>
    <h2 data-auto-animate-id="title">Auto-Animate演示</h2>
    <div class="box" data-auto-animate-id="box" style="width: 100px; height: 100px; background: red;"></div>
</section>

<section data-auto-animate>
    <h2 data-auto-animate-id="title">平滑过渡效果</h2>
    <div class="box" data-auto-animate-id="box" style="width: 200px; height: 200px; background: blue;"></div>
</section>

<script>
Reveal.initialize({
    autoAnimateDuration: 0.8, // 动画持续时间
    autoAnimateEasing: 'ease-in-out' // 动画缓动函数
});
</script>

交互效果类型

• 片段动画(fragment)：控制元素的显示顺序和方式
• 自动动画(auto-animate)：实现幻灯片间元素的平滑过渡
• 过渡效果(transition)：控制幻灯片切换动画
• 背景动画(background)：为幻灯片背景添加动态效果

✅ 挑战任务：创建一个包含三个元素的幻灯片，每个元素使用不同的片段动画效果，并设置自定义的显示顺序。

模块五：插件扩展与功能增强

适用场景：添加特殊功能，如代码高亮、数学公式、搜索等

基础版实现（代码高亮）

<!-- 引入插件 -->
<script src="plugin/highlight/highlight.js"></script>

<script>
Reveal.initialize({
    plugins: [RevealHighlight]
});
</script>

<!-- 使用代码高亮 -->
<section>
    <h2>代码高亮示例</h2>
    <pre><code class="language-python" data-line-numbers="2-4">def calculate_factorial(n):
    if n == 0:
        return 1
    else:
        return n * calculate_factorial(n-1)
        
result = calculate_factorial(5)
print(result)  # 输出: 120</code></pre>
</section>

进阶版实现（多插件集成）

<!-- 引入多个插件 -->
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/zoom/zoom.js"></script>

<script>
Reveal.initialize({
    // 配置数学公式插件
    math: {
        mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js',
        config: 'TeX-AMS_HTML-full',
        tex2jax: {
            inlineMath: [['\\(', '\\)']],
            displayMath: [['\\[', '\\]']],
            balanceBraces: true,
            processEscapes: false,
            processRefs: true
        }
    },
    plugins: [RevealMarkdown, RevealMath.KaTeX, RevealNotes, RevealSearch, RevealZoom]
});
</script>

<!-- 使用数学公式 -->
<section>
    <h2>数学公式示例</h2>
    <p>欧拉恒等式: \( e^{i\pi} + 1 = 0 \)</p>
    <p>二次方程求根公式: \[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]</p>
</section>

常用插件功能

• highlight：代码语法高亮
• math：数学公式渲染（支持KaTeX和MathJax）
• notes：演讲者备注功能
• search：演示文稿内搜索
• zoom：幻灯片内容缩放
• markdown：Markdown语法支持

⚠️ 性能提示：过多插件会增加页面加载时间和内存占用。只加载实际需要的插件，并在生产环境中使用压缩版资源。

常见陷阱规避

路径问题导致资源加载失败

问题：本地打开HTML文件时，资源路径不正确导致样式和脚本无法加载。
解决方案：始终使用开发服务器预览演示文稿，避免直接双击HTML文件打开。启动命令：npm start

响应式设计失效

问题：在移动设备上文本太小或内容溢出。
解决方案：使用相对单位(em/rem)而非固定像素，利用框架内置的响应式类：

<div class="r-fit-text">自动适应大小的文本</div>
<section data-background-size="contain">背景图片自适应</section>