第五章 轻快、省力地写幻灯片——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打开。
从这段代码可以看出，在HTML中，幻灯片标记的层次结构是.reveal >.slides > section。关于section，我们可以理解为分页标签，每一张幻灯片都是使用
4. 创建我们的第一个幻灯片
复制index.html并重命名为first.html，使用VS Code打开，修改核心代码。
保存后双击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文件中编写幻灯片。
各部分的用途：
- 在中设置幻灯片的主题。
- 在
中编写幻灯片的内容。 - 在Reveal.initialize({});中添加reveal.js的依赖和配置。
2. 演示幻灯片
简单的幻灯片可以通过使用鼠标双击HTML文件在浏览器中打开进行演示。但如果涉及演讲者备注或引用外部的Markdown文件，则需要使用Web服务器运行。本地运行命令为npm start，如果想要部署到服务器上则需要使用Nginx。
3. 幻灯片的类型
reveal.js中的幻灯片分为两种类型：水平幻灯片和垂直幻灯片。顾名思义，水平幻灯片是左右翻页的幻灯片，垂直幻灯片则是上下翻页的幻灯片；垂直幻灯片通常嵌套在水平幻灯片中使用。
- 示例代码
4. 使用Markdown编写幻灯片
reveal.js使用Markdown编写幻灯片有两种方式。
- 在HTML文件中直接使用Markdown编写。
- 在HTML文件中引用外部的Markdown文件。
如果在HTML文件中直接使用Markdown编写，则需要给
如果在HTML文件中引用外部的Markdown文件，则需要指定分页的匹配规则。
5.添加reveal.js的依赖和配置
在Reveal.initialize({});中进行对reveal.js的配置，如开启历史记录、显示页面、设置全局转场效果等。
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＞中添加幻灯片的内容
注意代码的层级结构，使用
小提示： 为了让大家更容易理解后面的内容，在这里先明确几个HTML中的概念。
- 元素：元素指的是从开始标签到结束标签中间的所有代码。
- 标签：标签是由<>包裹的关键词，通常是成对出现的，如
和 。 - 属性：标签中的属性提供了HTML元素的更多信息，通常在元素的开始标签中以键/值对的形式出现，如＜section data-state=＂customevent＂＞
- 为幻灯片写个封面（Markdown版）
注意： 使用Markdown时需要在
小提示：
- 本示例只演示了一到四级标题，因为四、五、六级标题区别不大，这里就不演示五、六级标题了。
- 由于Markdown不支持小号字体的标记，因此小号字体（更小的文本）使用标签来实现。
- 我们经常会在Markdown中使用HTML标签以实现更丰富的显示效果，如改变字体颜色、设置图片显示大小和位置等。
2. 引用
行内引用和区块引用的示例代码：
由于Markdown不支持行内引用标记，因此行内引用使用标签实现。
3. 表格
4. 列表
注意： 由于reveal.js中的Markdown不支持任务列表，因此任务列表需要使用HTML来实现，在本例中设置了复选框的大小。
5. 代码
插入代码的示例：
请注意，插入的代码中如果有特殊符号 < 和 >，需要使用<和>来代替，否则它们会被浏览器误认为标签。
6. 文本格式
7. Emoji
在reveal.js中无法直接使用Emoji，如果想使用，则需要在head中引用一个CSS文件。
Emoji的选择很简单，打开https://afeld.github.io/emoji-css/，复制所中意的图片的代码，然后粘贴一下就可以了.
8. 图片
在Markdown中，没有设置图片大小的标记，如果想设置图片的大小，需要使用HTML标签来实现。
9.视频和音频
插入视频和音频的示例代码：
插入视频通过
5.3.4 幻灯片的嵌套、链接和注释
1. 幻灯片嵌套
reveal.js中的幻灯片有水平幻灯片和垂直幻灯片两种，垂直幻灯片通常嵌套在水平幻灯片中使用。幻灯片最外层是水平幻灯片，使用
如果你开启了页码显示功能，幻灯片的右下角会显示页码，假如当前水平幻灯片是第5页，那垂直幻灯片就会显示5.1、5.2、5.3。
如果你开启了历史记录功能，那么浏览器地址窗口也会这样显示。
2. 链接幻灯片
当进行幻灯片演示时，如果想要回到之前讲过的某一页或提前查看后面的某一页，就需要用到幻灯片链接功能了。
本质上，使用reveal.js编写的幻灯片就是一个网页，因此想要在幻灯片之间跳转，只需要添加链接就可以了。
如果想打开一个新页面，而不是直接跳转：
另打开一个页面，再跳转到第三页
3.演讲者注释
在演讲者注释界面上，可以查看当前幻灯片的注释，也可以预览下一页幻灯片的内容。由于演讲者注释是嵌到幻灯片里面的，因此要在对应的幻灯片页面里编写注释内容。
如果使用Markdown编写，则注释内容默认以 Note+: 开头
5.3.5 幻灯片显示
1. 背景
幻灯片可以使用不同的颜色作为背景，也可以使用图片或视频作为背景。
a. 背景颜色
请注意，在插入的代码中如果有特殊符号 < 和 >，则需要使用<和>代替，否则它们会被浏览器误认为是标签而导致渲染错误。
b. 图片背景
将图片设置为幻灯片背景，需要在
在默认情况下，图片会被拉伸填满整个页面，这有可能会导致图片失真，为了避免这种情况，可以使用 data-background-size 属性设置图片的大小，也可以使用data-background-repeat=＂repeat＂平铺图片。
也可以使用GIF动态图作为幻灯片的背景。
c. 视频背景
将视频设置为幻灯片的背景，需要在
由于视频背景可能会导致幻灯片的内容看不清，上述示例通过
d. 网页背景
将网页设置为幻灯片的背景，需要在
由于网页位于幻灯片下的背景图层中，在默认情况下，我们无法与其交互，如果想要与网页进行交互，需要使用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中找到引用主题的样式文件可以替换主题。
默认主题是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. 分段演示
我们在演示幻灯片时，可能会想要把一页幻灯片上的内容分段显示出来。
上面的代码使用了两种方式来添加元素的属性，一种是标准方法，使用HTML标签为元素添加属性 class=＂fragment＂；另一种是专门为 Markdown 设计的通过HTML注释为元素添加属性的方法，这两种方法可以混合使用，也可以单独使用。
分段演示提供了多种动画效果。
2. 演示顺序
分段演示是可以控制显示顺序的，这需要为元素添加data-fragment-index属性。
3. 转场动画
转场动画是指切换幻灯片时的过渡效果，可以单独设置某页幻灯片的转场动画，也可以设置全局的转场动画。设置单个幻灯片的转场动画，需要给
放大
reveal.js提供的转场动画效果有如下几种：
| 转场动画可选值 | 转场效果 |
|---|---|
| convex | 凸进凸出 |
| concave | 凹进凹出 |
| zoom | 缩放 |
| slide | 移入移出 |
| fade | 淡入淡出 |
如果不想对每一页都单独设置转场动画，可以设置全局动画效果，此时，需要在Reveal.initialize({});中添加如下代码。
transition: 'convex', // 转场效果
注意： 页面设置的优先级高于全局设置，因此即使设置了全局动画效果，如果还想对某页幻灯片进行其他设置也是可以的。
4. 背景过渡动画
可以通过在
注意： 如果设置了背景过渡动画，内容的过渡就默认变成了滑入效果。
5. 自动演示
如果想让幻灯片自动演示，只需要设置自动演示的间隔时间就可以了。
Reveal.configure({
autoSlide: 5000
})
配置完成后，自动演示功能就被启用了，幻灯片的左下角将会显示一个控件，用户可以通过单击控件或按键盘上的A键来暂停或恢复自动演示。
可对单个幻灯片和片段单独设置自动演示时间：
3s之后自动播放下面的片段
8s之后自动播放下一个的片段
3s之后自动播放下一页
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文件是在
1.配置解析规则
在
- 配置说明
| 作用 | 属性 | 说明 |
|---|---|---|
| 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＂是指定幻灯片的背景颜色。
3. 配置元素属性
元素属性跟幻灯片属性一样，也是通过HTML注释来配置的。
# 第一页
通过HTML注释来配置幻灯片属性
* 我是一号
* 我是二号
* 我是三号
- 语法解释
- .element是指设置元素。
- class=＂fragment＂是指分段加载。
- data-fragment-index是指加载顺序。
- class=＂fragment highlight-red＂是指元素使用红色高亮显示。
4. 另一种分页规则
另一种比较常用的分页规则，需要在
这里定义的水平幻灯片的分页规则是：空行+-+空行，垂直幻灯片的分布规则是：空行+-空行，这种使用分隔线来分页的匹配规则看起来比只使用空行更加清晰，推荐使用。
5.3.8 高级进阶
1. 打印/导出PDF文件
1. 设置幻灯片的打印样式，在head中添加如下脚本
如果要打印/导出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，希望你能更喜欢写幻灯片，也希望你能更好地进行分享。