Obsidian插件advance slider 使用指南

原创已于 2026-05-23 10:59:45 修改 · 329 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#markdown

于 2026-05-23 10:58:48 首次发布

一、主要性能

即时预览
支持第三方Theme
嵌套其他 Markdown： ![[Note.md#FirstChapter]]
图片语法两种： ![ [picture.jpg]] VS ![ [image.png|100x100]]
支持块Block： :: : block
支持脚注 -Here's a footnote[ ^1]
支持文档内表样式 - <style>....</style>
前面设置的选项可传递
注释元素 
支持内部链接
- [ [Note]] 将在演示文稿中呈现为普通文本
- [ [Note|My Note]] 用别名
支持Excalidraw
支持Mermaid

二、设置背景颜色的方法

1、通篇应用默认主题
theme: night
2、直接设置帧背景色

本参数可以覆盖theme主题
3、设置背景图片

注意图片名用单引号，不是方括号
4、设置grid背景色
5、将文字视作grid，用grid语法设置

三、不同级别的属性设置

1、帧属性：
2、要素属性：
3、字体大小：

四、自带主题样式

black (default)
white
league : 联盟，黑
beige：米黄色
sky：蓝
night：纯黑
serif：#F1F1EB，某种白
simple：白色
solarized：#fdf6e3，米黄
blood：黑背景，红字
moon：#002b36 深青色
consult：灰色
css/mattropolis.css在仓库obsidian-advanced-slides\css中
css/vs2015.css

五、主题语法：theme

theme: night

高亮主题：highlightTheme

高亮主题定义了代码块元素的外观。要激活高亮主题，只需在幻灯片的 frontmatter 部分添加 highlightTheme 属性：

highlightTheme: monokai

六、使用模板

1、定义模板

普通MD文件，但是，里面用变量作为占位符

即使幻灯片内容中没有使用 <% content %> 变量，每个模板也必须包含该变量。
首行引用模板后，下面的内容默认放到<% content %> 变量中。
如果想放到其他变量中，需用块语法：

::: footer
#### This header will be placed in the footer section of the template
:::

2、引用模板

<!-- slide template="[[tpl-footer]]" -->

## 这些内容自动放置的 <% content %> 变量中

这些内容自动放置的 <% content %> 变量中

这些内容自动放置的 <% content %> 变量中

::: footer
用块语法将内容放到模板的其他变量中

注意是三个冒号
:::

3、隐藏没有给模板变量赋值的变量

引用了模板

但模板中设置的变量没有赋值

默认会将变量名显示出来

要避免这种情况

在模板中定义变量名时加问号

如：<%? footer %>

七、grid & 文本框

1、概述

grid 是一种布局

其用途是将帧分割成块

grid的长高参数用drag设置

位置参数用drop设置

文本框视同grid

<grid drag="width height" drop="x y" bg="blue">

2、grid的长宽设置：drag=“width height”

长宽随意设置，

grid之间可以相互重叠

也可以超出帧的范围

3、grid位置：drop=“type”

center
top | bottom
left | right
topleft | topright
bottomleft | bottomright

4、grid自身的方向：flow=“col | row”

flow=“col”: 纵向，把内容填到网格内

flow=“row”: 横向，把内容填到网格内

5、grid背景色：bg=“color”

<grid drag="100 100" drop="center" rotate="10" bg="orange">
网格颜色
</grid>

6、文字可以视作grid

用类似grid参数设置文字背景框

7、grid边框设置： border=(宽度线型颜色)

网格边框颜色 --- ### 8、文本框边框也适用grid法

9、grid的动画关键字

fadeIn|fadeOut
slideRightIn|slideLeftIn
slideUpIn|slideDownIn
slideRightOut|slideLeftOut
slideUpOut|slideDownOut
scaleUp|scaleDown
scaleUpOut|scaleDownOut

10、grid的动画语法：animate=“type”

对文本框设置动画

行的长度总共多少像素？
100？

11、grid的透明度：opacity=“0-1”

透明度

既包括文字

也包括背景

文本框的透明度

12、滤镜关键字

blur：模糊
bright：亮化
contrast
grayscale
hue
invert
saturate
sepia

13、滤镜：filter=“grayscale()”

注意：滤镜关键字后面要加括号

文本的滤镜

grid的滤镜

对网格实施滤镜

![[33.jpeg|200]]

14、grid的内边框：pad=“px”

pad的参数后面要带px
![[44.jpg|400]]

15、grid内文本的对齐：align=“type”

left | right
center (default)
justify / block
top | bottom
topleft | topright
bottomleft | bottomright
stretch

16、利用align="stretch"将多张图片填满空间

![[44.jpg]] ![[44.jpg]] ![[44.jpg]]

17、grid内容的排列样式：justify-content=“type”

start
center
space-between
space-around
space-evenly (default)
end

18、网格片段：frag=“n”

网格片段属性用于为网格定义片段。片段用于高亮或逐步显示幻灯片上的单个元素。

如果片段属性的索引选项为正值，表示片段的显示顺序。

比如官方样例中，片段一中用+设置了几个片段的名字

后面的片段中用frag="1"设置显示顺序，将两者关联起来

19、网格片段的例子

### Fragments: + Right + Bottom ![[44.jpg]] ![[陈土良作.png]]

八、split

grid非常精细，但有时只需要大致分割一下

此时，用split

1、分块间的空白：gap=“1”

图片和文字都适用
如果是文字，与split之间必须有空格

2、块中文字对齐方式：align=“left”

九、插入icon图标

<!-- slide bg="beige"-->
<grid drag="45 100" drop="10 0" bg="#EEB73F" align="left" pad="20px 100px 30px 300px " >
##### Your Service
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
<!-- element style="font-size:25px"-->


##### Your Service
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
<!-- element style="font-size:25px"-->


##### Your Service
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
<!-- element style="font-size:25px"-->

	
##### Your Service
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
<!-- element style="font-size:25px"-->

</grid>

<grid bg="#EEB73F" drag="20 100" drop="left"  align="justify">

<i color="black" class="fas fa-address-card fa-3x"/>

<i color="black" class="fas fa-ambulance fa-3x"/>

<i color="black" class="fas fa-balance-scale-left fa-3x"/>

<i color="black" class="fa fa-broom fa-3x"/>


</grid>

十、好看的样例

1、图片上叠加grid式

<!-- slide data-background-image='44.jpg'-->
<grid drag="80 70" drop="bottomright" bg="#EEB73F" >

# 图片为背景
# THIS IS TITLE
<!-- element style="letter-spaeing:0.5rem;"-->
#### 上面用grid存放内容
grid不要放在正中间，偏右好看
</grid>

2、grid中嵌套多个grid二次分割，在子grid中放置图片和文字

---
<!-- slide bg="beige"-->
<grid drag="81 85" drop="bottomleft" bg="#EEB73F"/>

<grid drag="27 85" drop="0 15" bg="#EEB73F" align="justify" pad="50px">
![[44.jpg|400]]

**Agenda 01**

**Lorem Ipsum** is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
<!-- element style="font-size:30px"-->
</grid>

<grid drag="27 85" drop="27 15" bg="#EEB73F" pad="50px" align="justify">
![[55.jpg|350]]

**Agenda 02**

**Lorem Ipsum** is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
<!-- element style="font-size:30px"-->

</grid>

<grid drag="27 85" drop="54 15" bg="#EEB73F" pad="50px" align="justify">
![[66.jpg|350]]

**Agenda 03**

**Lorem Ipsum** is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
<!--element style="font-size:30px"-->
</grid>

文字也是grid
<!--element drop="67 8" rotate="90" style="font-size:90px;"-->

---

3、只用图片和文本框element调整

<!-- slide bg="#EEEDDD"-->
## 只用element属性调整位置
<!-- element drag="25 30" drop="55 15" align="left"-->

![[44.jpg]]
<!-- element drag="25 30" drop="26 20" align="left"-->

##### 按照顺序放置文本框和图片
<!-- element drag="10 5" drop="11 55" align="left" -->
图片和文字都用element进行属性设置<br>
Lorem Ipsum is 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. 
<!--element drag="30 30" drop="11 60" align="justify" style="font-size:24px"-->

![[33.jpeg]]
<!-- element drag="35 50" drop="47 40"-->

4、grid用作文本框

<!-- slide bg="#eeeddd"-->
<grid drag="35 100" drop="5 0" bg="#EEB73F">

<grid drag="50 20" drop="-45 40"  rotate="-90">

## 旋转网格

##### 是为了旋转文字
##### 这里把网格当文本框用

</grid>
</grid>

![[44.jpg]]
<!--element drag="32 40" drop="28 10" border="10px solid #eeb73f"-->

![[55.jpg]]
<!-- element drag="32 40" drop="28 50" border="10px solid #eeb73f"-->

Lorem Ipsum is 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. 
<!-- element drag="30 30" drop="65 10" style="font-size:24px" align="justify"-->

Lorem Ipsum is 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. 
<!-- element style="font-size:24px" drag="30 30" drop="65 -20" align="justify"-->

5、grid放在图片下面，作背景和文字提示

<!-- slide bg="beige"-->
<grid drag="30 50" drop="10 20"  align="justify" pad="20px">
**Stephanie Poetri**
<!-- element style="font-size:70px"-->

*Brand Consultant*
<br><br>

Lorem Ipsum is 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. 
<!-- element style="font-size:20px"-->
</grid>

<grid bg="#EEB73F" drag="30 50" drop="50 20">

![[66.jpg]]
<!-- element drag="80 80" drop="-30 -10" border="10px solid #EE373F"-->

# Founder
<!-- element rotate="90" style="font-size:70px" drop="60 0"-->

</grid>
---

6、总分布局

<!-- slide bg="white"-->
<grid drag="22 100" drop="0 0" bg="#EEB73F"/>

<grid drag="50 20" drop="-65 40" rotate="-90">

## Meet the Expert
##### Studio Partners
</grid>

<grid drag="15 10" drop="60 12" align="left">

##### Killie Groover
Branding Specialist <!-- element style="font-size: 24px"-->
</grid>

![](https://picsum.photos/id/1005/300/300) <!-- element drag="15 25" drop="-10 5"-->

<grid drag="15 10" drop="30 45" align="left">

##### Erik Keagan
Creative Director <!-- element style="font-size: 24px"-->
</grid>

![](https://picsum.photos/id/1010/300/300) <!-- element drag="15 25" drop="45 37"-->

<grid drag="15 10" drop="60 -12" align="left" >

##### Haley Gideon
Marketing Expert <!-- element style="font-size: 24px"-->
</grid>

![](https://picsum.photos/id/1025/300/300) <!-- element drag="15 25" drop="-10 -5"-->