第五章 轻快、省力地写幻灯片——reveal.js
5.1 你好，reveal.js
reveal.js是一个使用HTML和Markdown快速创建和演示幻灯片的工具，它提供了很多实用的功能，也提供了很多第三方插件来增强效果。
reveal.js的主要功能：
- 可创建水平和垂直幻灯片，支持幻灯片链接，可在幻灯片之间跳转。
- 可使用Markdown和HTML编写内容，也支持引用独立的Markdown文件。
- 可使用颜色、图片、视频、网页做为背景。
- 可添加演讲者注释，支持一键打开。
- 可配置幻灯片的主题和过渡动画，有多种方案可供选择。
- 可在手机或平板电脑上打开和演示幻灯片。
- 可打印和导出PDF格式的文档。
- 可以安装很多实用的插件来增强幻灯片的功能和演示效果。
- 自由度大，可灵活定制（如果你熟悉前端开发知识的话）。
- 支持很多快捷键的使用，操作非常方便。
5.2 快速开始
1. 搭建reveal.js使用环境
使用reveal.js必须先安装Node.js和Git
2. 下载reveal.js
使用浏览器下载。
打开https://github.com/hakimel/reveal.js→【Clone or download】→【Download ZIP】→解压。使用Git命令下载。
3. 查看示例
打开reveal.js文件夹，在根目录中找到index.html，然后使用VS Code打开。
<div class="reveal">
<div class="slides">
<!-- 每一页幻灯片都使用<section>标签包裹 -->
<section>Slide 1</section><!-- 第一页 -->
<section>Slide 2</section><!-- 第二页 -->
</div>
</div>
从这段代码可以看出，在HTML中，幻灯片标记的层次结构是.reveal >.slides > section。关于section，我们可以理解为分页标签，每一张幻灯片都是使用<section>标签包裹的。双击index.html可在浏览器中打开幻灯片。
4. 创建我们的第一个幻灯片
复制index.html并重命名为first.html，使用VS Code打开，修改核心代码。
<div class="reveal">
<div class="slides">
<!-- 第一页 -->
<section>如何使用reveal.js创建和演示幻灯片</section>
<!-- 第二页 -->
<section>第一步：下载reveal.js项目构建创作环境</section>
<!-- 第三页 -->
<section>第二步：熟悉语法规则在进行内容创作</section>
<!-- 第四页 -->
<section>第三步：启动本地服务进行幻灯片演示</section>
</div>
</div>
保存后双击first.html在浏览器中打开幻灯片，至此，第一个简单的幻灯片就创建好了。
当然，这个幻灯片是比较简单的，因为我们还没有学习在reveal.js中创建幻灯片的语法和规则，待熟悉reveal.js的语法规则后，就可以随心所欲地创作幻灯片了。
5.3 使用指南
前面搭建的是最基本的环境配置，进行一些基础操作是没有问题的，但有些功能需要从本地Web服务器运行，如演讲者备注、引用外部Markdown文件、修改后自动刷新等，如果还是使用前面的环境就行不通了。为了能够进行完整的演示，还要对项目环境进行完整的配置。
5.3.1 搭建完整的项目环境
1. 在终端处切换到项目根目录下
使用VS Code打开reveal.js项目，在左边项目列表的空白处，单击鼠标右键，在弹出的菜单中选择【在终端中打开】，终端会切换到项目根目录下。
2. 安装reveal.js项目中依赖的模块
在终端处运行npm install，如果安装模块失败，请使用cnpm install来安装。
3，运行命令，启动Web服务
npm start
如果启动正常，则终端处会输出如下内容。
然后浏览器会自动打开http://localhost:8000，默认打开的是index.html页面。如果想打开first.html，则需要手动输入http://localhost:8000/first.html。
注意： 如果启动Web服务时报错，请确认是否已成功安装了项目所依赖的模块。如果端口被占用，可以在运行时指定端口。
npm start -- --port=7000
Web服务启动成功之后又运行了一个watch任务，这个watch任务会监控项目中的文件；如果有文件被修改，在保存之后服务会自动重启，页面也会自动刷新，这样我们就能看到页面最新修改后的效果了。
至此，完整的reveal.js创作环境就搭建好了
5.3.2 快速了解reveal.js
1. 创建并编写幻灯片
在reveal.js项目中创建HTML文件，然后在HTML文件中编写幻灯片。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/reveal.css">
<!-- 在这里修改幻灯片 -->
<link rel="stylesheet" href="css/theme/black.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- 每一页幻灯片都使用<section>标签包裹 -->
<section>Slide 1</section><!-- 第一页 -->
<section>Slide 2</section><!-- 第二页 -->
</div>
</div>
<script src="js/reveal.js"></script>
<script>
// 在这里修改幻灯片配置
Reveal.initialize({});
</script>
</body>
</html>
各部分的用途：
- 在<head>中设置幻灯片的主题。
- 在<section>中编写幻灯片的内容。
- 在Reveal.initialize({});中添加reveal.js的依赖和配置。
2. 演示幻灯片
简单的幻灯片可以通过使用鼠标双击HTML文件在浏览器中打开进行演示。但如果涉及演讲者备注或引用外部的Markdown文件，则需要使用Web服务器运行。本地运行命令为npm start，如果想要部署到服务器上则需要使用Nginx。
3. 幻灯片的类型
reveal.js中的幻灯片分为两种类型：水平幻灯片和垂直幻灯片。顾名思义，水平幻灯片是左右翻页的幻灯片，垂直幻灯片则是上下翻页的幻灯片；垂直幻灯片通常嵌套在水平幻灯片中使用。
- 示例代码
<!-- 最外层是水平幻灯片 -->
<section>
<!-- 嵌套的垂直幻灯片1 -->
<section data-markdown>
<textarea data-template>
## 第一页
</textarea>
</section>
<!-- 嵌套的垂直幻灯片2 -->
<section data-markdown>
<textarea data-template>
## 第二页
</textarea>
</section>
</section>
4. 使用Markdown编写幻灯片
reveal.js使用Markdown编写幻灯片有两种方式。
- 在HTML文件中直接使用Markdown编写。
- 在HTML文件中引用外部的Markdown文件。
如果在HTML文件中直接使用Markdown编写，则需要给<section>标签添加data-markdown属性，并且内容要使用<textareadata-template>包裹。
<section data-markdown>
<textarea data-template>
## 居中对齐
| 序号 | 姓名 | 年龄 |
| :---: | :---: | :---: |
| 1 | 张三 | 31 |
| 2 | 李四 | 30 |
| 3 | 王五 | 29 |
</textarea>
</section>
如果在HTML文件中引用外部的Markdown文件，则需要指定分页的匹配规则。
<!-- 引用外部文件的Markdown文件 -->
<section data-markdown="fileName.md"
data-spearator="^\n\n\n"
data-spearator-vertical="^\n\n"
data-spearator-notes="^Note:"
data-charset="utf-8">
</section>
5.添加reveal.js的依赖和配置
在Reveal.initialize({});中进行对reveal.js的配置，如开启历史记录、显示页面、设置全局转场效果等。
<script>
Reveal.initialize({
history: true, // 开启历史记录
slideNumber:true, // 显示页码
transition:'convex', // 转场效果
// 配置依赖库
dependencies:[{
src: 'plugin/markdown/marked.js'
},{
src: 'plugin/markdown/markdown.js'
},{
src: 'plugin/notes/notes.js',
async: true
},{
src: 'plugin/highlight/highlight.js',
async: true,
callbcak: function () {
hljs.initHighlightingOnLoad();
}
},{
src: 'plugin/zoom-js/zoom.js',
async: true
}]
});
</script>
reveal.js不依赖任何第三方脚本，但有一些可选的库供用户自由选择，这些库按依赖顺序进行加载，如上述代码所示。
关于配置依赖的库的语法解读如下：
- src：指定要加载的脚本的路径。
- async：[可选]，如果脚本要在reveal.js启动后加载，则设为true，默认为false。
- callback：[可选]，指定脚本加载后要执行的函数。
6. 示例：编写幻灯片的封面
为了能够更直观地展示reveal.js幻灯片的编写规则，我们分别使用HTML和Markdown实现效果相同的幻灯片。
- 为幻灯片写封面（HTML版）
- 复制index.html，并重命名为revealjs.html，用VS Code打开。
- 先不管代码的其他部分（后面都会讲到），先找到＜div class=＂slides＂＞，在＜section＞＜/section＞中添加幻灯片的内容
<div class="reveal">
<div class="slides">
<!-- HTML实现效果 -->
<section>
<h1>大道至简</h1>
<h3>使用reveal.js创建幻灯片</h3>
<p>作者XXX</p>
</section>
</div>
</div>
注意代码的层级结构，使用<section>标签包裹的是一张幻灯片的内容。
小提示： 为了让大家更容易理解后面的内容，在这里先明确几个HTML中的概念。
- 元素：元素指的是从开始标签到结束标签中间的所有代码。
- 标签：标签是由<>包裹的关键词，通常是成对出现的，如<section>和</section>。
- 属性：标签中的属性提供了HTML元素的更多信息，通常在元素的开始标签中以键/值对的形式出现，如＜section data-state=＂customevent＂＞
- 为幻灯片写个封面（Markdown版）
<!-- 引用外部文件的Markdown文件 -->
<section data-markdown>
<textarea data-template>
# 大道至简
### 使用reveal.js创建幻灯片
作者XXX
</textarea>
</section>
注意： 使用Markdown时需要在<section>标签中添加data-markdown属性，Markdown的内容要包裹在<textarea data-template>之中。
小提示： reveal.js通过marked.js解析Markdown，在使用Markdown之前请确保添加了下面的依赖。
Reveal.initialize({
dependencies:[{
src: 'plugin/markdown/marked.js'
},{
src: 'plugin/markdown/markdown.js'
},
]
});
上面分别使用HTML和Markdown编写了效果相同的幻灯片，能够明显感受到Markdown更为简洁。需要注意的是，在使用Markdown时，要给<section>标签添加data-markdown属性，并且Markdown内容要使用<textarea data-template>进行包裹。
5.3.3 常用格式
reveal.js使用marked.js来解析Markdown，并支持CommonMark和GitHub Flavored Markdown。不过，有些效果还是需要使用HTML或引入其他资源来实现的，如任务列表、视频、字体颜色、下画线和Emoji等。
1.标题
标题、普通文本和更小的文本的示例代码：
<!-- 标题 md -->
<section data-markdown>
<textarea data-template>
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
普通文本
<small>更小的文本</small>
</textarea>
</section>
小提示：
- 本示例只演示了一到四级标题，因为四、五、六级标题区别不大，这里就不演示五、六级标题了。
- 由于Markdown不支持小号字体的标记，因此小号字体（更小的文本）使用<small>标签来实现。
- 我们经常会在Markdown中使用HTML标签以实现更丰富的显示效果，如改变字体颜色、设置图片显示大小和位置等。
2. 引用
行内引用和区块引用的示例代码：
<!-- 引用 md -->
<section data-markdown>
<textarea data-template>
<q>Markdown真了不起</q>
> 区块引用使用 > 标记
> > 引用嵌套使用
</textarea>
</section>
由于Markdown不支持行内引用标记，因此行内引用使用<q>标签实现。
3. 表格
<!-- 表格 md -->
<section data-markdown>
<textarea data-template>
| 序号 | 姓名 | 年龄 |
| ---- | ---- | ---- |
| 1 | 张三 | 31 |
| 2 | 李四 | 30 |
| 3 | 王五 | 29 |
</textarea>
</section>
<!-- 表格居中对齐 md -->
<section data-markdown>
<textarea data-template>
| 序号 | 姓名 | 年龄 |
| :---: | :---: | :---: |
| 1 | 张三 | 31 |
| 2 | 李四 | 30 |
| 3 | 王五 | 29 |
</textarea>
</section>
4. 列表
<!-- 无序列表 md -->
<section data-markdown>
<textarea data-template>
任务进度
- 第一阶段
- 第二阶段
- 第三阶段
</textarea>
</section>
<!-- 有序列表 md -->
<section data-markdown>
<textarea data-template>
任务进度
1. 第一阶段
2. 第二阶段
3. 第三阶段
</textarea>
</section>
<!-- 任务列表 md -->
<section data-markdown>
<textarea data-template>
## 任务列表
<input type="checkbox" style="zoom: 200%;" checked> 第一阶段
<input type="checkbox" style="zoom: 200%;"> 第二阶段
<input type="checkbox" style="zoom: 200%;"> 第三阶段
</textarea>
</section>
注意： 由于reveal.js中的Markdown不支持任务列表，因此任务列表需要使用HTML来实现，在本例中设置了复选框的大小。
5. 代码
插入代码的示例：
<!-- 插入代码 md -->
<section data-markdown>
<textarea data-template>
```python
# python代码
def fun():
pass
```
```js
# javascript代码
function getName(){
return null
}
```
</textarea>
</section>
请注意，插入的代码中如果有特殊符号 < 和 >，需要使用<和>来代替，否则它们会被浏览器误认为标签。
6. 文本格式
<!-- 插入代码 md -->
<section data-markdown>
<textarea data-template>
使用Markdown实现**加粗**、*斜体*、~~删除线~~、<u>下划线</u>、很简单
还可以<font color="red">改变颜色</font>
</textarea>
</section>
7. Emoji
在reveal.js中无法直接使用Emoji，如果想使用，则需要在head中引用一个CSS文件。
<link href="https://afeld.geithub.io/emoji-css/emoji.css" rel="stylesheet">
<!-- Emoji md -->
<section data-markdown>
<textarea data-template>
## Emoji
<i class="em em-construction_worker"></i>
<i class="em em-dog"></i>
<i class="em em-dancers"></i>
</textarea>
</section>
Emoji的选择很简单，打开https://afeld.github.io/emoji-css/，复制所中意的图片的代码，然后粘贴一下就可以了.
8. 图片
<!-- 图片 md -->
<section data-markdown>
<textarea data-template>
</textarea>
</section>
在Markdown中，没有设置图片大小的标记，如果想设置图片的大小，需要使用HTML标签来实现。
<!-- 图片 md -->
<section data-markdown>
<textarea data-template>
<!-- 设置图片大小 -->
<img width="200" height="200" data-src="../img/00022.gif" alt="插入图片">
</textarea>
</section>
9.视频和音频
插入视频和音频的示例代码：
<!-- 视频 md -->
<section data-markdown>
<textarea data-template>
## 视频
<video width="400" height="350" controls="controls">
<source src="视频文件路径" type="video/mp4">
</video>
</textarea>
</section>
<!-- 音频 md -->
<section data-markdown>
<textarea data-template>
## 音频
<audio src="音频文件路径" controls="controls"></audio>
</textarea>
</section>
插入视频通过<video>标签来实现，使用width和height属性可设置视频的大小。插入音频通过<audio>标签来实现，使用controls属性可以显示播放控件。
5.3.4 幻灯片的嵌套、链接和注释
1. 幻灯片嵌套
reveal.js中的幻灯片有水平幻灯片和垂直幻灯片两种，垂直幻灯片通常嵌套在水平幻灯片中使用。幻灯片最外层是水平幻灯片，使用<section>标签包裹，嵌套的每一张垂直幻灯片也要使用<section>标签包裹
<!-- 最外层水平幻灯片-->
<section>
<!-- 嵌套的垂直幻灯片1 -->
<section data-markdown>
<textarea data-template>
## 垂直幻灯片1
</textarea>
</section>
<!-- 嵌套的垂直幻灯片2 -->
<section data-markdown>
<textarea data-template>
## 垂直幻灯片2
</textarea>
</section>
</section>
如果你开启了页码显示功能，幻灯片的右下角会显示页码，假如当前水平幻灯片是第5页，那垂直幻灯片就会显示5.1、5.2、5.3。
如果你开启了历史记录功能，那么浏览器地址窗口也会这样显示。
2. 链接幻灯片
当进行幻灯片演示时，如果想要回到之前讲过的某一页或提前查看后面的某一页，就需要用到幻灯片链接功能了。
本质上，使用reveal.js编写的幻灯片就是一个网页，因此想要在幻灯片之间跳转，只需要添加链接就可以了。
<!-- 创建链接 -->
<section data-markdown>
<textarea data-template>
去[第三页](#/3)
去[第二页第二节](#/2/2)
新打开一个页面再跳转到<a href="#/3" target="_blank">第三页</a>
</textarea>
</section>
如果想打开一个新页面，而不是直接跳转：
<a href="#/3" target="_blank">另打开一个页面，再跳转到第三页</a>
3.演讲者注释
在演讲者注释界面上，可以查看当前幻灯片的注释，也可以预览下一页幻灯片的内容。由于演讲者注释是嵌到幻灯片里面的，因此要在对应的幻灯片页面里编写注释内容。
如果使用Markdown编写，则注释内容默认以 Note+: 开头
<!-- 演讲者注释md -->
<section data-markdown>
<textarea data-template>
## 按<font color="red">**S**</font>键可以打开演讲者注释
使用Markdown编写，则注释内容默认以 Note+: 开头
<!-- 演讲者注释 -->
Note+:
在演讲者注释界面上，可以查看当前幻灯片的注释，也可以预览下一页幻灯片的内容。
</textarea>
</section>
5.3.5 幻灯片显示
1. 背景
幻灯片可以使用不同的颜色作为背景，也可以使用图片或视频作为背景。
a. 背景颜色
<!-- 背景颜色 -->
<section data-markdown>
<textarea data-template>
## 指定背景颜色
```html
<section data-background="#F34D4E">
```
</textarea>
</section>
请注意，在插入的代码中如果有特殊符号 < 和 >，则需要使用<和>代替，否则它们会被浏览器误认为是标签而导致渲染错误。
b. 图片背景
将图片设置为幻灯片背景，需要在<section>标签中使用data-background属性进行设置。
<!-- 图片背景 -->
<section data-background="图片背景文件路径">
<textarea data-template>
## 指定背景图片
```html
<section data-background="path/image.png">
```
</textarea>
</section>
在默认情况下，图片会被拉伸填满整个页面，这有可能会导致图片失真，为了避免这种情况，可以使用 data-background-size 属性设置图片的大小，也可以使用data-background-repeat=＂repeat＂平铺图片。
<!-- 图片背景 -->
<section data-background="图片背景路径/文件名" data-markdown data-background-repeat="repeat" data-background-size="100px">
<textarea data-template>
<!-- 通过CSS添加背景图片 -->
<div style="background-color: rgba(0,0,0,0.603); color:#fff; padding: 15px">
## 平铺图片
</div>
```html
<!-- 平铺图片图片背景，并指定图片的大小 -->
<section data-background="path/image.png" data-markdown data-background-repeat="repeat" data-background-size="100px">
```
</textarea>
</section>
也可以使用GIF动态图作为幻灯片的背景。
c. 视频背景
将视频设置为幻灯片的背景，需要在<section>标签中使用data-background-video属性进行设置。
<!-- 图片背景 -->
<section data-background-video="图片背景路径/文件名" data-markdown>
<textarea data-template>
<!-- 通过CSS添加背景颜色 -->
<div style="background-color: rgba(0,0,0,0.603); color:#fff; padding: 15px">
<h2>视频背景</h2>
</div>
</textarea>
</section>
由于视频背景可能会导致幻灯片的内容看不清，上述示例通过<div>标签为部分内容添加了样式，并指定了背景颜色和文字颜色。
d. 网页背景
将网页设置为幻灯片的背景，需要在<section>标签中使用data-background-iframe属性进行设置，
<!-- 图片背景 -->
<section data-background-iframe="https://www.baidu.com" data-background-interactive data-markdown>
<textarea data-template>
## 网页作为幻灯片的背景
</textarea>
</section>
由于网页位于幻灯片下的背景图层中，在默认情况下，我们无法与其交互，如果想要与网页进行交互，需要使用data-background-interactive属性进行设置。
2. 主题
reveal.js提供了11种主题供选择。
| 序号 | 主题 | CSS文件地址 |
|---|---|---|
| 1 | black(默认) | css/theme/black.css |
| 2 | white | css/theme/white.css |
| 3 | league | css/theme/league.css |
| 4 | sky | css/theme/sky.css |
| 5 | beige | css/theme/beige.css |
| 6 | simple | css/theme/simple.css |
| 7 | serif | css/theme/serif.css |
| 8 | blood | css/theme/blood.css |
| 9 | night | css/theme/night.css |
| 10 | moon | css/theme/moon.css |
| 11 | solarized | css/theme/solarized.css |
在head中找到引用主题的样式文件可以替换主题。
<link rel="stylesheet" href="css/theme/black.css">
默认主题是black，如果想使用其他的主题，只要替换black.css就可以了。
3. 开启历史记录
由于在每次保存修改后，Web服务都会自动重启，页面也会随之刷新，这就导致刷新后的页面总是会跳转到首页。假如我们当前编辑的是第10页的内容，保存后浏览器会自动跳转到首页，但如果我们想要看修改后的效果，就需要再翻到第10页才能看到，这样极为不便。
开启幻灯片的历史记录功能，让它记住我们当前所在的页面。开启方法为在revealjs.html代码底部找到Reveal.initialize({});，添加history:true开启历史记录。
Reveal.initialize({
history: true, // 开启历史记录
dependencies:[{
......
}]
});
保存后，在浏览器中可观察到网址显示的格式为：.html#/页码。
小提示： 熟悉HTML的同学应该知道，历史记录正是利用锚点来进行页面定位的。
4. 显示页码
在默认情况下，幻灯片是不显示页码的，如果想在幻灯片上显示页码，需要在Reveal.initialize({});中进行配置。页码显示在幻灯片的右下角。从页码上能很容易区分出垂直幻灯片和水平幻灯片。
slideNumber: true, // 显示页码
5. 显示进度条
进度条默认是显示的，如果不想显示进度条，需要在Reveal.initialize({});中配置。
progress: false, // false是不显示进度，要显示就设为true
5.3.6 演示效果
1. 分段演示
我们在演示幻灯片时，可能会想要把一页幻灯片上的内容分段显示出来。
<section data-markdown>
<textarea data-template>
## 分段演示
<span class="fragment">分段演示</span>
<span class="fragment">就是</span>
逐步 <!-- .element: class="fragment" -->
显示内容 <!-- .element: class="fragment" -->
它有很多动画效果 <!-- .element: class="fragment" -->
</textarea>
</section>
上面的代码使用了两种方式来添加元素的属性，一种是标准方法，使用HTML标签为元素添加属性 class=＂fragment＂；另一种是专门为 Markdown 设计的通过HTML注释为元素添加属性的方法，这两种方法可以混合使用，也可以单独使用。
分段演示提供了多种动画效果。
<section data-markdown>
<textarea data-template>
## 分段演示效果
<p class="fragment grow">变大</p>
<p class="fragment shrink">缩小</p>
<p class="fragment fade-out">淡出</p>
<p class="fragment fade-right">向右淡入</p>
<p class="fragment fade-left">向左淡入</p>
<p class="fragment fade-up">向上淡入</p>
<p class="fragment fade-down">向下淡入</p>
<p class="fragment fade-in-then-out">淡入然后淡出</p>
<p class="fragment">也可以改变文字颜色</p>
<p class="fragment">例如：
变<span class="fragment highlight-red">红</span>
变<span class="fragment highlight-green">绿</span>
变<span class="fragment highlight-blue">蓝</span>
变<span class="fragment highlight-current-red">蓝</span>
再还原
</p>
</textarea>
</section>
2. 演示顺序
分段演示是可以控制显示顺序的，这需要为元素添加data-fragment-index属性。
<section data-markdown>
<textarea data-template>
## 分段内容顺序演示
<!-- 使用注释为元素添加属性 -->
2 <!-- .element: class="fragment" data-fragment-index="2" -->
1 <!-- .element: class="fragment" data-fragment-index="1" -->
<!-- 使用HTML标签为元素添加属性 -->
<p>
<span class="fragment" data-fragment-index="4">4</span>
</p>
<p>
<span class="fragment" data-fragment-index="3">3</span>
</p>
</textarea>
</section>
3. 转场动画
转场动画是指切换幻灯片时的过渡效果，可以单独设置某页幻灯片的转场动画，也可以设置全局的转场动画。设置单个幻灯片的转场动画，需要给<section>标签添加data-transition属性，属性的值就是转场动画的效果。
<section data-transition="zoom">
<h2>放大</h2>
</section>
reveal.js提供的转场动画效果有如下几种：
| 转场动画可选值 | 转场效果 |
|---|---|
| convex | 凸进凸出 |
| concave | 凹进凹出 |
| zoom | 缩放 |
| slide | 移入移出 |
| fade | 淡入淡出 |
如果不想对每一页都单独设置转场动画，可以设置全局动画效果，此时，需要在Reveal.initialize({});中添加如下代码。
transition: 'convex', // 转场效果
注意： 页面设置的优先级高于全局设置，因此即使设置了全局动画效果，如果还想对某页幻灯片进行其他设置也是可以的。
4. 背景过渡动画
可以通过在<section>标签中添加data-background-transition属性为每一页幻灯片设置不同的背景过渡动画，动画效果的选项跟前面讲的转场动画一样，
<section data-markdown data-transition="slide" data-background="#F34D4E" data-background-transition="convex">
<textarea data-template>
## 背景转变
<small>通过配置<font color="#fa0">**data-background-transition**</font>属性</small>
```html
<section data-background-transition="convex">
```
</textarea>
</section>
注意： 如果设置了背景过渡动画，内容的过渡就默认变成了滑入效果。
5. 自动演示
如果想让幻灯片自动演示，只需要设置自动演示的间隔时间就可以了。
Reveal.configure({
autoSlide: 5000
})
配置完成后，自动演示功能就被启用了，幻灯片的左下角将会显示一个控件，用户可以通过单击控件或按键盘上的A键来暂停或恢复自动演示。
可对单个幻灯片和片段单独设置自动演示时间：
<section data-autoslide="3000">
<p>3s之后自动播放下面的片段</p>
<p class="fragment" data-autoslide="8000">8s之后自动播放下一个的片段</p>
<p class="fragment" >3s之后自动播放下一页</p>
</section>
6. 循环演示
在默认情况下，幻灯片演示到最后一页就停止了，如果我们想要在最后一页翻页之后再从第1页开始演示，应该如何设置呢?这需要在Reveal.initialize({});中添加如下代码。
loop: true, // 循环演示，true为循环，false为不循环
7. 局部放大
如果想在演示幻灯片时，对某些内容进行突出或细致地讲解，使用局部放大效果将会非常棒。使用前需要在Reveal.initialize({});中添加依赖。
Reveal.initialize({
dependencies:[{
src: 'plugin/zoom-js/zoom.js',
async: true
}]
});
然后通过按下Alt键并单击鼠标进行局部放大或恢复。
8. 休眠
如果在演示时需要休息一会，只需要按B键或.键即可让幻灯片休眠或恢复。
9. 全屏
按F键可进入全屏状态，按Esc键可退出全屏。
10. 概览
按Esc或O键可查看幻灯片的概览
11. 帮助和快捷键
常用的快捷键如下：
| 键 | 动作 |
|---|---|
| N，空格 | 下一张幻灯片 |
| P | 上一张幻灯片 |
| ←，H | 向左 |
| →，L | 向右 |
| ↑，K | 向上 |
| ↓，J | 向下 |
| Home | 首页 |
| End | 尾页 |
| B，. | 停止 |
| F | 全屏 |
| Esc，O | 幻灯片概览 |
| S | 演讲者注释界面 |
| ？ | 打开帮助界面 |
| Alt + 鼠标单击 | 局部放大/恢复（需要添加依赖的插件） |
5.3.7 引用外部的Markdown文件
前面讲到的都是在HTML代码中使用Markdown来编写幻灯片，这样做的好处是所有内容自上而下，一气呵成，有一种整体感，使用到HTML的地方也会进行自动补全和语法检查。不好的地方就是HTML与Markdown交叉使用，如果不熟悉HTML，就会觉得比较乱，而且一旦格式化代码会导致Markdown编写的内容全乱掉，且失去语法高亮和语法检查的效果。
不过，好用的工具从来都会提供多种选择，reveal.js允许我们引用外部的Markdown文件。这样可以让HTML文件跟Markdown文件分离，在HTML文件中专注于幻灯片的配置，而在Markdown文件中专注于内容的编写，语法检查和语法高亮也都可以使用起来。另外，我们还可以同时引用多个Markdown文件，内容分类也会很方便。
外部的Markdown文件是在<section>中指定的，我们需要在HTML中添加<section>，然后在<section>的属性中指定加载和解析Markdown文件的规则。
1.配置解析规则
在<section>标签中添加属性
<section data-markdown="外部文件.md"
data-separator="^\n\n\n"
data-separator-vertical="^\n\n"
data-separator-notes="^Notes:"
data-charset="utf-8">
</section>
- 配置说明
| 作用 | 属性 | 说明 |
|---|---|---|
| Markdown文件路径 | data-markdown="外部文件 . md" | 外部Markdown文件路径 |
| 水平幻灯片分页规则 | data-separator="^\n\n\n" | 在3次换行之后是水平幻灯片 |
| 垂直幻灯片分页规则 | data-separator-vertical="^\n\n" | 在2次换行之后是垂直幻灯片 |
| 演讲者注释匹配规则 | data-separator-notes="^Notes:" | 以Notes开头的内容为演讲者注释 |
| 加载文件时的编码格式 | data-charset="utf-8" | 编码格式为utf-8 |
注意： 在Linux和macOS系统中，使用\n作为换行符，但Windows系统使用\r\n作为换行符，如果要支持所有操作系统，则需要使用正则表达式\r?\n。由于Web服务器并不会监控Markdown文件的修改情况，因此如果想查看最新修改效果，需要手动去刷新页面。
2. 配置幻灯片属性
在HTML中配置幻灯片属性是非常方便的，在Markdown文件中可以通过HTML注释来配置幻灯片的属性。
# 第一页
通过HTML注释来配置幻灯片属性
<!-- .slide: data-background="#fa0" -->
- 语法解释
- <!->是注释符号。
- .slide是指设置幻灯片。
- data-background=＂＃fa0＂是指定幻灯片的背景颜色。
3. 配置元素属性
元素属性跟幻灯片属性一样，也是通过HTML注释来配置的。
# 第一页
通过HTML注释来配置幻灯片属性
* 我是一号 <!-- .element: class="fragment" data-fragment-index="1" -->
* 我是二号 <!-- .element: class="fragment" data-fragment-index="2" -->
* 我是三号 <!-- .element: class="fragment highlight-red" -->
- 语法解释
- .element是指设置元素。
- class=＂fragment＂是指分段加载。
- data-fragment-index是指加载顺序。
- class=＂fragment highlight-red＂是指元素使用红色高亮显示。
4. 另一种分页规则
另一种比较常用的分页规则，需要在<section>的属性中配置
<section data-markdown="另一个外部文件.md"
data-separator="^\n---\n$"
data-separator-vertical="^\n--\n$"
data-separator-notes="^Notes:"
data-charset="utf-8">
</section>
这里定义的水平幻灯片的分页规则是：空行+-+空行，垂直幻灯片的分布规则是：空行+-空行，这种使用分隔线来分页的匹配规则看起来比只使用空行更加清晰，推荐使用。
5.3.8 高级进阶
1. 打印/导出PDF文件
1. 设置幻灯片的打印样式，在head中添加如下脚本
<script>
var link = document.createElement('link');
link.rel='stylesheet'
link.type='text/css'
link.href=window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css'
document.getElementsByTagName('head')[0].appendChild(link);
</script>
如果要打印/导出PDF格式的文件，就必须添加上面这段脚本，它通过匹配幻灯片地址中是否包含print-pdf来判断是否使用打印样式。
2. 在幻灯片地址中添加查询字符串print-pdf
http://localhost:8000/?print-pdf
如果想把演讲者注释也一并导出，则还要添加showNotes=true。
http://localhost:8000/revealjs.html?print-pdf&showNotes=true#/
3. 设置幻灯片导出效果
- 进入浏览器的打印界面：Chrome（推荐）→打印（Ctrl/Command+P）。
- 如果要导出PDF格式的文件，把【目标打印机】通过【更改...】设置为【另存为PDF】即可；如果要打印文件，直接选择打印机就可以了。（本例演示的是导出PDF格式的文件。）
- 把【边距】设置为【无】。
- 【选项】勾选【背景图形】。
4. 保存幻灯片，单击【保存】后选择保存地址就可以了
2.插件
插件可以增强幻灯片的功能，这里有很多好用的插件供选择：https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware
a. 自动生成导航菜单插件
reveal.js-menu是一个自动生成幻灯片导航菜单的插件，还可以在菜单中切换主题和转场动画。
npm install --save reveal.js-menu
- 依赖中添加
Reveal.initialize(
dependencies:[{
src: 'node_modules/reveal.js-menu/menu.js'
}]
)
刷新页面后，在幻灯片的左下角会显示一个菜单按钮。单击菜单按钮会在幻灯片的左边显示导航菜单。如果想让菜单显示在右边，可以进行设置。
Reveal.initialize(
menu: {
// 指定菜单显示在左边还是右边，使用 left 或者 right
side: 'right'
}
)
导航菜单会自动提取幻灯片的标题，如果没有标题，则默认显示页数，也可以使用幻灯片内容的开头作为标题，需要进行设置。也可以不显示没有标题的幻灯片。更多配置请参考https://github.com/denehyg/reveal.js-menu
// 如果幻灯片没有匹配标题，是否尝试使用文本内容开头作为标题
useTextContentForMissingTitles: true,
// 没有标题的幻灯片
hideMissTitles: false,
b. 工具栏插件
reveal.js-toolbar是一个工具栏插件，可以通过工具栏快速使用reveal.js的功能，如全屏、概览、暂停、演讲者注释等，其安装命令如下。
npm install --save reveal.js-toolbar
- 依赖中添加
Reveal.initialize(
......
toolbar: {
postion: 'bottom',
fullscreen: true,
overview: true,
pause: true,
notes: true,
help: true
},
dependencies:[{
src: 'node_modules/reveal.js-menu/menu.js'
}]
)
5.4 本章小结
本章主要介绍了如何使用reveal.js来写幻灯片，相信你已经为它强大的功能感到震撼。reveal.js基本上满足了我们写幻灯片的所有常用需求，而且更美观、简洁和高效。学会使用reveal.js，希望你能更喜欢写幻灯片，也希望你能更好地进行分享。
