reveal.js + markdown 制作幻灯片——配置选项，幻灯片背景，尺寸，插入媒体，链接

xzzzzzhao

已于 2022-10-02 13:48:54 修改

阅读量948

点赞数

分类专栏： reveal.js学习文章标签： html

于 2022-09-29 16:57:09 首次发布

本文链接：https://blog.csdn.net/qq_45682183/article/details/126974499

版权

reveal.js学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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/)

跳转位置标记锚点，然后插入链接，例如
```

```
```
<a href="#/vi">点击跳转上一页幻灯片</a>
```
利用幻灯片索引，#/0/0，第一个数字为水平幻灯片索引，第二个数字为垂直幻灯片索引，例如
```
<a href="#/8/2">点击跳转上一页幻灯片</a>
```
此外，还可插入导航链接，具体见官网