Advanced Slides 是 Obsidian 的开源插件，允许您在 Obsidian 中创建基于eveal.js的演示文稿。使用此工具，任何能够在 Obsidian 中创建笔记的人也可以创建漂亮的演示文稿。

其遵循以下理念convention over configuration，这意味着在大多数情况下，只需使用Obsidian Markdown 语法编写一个 Slide 就足够了。

官方文档位置：https://mszturc.github.io/obsidian-advanced-slides

官方示例演示文稿：https://liuzhongkun1.github.io/ppt/example/index.html

创建步骤：

创建幻灯片

打开实时预览

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

用来设置元素的样式

您可以通过注释为整个幻灯片传递样式或类属性：

可以使用块注释对幻灯片的各个部分进行分组。通过对代码块进行注释，该代码块中的所有项目都将获得注释的属性:

用于突出显示或逐步显示幻灯片上的单个元素。在移动到下一张幻灯片之前，将逐步执行具有类片段的每个元素。默认片段样式是从不可见开始淡入。可以通过将不同的类附加到片段来更改此样式。

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

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

通过使用标签

通过 CSS 文件包含它们

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

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

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

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

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

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

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

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

支持的所有图标：https://fontawesome.com/v5/search

字体图标使用教程：https://fontawesome.com/v5/docs/web/reference-icons/

你可以在幻灯片中使用表情包短代码：

可以使用 Obsidian 的表情包插件来快速的查找表情包：obsidian-emoji-toolbar

Advanced Slides 允许使用Obsidian Charts插件语法或Reveal.js Charts语法添加图表。

目前不支持以下功能：

Obsidian Charts：

官方文档：https://charts.phibr0.de/chart%20types/

Reveal.js Charts：

官方文档：https://github.com/rajgoel/reveal.js-plugins

Advanced Slides 可以自动为幻灯片中的元素设置动画。您需要做的就是添加data-auto-animate到两个相邻的幻灯片注释和自动动画将为两者之间的所有匹配元素设置动画。

这是一个简单的示例，可以让您更好地了解如何使用它：

更多的动画教程：https://revealjs.com/auto-animate/

通过使用标签您可以按行和列拆分幻灯片的内容

通过设置 even 属性，拆分元素的内容被平均分配：

通过添加 gap 属性，每个元素之间将有一个间隙：

在此拆分中，每个元素之间有 3em 的间隙

如果你想按比例分割一张幻灯片，你可以用 left 和 right 属性来做到这一点。左右分别代表滑动栏的比例：

在此拆分中，左侧元素的宽度是右侧元素宽度的两倍

通过添加一个 wrap 属性，您可以定义一个新行应该在多少个元素之后开始：

此拆分有 2 行。第一行有 4 张图片，第二行有 2 张。

通过不添加边距属性自动删除行和列之间的间隙：

此拆分在行和列之间没有间隙。

通过使用标签，您可以分部分布置幻灯片的内容。

网格布局拖放用于调整幻灯片内容的大小和位置。

基本语法：

参数：

drag属性的宽度和高度值定义了内容显示区域的大小

drop属性的x和y值定义幻灯片上应插入内容的位置

按坐标定位：

可以在drop属性上为x和y设置正值和负值。每种情况下正负值的含义总结如下：

按名称定位：

为方便起见，已命名一些常见的网格位置。命名位置可以用来代替drop属性上的x和y坐标。当前定义了以下命名位置：

默认情况下，假定值是基于幻灯片大小的百分比。将px附加到像素大小的值。

以下语法用于为网格定义自定义流：

使用col或row的值作为flow属性定义网格的布局行为。如果未指定 flow 属性，则网格会自动继承默认的col flow 行为。

什么时候使用flow="col"布局和间距行为发生在网格中：

孩子在网格内垂直呈现

每个孩子之间注入等量的空间

在网格的开始和结束处注入等量的空间

什么时候使用flow=row布局和间距行为发生在网格中：

grid bg 属性用于为网格定义自定义背景。添加到网格的子项呈现在背景之上。

示例：

网格边框属性用于为网格部分定义自定义边框。自定义边框有助于突出显示或区分幻灯片上的网格。

参数：

网格动画属性用于定义网格部分的幻灯片动画。动画适用于网格和所有关联的子项。

其中animate属性的类型选项可以采用以下动画类型之一：

速度选项是可选的。指定时，它接受较慢或较快的值。

网格不透明度属性用于控制网格部分的透明度。调整部分的不透明度也会影响所有相关子项的不透明度。

其中opacity属性的level选项可以取0.0到1.0之间的任何值。不透明度值为 0.0 的网格部分是不可见的。

网格过滤器属性用于定义网格部分的过滤器效果。网格部分的滤镜效果也会影响所有关联的子项。

其中过滤器属性的效果选项可以采用以下类型之一：

网格旋转属性用于控制网格部分的二维旋转。网格部分的旋转也会影响所有关联的子项。

其中，rotate属性的deg选项是正值或负值表示从 0 到 360 度的旋转度数。

grid pad属性用于定义网格的自定义填充。自定义填充可以通过控制网格子项周围的空间来帮助增强内容的整体外观。

pad属性上的top、right、bottom和left选项都采用像素大小值。遵循标准的CSS 填充规则，这四个选项也可以只指定两个值甚至一个值，例如：

此属性引入的填充不会增加网格本身的大小。相反，它减少了可用于在网格内渲染子项的区域的大小。

网格align属性用于定义网格部分的水平对齐方式。

其中align属性的类型选项可以采用以下类型之一：

grid justify-content属性用于定义网格组件如何在其子组件之间和周围分配空间。

其中justify-content属性的类型选项可以采用以下类型之一：

grid frag 属性用于定义网格的片段。片段用于突出显示或逐步显示幻灯片上的单个元素。

frag属性的index选项是一个正值表示片段显示的顺序。

正如您在示例中肯定看到的那样，您可以将 Fragment 和[Fragment List](#5、 元素动画)相互组合。默认情况下，片段列表生成从 1 开始的索引。

Advanced Slides 允许您根据幻灯片模板设计单独的幻灯片。每个幻灯片模板都可以有独特的布局和结构，您可以在整个演示文稿中重复使用。使用幻灯片模板可以轻松快速地创建在不同幻灯片中使用不同布局格式的演示文稿。此外，幻灯片模板减少了 md 演示文档中的冗余代码（又名样板代码）。

以下幻灯片模板定义了一个幻灯片结构，该结构具有主要内容区域和页脚。应命名为tpl-footer并且可以作为常规 md 笔记存储在您用于制作演示文稿的项目中的任何位置。

请注意，每个模板都必须包含变量，即使它没有在幻灯片内容中使用。

一旦我们创建了这个幻灯片模板，我们就可以通过以下方式制作幻灯片注释来在我们的演示文稿中引用它：

默认情况下，幻灯片模板中的每个变量都必须由幻灯片中的块注释设置。否则，将在变量中放置一个虚拟文本，提醒您为此变量创建块注释。但是在某些情况下您不希望出现这种行为，例如当您在模板的页脚中有一个引文行，但您不需要引用任何引文。因此，您可以在模板中创建一个部分并?在其定义中添加一个：

在您在幻灯片中创建页脚块注释之前，页脚标记将不可见。

您可以定义一个默认模板，通过添加defaultTemplate您的 yaml 的 frontmatter 属性：

本文来自博客园，作者：Kenny_LZK，转载请注明原文链接：https://www.cnblogs.com/liuzhongkun/p/17096534.html