Advanced_Slides 的使用 

来源  https://www.cnblogs.com/liuzhongkun/p/17096534.html

• Advanced Slides 的使用
  • 一、 概述
    • 1、 简介
    • 2、 特征
    • 3、 第一个 PPT
  • 二、 基础语法
    • 1、 水平垂直幻灯片
    • 2、 元素注释
    • 3、 幻灯片注释
    • 4、 块注解
    • 5、 元素动画
    • 6、 内联样式
    • 7、 幻灯片背景样式
    • 8、 演讲者模式
    • 9、 列表动画
    • 10、 画图支持
    • 11、 图标
    • 12、 表情包
    • 13、 图表支持
    • 14、 幻灯片动画
  • 三、 布局
    • 1、 拆分组件
    • 2、 网格组件
      • 2.1 基本语法
      • 2.2 浮动
      • 2.3 属性
        • 2.3.1 背景
        • 2.3.2 边框
        • 2.3.3 动画
        • 2.3.4 不透明度
        • 2.3.5 过滤
        • 2.3.6 旋转
        • 2.3.7 填充
        • 2.3.8 对齐
        • 2.3.9 justify-content
        • 2.3.10 元素动画
        • 2.3.11 总结
  • 四、 模板
    • 1、 基础使用
    • 2、 可选变量
    • 3、 案例
      • 3.1 模板文件
      • 3.2 幻灯片
    • 4、 默认模板
  • 五、 配置选项

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、 水平垂直幻灯片

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

2、 元素注释

用来设置元素的样式

3、 幻灯片注释

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

4、 块注解

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

5、 元素动画

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

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

6、 内联样式

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

1. 通过使用<style>标签

   	<style>
   	.with-border{
   	border: 1px solid red;
   	}
   	</style>
   	styled text <!-- element class="with-border" -->

2. 通过 CSS 文件包含它们

   	---
   	css: [css/layout.css,css/customFonts.css]
   	---

7、 幻灯片背景样式

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

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

8、 演讲者模式

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

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

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

9、 列表动画

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

10、 画图支持

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

11、 图标

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

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

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

12、 表情包

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