Obsidian 插件（二）：Advanced_Slides 的使用_advanced slides

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]]
• 块支持 -::: 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. 创建幻灯片

2. 打开实时预览

   

二、 基础语法

1、 水平垂直幻灯片

要创建水平幻灯片，请使用由两个空行包围的三个破折号。要创建垂直幻灯片，请使用两个空行包围的两个破折号：

# Slide 1

---

# Slide 2.1

--

# Slide 2.2
1
2
3
4
5
6
7
8
9

2、 元素注释

用来设置元素的样式

text with border <!-- element class="with-border" -->

text with background <!-- element style="background:blue" -->

text with attribute <!-- element data-toggle="modal" -->
1
2
3
4
5

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
1
2
3
4
5
6
7
8
9
10
11
12
13

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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" -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

常见的动画样式：https://revealjs.com/fragments/

6、 内联样式

你可以在你的标记中定义 css 样式：

1. 通过使用<style>标签

   <style>
   	.with-border{
   		border: 1px solid red;
   	}
   </style>
   
   styled text <!-- element class="with-border" -->
   1
   2
   3
   4
   5
   6
   7

2. 通过 CSS 文件包含它们

   ---
   css: [css/layout.css,css/customFonts.css]
   ---
   1
   2
   3

7、 幻灯片背景样式

你可以通过注释幻灯片来改变背景：

<!-- slide bg="aquamarine" -->
## Slide with text based background
---

<!-- slide bg="#ff0000" -->
## Slide with hex based background

---

<!-- slide bg="rgb(70, 70, 255)" -->
## Slide with rgb based background

---

<!-- slide bg="hsla(315, 100%, 50%, 1)" -->
## Slide with hsl based background

---

# Slide without background

---

<!-- slide bg="https://picsum.photos/seed/picsum/800/600" -->
## Slide with image background

---

<!-- slide bg="[[image.jpg]]" -->
## Slide with image background #2

---

<!-- slide bg="https://picsum.photos/seed/picsum/800/600" data-background-opacity="0.5" -->
## with opacity

0.5 ≙ 50% opacity

---

## More options:

See [reveal backgrounds](https://revealjs.com/backgrounds/)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

可以通过 fontmatter 添加内容来更改所有幻灯片的背景：

---
bg: red
bg: '#ff0000'
bg: rgb(70, 70, 255)
bg: transparent  <!--设置背景为透明样式-->
---
1
2
3
4
5
6

8、 演讲者模式

Advanced Slides 带有演讲者备注功能，可用于在演讲者视图中呈现每张幻灯片的备注。

要访问扬声器视图，您必须打开Slide Preview然后点击Open in Browser右上角的按钮。您的幻灯片将在您的默认网络浏览器中打开。按键盘上的 »S« 键打开备注窗口。

注释窗口还可以让您预览下一张幻灯片，因此即使您没有写任何注释，它也可能会有所帮助。

## My Slide

This is part of my Presentation


note: this is not! Only the speaker might see this text.

- and this bulletpoint
- or this picture

![](https://picsum.photos/id/1005/250/250) 
1
2
3
4
5
6
7
8
9
10
11

9、 列表动画

基于片段概念的高级幻灯片引入了一个约定，自动将片段注释添加到有序和无序列表的项目符号点。通过使用 + 或 ) 作为列表的指示符，列表将自动显示为片段列表。

# Unordered list

- First
- Second
- Third

---

# Fragmented unordered list

- Permanent
+ First
+ Second
+ Third

---

# Ordered list

1. First
2. Second
3. Third

---

# Fragmented ordered list

1. Permanent
2) Second
3) Third
4) Fourth
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

10、 画图支持

需要在 Excalidraw 设置中激活 Auto-Export SVG/PNG。

#### Excalidraw support

![[Sample.excalidraw|100]]

![[Sample.excalidraw]] <!-- element style="width:300px; height:400px" -->
1
2
3
4
5

11、 图标

您可以使用以下标记将图标添加到幻灯片中：

<!-- .slide: bg="white"-->

![](fab fa-font-awesome fa-4x)

## Icons

---

<!-- .slide: bg="white"-->
### Basic Syntax

![](fas fa-envelope fa-4x)<!-- .element: color="coral"-->

Short Syntax

	![](fas fa-envelope fa-4x)<!-- .element: color="coral"-->

HTML Synthax

 	<i color="coral" class="fas fa-envelope fa-4x"/>

ShortCode Synthax

	:fas_envelope:
 
---

# Sizing

<i class="fas fa-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30