reveal.js + markdown 制作幻灯片——配置选项,幻灯片背景,尺寸,插入媒体,链接
配置选项
配置选项在index.html文件的<body>
中,通过Reveal.initialize({ });
,例如
Reveal.initialize({
hash: true,
controls: true, // 显示右下角控制按钮
progress: true, // 显示进度条
history: true, // 开启历史记录
slideNumber:true, // 显示页码
center: true, // 幻灯片内容默认排版在中心
});
更多参考官网
此外,通过Reveal.configure({ });
更新配置,例如
Reveal.configure({showNotes: true}); // 显示幻灯片注释
幻灯片背景
CSS颜色
十六进制颜色,颜色名称,RGB颜色,HSL颜色,具体参考CSS颜色值
- 十六进制颜色:用 #RRGGBB 规定十六进制颜色,其中 RR(红色)、GG(绿色)和 BB(蓝色)十六进制整数指定颜色的成分(分量)。所有值必须在 00 到 FF 之间,例如
<!-- .slide: data-background="#ff0000" -->
- RGB颜色:
rgb(red, green, blue)
,其中每个参数定义颜色的强度,可以是 0 到 255 之间的整数或百分比值,例如
<!-- .slide: data-background-color="rgb(70,0,100)" -->
- HSL颜色:
hsl(hue, saturation, lightness)
,色相(hue)可以是从0到360,饱和度(saturation)和亮度(lightness)均为百分比,例如
<!-- .slide: data-background-color="hsl(120,65%,75%)" -->
此外,可以通过下面示例添加过渡颜色的背景
<!-- .slide: data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)" -->
图片背景
data-background-image
:图片源data-background-size
:图片大小data-background-repeat
:图片重复方式data-background-position
:图片位置background-opacity
:背景图片透明度
例如
<!-- .slide: data-background-image="figures\f1.png" data-background-size="200px" data-background-repeat="repeat-y" data-background-position="right 20% bottom 50%" data-background-opacity="0.5" -->
视频背景
data-background-video
:添加视频源data-background-video-loop
:控制视频循环data-background-video-muted
:控制视频静音- 其他属性可参考官网
例如
<!-- .slide: data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-video-loop data-background-video-muted -->
网页背景
例如
<!-- .slide: data-background-iframe="https://revealjs.com/" data-background-interactive -->
添加data-background-interactive
可以使得背景具有交互性
背景过渡
默认为cross fade,通过配置选项backgroundTransition
指定
幻灯片尺寸
在index.html
中配置选项部分·设置幻灯片统一尺寸,例如
Reveal.initialize({
width: 960,
height: 700,
margin: 0.04,
minScale: 0.2,
maxScale: 2.0
});
插入媒体
-
适用于
<video>
,<audio>
,<iframe>
,例如,main.md
中<video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" > </video>
-
data-autoplay
控制视频自动播放 -
通过在
index.html
中配置选项Reveal.initialize({autoPlayMedia: true})
,全局控制幻灯片中视频是否自动播放
插入链接
- markdown语法
[链接描述](链接)
,例如[点击跳转官网](https://revealjs.com/)
- 跳转位置标记锚点
<!-- .slide: id="链接名称" -->
,然后插入链接,例如<!-- .slide: id="vi" -->
<a href="#/vi">点击跳转上一页幻灯片</a>
- 利用幻灯片索引,
#/0/0
,第一个数字为水平幻灯片索引,第二个数字为垂直幻灯片索引,例如<a href="#/8/2">点击跳转上一页幻灯片</a>
- 此外,还可插入导航链接,具体见官网
参考文献
[1] 官网