Advanced Slides

xxx:: [[ 两仪.md|两仪 ]]

[[ advanced-slides-templates模板1 ]]

用上其template的能力，才能发挥它的高效作用。否则还是直接用图形化工具更方便。

{
	slide: <span title='There is no note that matches this link.' class='invalid-link'>  <span class='invalid-link-brackets'>[[</span>  advanced-slides-templates模板1  <span class='invalid-link-brackets'>]]</span></span>,
	page: 3
}

{
	slide: <span title='There is no note that matches this link.' class='invalid-link'>  <span class='invalid-link-brackets'>[[</span>  advanced-slides-templates模板2  <span class='invalid-link-brackets'>]]</span></span>,
	page: 4
}

! [[ advanced-slides_image_1.svg ]]

— %% fold %%

aliases: markdown 格式的 ppt, slides 学习笔记教程, reveal.js 教程

tags:

theme: white

width: 960

为啥用 markdown 方式的 ppt

双向引用，直接 ppt 还有个好处，就是双向同步，不会改了这忘了那

还有 slidev正在开发中，等成熟了和revealjs 综合对比看看。^4f22e2

奇技淫巧

advanced slides奇技淫巧

插件简介 %% fold %%

这个插件就是魔改的 reveal.js，和 obsidian 进行了更好地融合。
官方文档 Advanced Slides Documentation (mszturc.github.io)

We follow the philosophy of convention over configuration, which means that in most cases it is sufficient to simply write a Slide inObsidian Markdown syntax.

%% 我用的目的，应该就是基于现有的结构化的文档，进行分钟级的低时间成本改造，立马就可以达到 ppt 效果。%%

基本使用 %% fold %%

–

Links %% fold %%

• 默认的两个中括号，它不识别，如果需要呈现跳转链接，需要用回传统的 markdown 的中括号加小括号的方式。Link to note

表格 %% fold %%

–

代码支持 %% fold %%

git clone https://

按点击顺序依次高亮代码

```javascript [1-2|4] let a=0 let b=1 let c=3 var d=5

<a class='internal-link' href='/advanced-slides%E5%A5%87%E6%8A%80%E6%B7%AB%E5%B7%A7'>advanced slides奇技淫巧</a>

---

## 高级使用

--

### 垂直分页 %% fold %%

刚才已经用到，用 2 个 - 分割开就行

--

### 引入单元素的 css %% fold %%

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

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

text with attribute <!-- element data-toggle="modal" -->

--

### 单页 ppt 的 css 全局样式控制 %% fold %%

<!-- .slide: style="background-color: coral;" -->

这一页的主题被控制

--

### 单页 ppt 划分成 block，进行细粒度 css 样式控制 %% fold %%

:::

块 1

	:::

	块 2

	:::

:::

:::

块 3

块 3

可见生效方式要有前和尾形成闭合

:::

--

### 单页内的元素出现和消失的控制 %% fold %%

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" -->

--

点击按顺序出现

- 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" -->

  --

### 单页内的元素用 css 的 style 语法控制样式 %% fold %%

<style>
	.with-border{

border: 1px solid red;

	}
</style>

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

--

也可以引入 css 文件，但我应该用不到，没必要搞这么复杂的样式。

```md
前后要加---，相当于放在metadata里面
css: [css/layout.css,css/customFonts.css]

–

单页的背景控制，这很有用 %% fold %%

Slide with hex based background %% fold %%

–

• Slide with image background

  –

演讲者视图 %% fold %%

浏览器打开后，按 s，

note:

note 之后，就是演讲者自己的笔记和注释

–

最简单的控制元素进场顺序 %% fold %%

用 + 号和）号。实时阅览模式，➕会被自动变成圆，这里得换成编辑模式

• aaa %% fold %%
  • bbb
  • ccc

  –

打开 excalidraw 导出开关，这边用 svg 或 png %% fold %%

! [[ advanced-slides_image_1.svg|500 ]]

–

各种 icon 和动画 %% fold %%

要引入 html 和 css，过于麻烦，以后有需要再说：

Advaced Slides Documentation (mszturc.github.io)

版面和布局 - 分割元素

–

–

–

–

–

–

有很多高级的格式和技巧，需要用到的时候再学习。

Advaced Slides Documentation (mszturc.github.io)

版面和布局 - 网格分布 %% fold %%

–

<grid drag=”25 55” drop=”-5 10” style=bg=”green”> 25 x 55 </grid>

–

–

–

–

Noise %% fold %%

–

thick dotted blue

–

Text is too blurry

–

有需要用到再学，这块儿还是要花点时间，有很多参数可以配置

主题和配置 %% fold %%

–

在 metadata 里面加 theme:

-   black (default)
-   white
-   league
-   beige
-   sky
-   night
-   serif
-   simple
-   solarized
-   blood
-   moon
-   css/mattropolis.css

–

metadata 有各种参数可以控制主题