目录
Advanced Slides 的使用
一、 概述
1、 简介
Advanced Slides 是 Obsidian 的开源插件，允许您在 Obsidian 中创建基于eveal.js的演示文稿。使用此工具，任何能够在 Obsidian 中创建笔记的人也可以创建漂亮的演示文稿。
其遵循以下理念convention over configuration，这意味着在大多数情况下，只需使用Obsidian Markdown 语法编写一个 Slide 就足够了。
官方文档位置：https://mszturc.github.io/obsidian-advanced-slides
2、 特征
- 编辑幻灯片时的实时预览
- 幻灯片的主题支持
- 嵌入支持 - 在幻灯片中包含其他 Markdown 文档 -
![[Note.md#FirstChapter]] - 图像支持
- 通过 Obsidian Synthax 包含图像 -
![[picture.jpg]] - 管道图像属性 - -
![[image.png|100x100]]
- 通过 Obsidian Synthax 包含图像 -
- 块支持 -
::: block - 脚注支持 -
Here's a footnote[^1] - 在 Markdown 中定义样式表 -
<style>....</style> - 通过 frontmatter 将选项传递给 Slide Compiler
- 注释元素
<!-- element class="red" --> - 支持内部链接
[[Note]]将在 Presentation 中呈现为普通文本- 带别名
[[Note|My Note]]
- Excalidraw 支持
- 流程图支持
3、 第一个 PPT
官方示例演示文稿：https://liuzhongkun1.github.io/ppt/example/index.html
创建步骤：
-
创建幻灯片
-
打开实时预览
二、 基础语法
1、 水平垂直幻灯片
要创建水平幻灯片，请使用由两个空行包围的三个破折号。要创建垂直幻灯片，请使用两个空行包围的两个破折号：
# Slide 1
---
# Slide 2.1
--
# Slide 2.2
2、 元素注释
用来设置元素的样式
text with border <!-- element class="with-border" -->
text with background <!-- element style="background:blue" -->
text with attribute <!-- element data-toggle="modal" -->
3、 幻灯片注释
您可以通过注释为整个幻灯片传递样式或类属性：
<!-- .slide: style="background-color: coral;" -->
# Header with coral background color
Paragraph has coral background color, too!
---
<!-- .slide: style="background-color: green;" -->
- All Bullet points
- have green
- background color
4、 块注解
可以使用块注释对幻灯片的各个部分进行分组。通过对代码块进行注释，该代码块中的所有项目都将获得注释的属性:
::: block
#### Header
_and_
Paragraph content
*in same block*
:::
---
no color
::: block <!-- element style="background-color: red;" -->
everything inside this block has red background color
::: block <!-- element style="background-color: blue;" -->
blue
:::
red
:::
no color
5、 元素动画
用于突出显示或逐步显示幻灯片上的单个元素。在移动到下一张幻灯片之前，将逐步执行具有类片段的每个元素。默认片段样式是从不可见开始淡入。可以通过将不同的类附加到片段来更改此样式。
Fade in <!-- element class="fragment" -->
Fade out <!-- element class="fragment fade-out" -->
Highlight red <!-- element class="fragment highlight-red" -->
Fade in, then out <!-- element class="fragment fade-in-then-out" -->
Slide up while fading in <!-- element class="fragment fade-up" -->
---
- Permanent item
- Appear Fourth <!-- element class="fragment" data-fragment-index="4" -->
- Appear Third <!-- element class="fragment" data-fragment-index="3" -->
- Appear Second <!-- element class="fragment" data-fragment-index="2" -->
- Appear First <!-- element class="fragment" data-fragment-index="1" -->
常见的动画样式：https://revealjs.com/fragments/
6、 内联样式
你可以在你的标记中定义 css 样式：
-
通过使用