Frontmatter 配置

---
title: "我的演示"
theme: "night"
transition: "slide"
controls: true
progress: true
slideNumber: true
---

幻灯片分隔

<section>
内容1
</section>

---

<section>
内容2
</section>

<section>
  <section>
    父幻灯片
  </section>

  <section>
    子幻灯片
  </section>
</section>

基本内容

<section>

## 标题

段落文本

- 列表项 1
- 列表项 2

</section>

可用主题

主题切换

在 frontmatter 中更改：

theme: "sky"

可用过渡

配置过渡

transition: "slide"
backgroundTransition: "fade"

基础 Fragment

<div class="fragment">
第一段出现
</div>

<div class="fragment">
然后第二段
</div>

<div class="fragment">
最后第三段
</div>

Fragment 效果

<div class="fragment fade-in">
淡入
</div>

<div class="fragment fade-out">
淡出
</div>

<div class="fragment highlight-red">
红色高亮
</div>

<div class="fragment highlight-blue">
蓝色高亮
</div>

双栏布局

<div class="two-columns">

<div>
左栏内容
</div>

<div>
右栏内容
</div>

</div>

三栏布局

<div class="three-columns">
  <div>第一栏</div>
  <div>第二栏</div>
  <div>第三栏</div>
</div>

网格布局

<div class="grid grid-2">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
</div>

信息框类型

使用方法

<div class="highlight-box">
💡 重要信息
</div>

<div class="warning-box">
⚠️ 注意事项
</div>

<div class="success-box">
✅ 成功提示
</div>

<div class="error-box">
❌ 错误警告
</div>

JavaScript 代码

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("World");

Python 代码

def calculate_fibonacci(n):
    if n <= 1:
        return n
    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)

print(calculate_fibonacci(10))

代码高亮行

function processData(data) {
  // 这行会高亮
  const result = [];
  for (let item of data) {
    result.push(item * 2);
  }
  return result;
}

什么是演讲者备注？

添加备注

<section>

## 公开内容

观众看到的内容

<aside class="notes">
这是私人备注
只有演讲者能看到
可以添加提示和要点
</aside>

</section>

导航快捷键

功能快捷键

步骤 1: 在 Obsidian 创建

1. 📂 打开 slides/ 文件夹
2. 📝 创建新的 .md 文件
3. ⚙️ 添加 frontmatter 配置
4. ✍️ 使用 Templater 快速填充

步骤 2: 编写内容

---
title: "我的演示"
theme: "night"
---

<section>

# 标题

内容

</section>

---

<section>

## 第二页

更多内容

</section>

步骤 3: 预览和调整

1. 在 Obsidian 中预览（Advanced Slides 插件）
2. 检查布局和动画
3. 调整内容和样式
4. 添加演讲者备注

步骤 4: 发布到 Web

内容设计

演示技巧

技术准备

1. 📱 测试不同设备
2. 🌐 检查浏览器兼容性
3. 🎤 准备演讲者备注
4. 💾 本地备份演示文件
5. 🔗 准备分享链接

现有演示

模板资源

在你的笔记库中：

• 📝 template/slides/templater-template.md - 幻灯片模板
• 📚 docs/obsidian-integration-examples.md - 完整文档
• 🎯 示例演示文稿 - 参考学习

常见问题

调试技巧

官方文档

社区资源

立即开始

1. 📥 安装 Advanced Slides 插件
2. 📝 使用模板创建第一个演示
3. 🎨 尝试不同主题和布局
4. 🌐 发布到 Web 并分享

进阶挑战