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

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

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

{
	slide: [[advanced-slides-templates模板1]],
	page: 3
}

{
	slide: [[advanced-slides-templates模板2]],
	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 %% ¶

a	b	c
d	e	f
大一点	自动缩放	会不会

–

代码支持 %% fold %% ¶

1git clone https://

按点击顺序依次高亮代码

1let a=0
2let b=1
3let c=3
4var d=5

[[advanced slides奇技淫巧]]

---

高级使用 ¶

–

垂直分页 %% fold %% ¶

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

–

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

text with border

text with background

text with attribute

–

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

这一页的主题被控制

–

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

:::

块 1

:::

块 2

:::

:::

:::

块 3

块 3

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

:::

–

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

Fade in

Fade out

Highlight red

Fade in, then out

Slide up while fading in

–

点击按顺序出现

• Appear Fourth

• Appear Third

• Appear Second

• Appear First

  –

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

styled text

–

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

1前后要加---，相当于放在metadata里面
2css: [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)

---

版面和布局 - 分割元素 ¶

–

–

Lorem Ipsumis simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s

when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap

into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem

–

Lorem Ipsumis simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s

when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap

into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem

–

–

--

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

Advaced Slides Documentation (mszturc.github.io)

---

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

–

60 x 55

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

90 x 20

–

Top Left

Right with default size

Bottom

–

Heading

![[Image.jpg]]

Lorem Ipsumis simply dummy text

–

Left

![[Image.jpg]]

Lorem Ipsumis simply dummy text

–

Make ¶

Noise %% fold %% ¶

some ¶

–

thick dotted blue

20px solid white

thick dotted blue

–

![[Image.jpg]]

Text is too blurry

–

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

---

主题和配置 %% fold %% ¶

–

在 metadata 里面加 theme:

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

–

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