软硬皆施

RevealJs(slides演示工具)中文文档

发表于 | 阅读次数

reveal.js 就是在各个互联网大会或者科技发布会常用的幻灯片演示工具，也就是slides，功能强大，自适应移动端和PC端。It translated by Palmer in 2017/5/13.

image

示例： 左图为移动端，右图为PC端。完整示例：Demo 预览

官方文档中文翻译，内容做适当删减

  • 一个使用 HTML 轻松创建精美的演示文稿框架，你只要有一个支持 CSS 3D 切换的浏览器(拥抱Chrome, 拒绝IE)。点击查看 Demo
  • reveal.js 配备了广泛的功能，包括嵌套幻灯片，Markdown 内容，PDF 导出，演讲笔记和 JavaScript API。还有一个全功能的可视化编辑器和平台,可生成在线的slide地址,有免费版和收费版：slides.com。

更多功能

  • 更新日志: 获取最新版本.
  • 例子: 这里有一些基于reveal.js的演示例子,也欢迎PR,提供属于你自己的个性例子!
  • 浏览器支持: 浏览器兼容情况.
  • 插件: 扩展reveal.js功能的插件列表.

在线编辑

演示文档是使用 HTML 或者 Markdown 编写的，如果你们更喜欢图形界面的在线编辑器，点击 https://slides.com 尝试一下。

说明

结构

这里有一个简单的例子,充分展示了reveal.js的演示文档结构.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
   <head>
      <link rel="stylesheet" href="css/reveal.css">
      <link rel="stylesheet" href="css/theme/white.css">
   </head>
   <body>
      <div class="reveal">
         <div class="slides">
            <section>Slide 1</section>
            <section>Slide 2</section>
         </div>
      </div>
      <script src="js/reveal.js"></script>
      <script>
         Reveal.initialize();
      </script>
   </body>
</html>

演示文档的标签结构需要 .reveal > .slides > section 包含，一个 section 表示一个 slide 而且可以无限重复。如果你在一个 section 标签里包含了多个 section，那么这几个 section 就会垂直分布（意思就是你需要上下切换 slide），第一个垂直的 slide 位于其它 slide 的顶部，同时也是包含在水平 slide 序列中。举个例子:

1
2
3
4
5
6
7
8
9
<div class="reveal">
   <div class="slides">
      <section>Single Horizontal Slide</section>
      <section>
         <section>Vertical Slide 1</section>
         <section>Vertical Slide 2</section>
      </section>
   </div>
</div>

_Markdown

reveal.js 支持 Markdown 来实现内容。使用 Markdown 实现内容时，需要在 section 标签中添加 data-markdown 属性，然后将 Markdown 内容写到一个 text/template 脚本中，如下例。

这是基于 Paul Irish 为了支持 GitHub Flavored Markdown 而修改的 data-markdown，所以对缩进和换行符都是敏感的，应该避免tabs和空格混用，也要注意换行的使用。 

1
2
3
4
5
6
7
<section data-markdown>
   <script type="text/template">
      ## Page title

      A paragraph with some text and a [link](http://hakim.se).
   </script>
</section>

外部 Markdown 文件

可以把 Markdown 内容写在外部文件里，在 reveal.js 运行时进行加载。 引用外部文件时可设置的参数：

  • data-separator 定义划分横向幻灯片的规则（默认值为 ^\r?\n---\r?\n$)
  • data-separator-vertical 定义划分纵向幻灯片的规则（默认禁用）
  • data-separator-notes 定义当前幻灯片的演讲备注 (默认值为 note:)
  • data-charset 定义外部文件加载时使用的字符集

如果要在本地使用该特性，演示文稿需要运行在本地服务器上

1
2
3
4
5
6
<section data-markdown="example.md"  
         data-separator="^\n\n\n"  
         data-separator-vertical="^\n\n"  
         data-separator-notes="^Note:"  
         data-charset="iso-8859-15">
</section>

元素属性

在 Markdown 内容中，可以通过 html 注释来添加元素属性，如分段：

1
2
3
4
5
6
<section data-markdown>
   <script type="text/template">
      - 列表项 1 <!-- .element: class="fragment" data-fragment-index="2" -->
      - 列表项 2 <!-- .element: class="fragment" data-fragment-index="1" -->
   </script>
</section>

幻灯片属性

html 注释也可以用来添加幻灯片 <section> 元素的属性。

1
2
3
4
5
6
<section data-markdown>
   <script type="text/template">
   <!-- .slide: data-background="#ff0000" -->
      Markdown 内容
   </script>
</section>

配置 marked

reveal.js 使用 marked 来解析 Markdown，可在设置reveal 配置 时传入 marked 的配置：

1
2
3
4
5
6
7
Reveal.initialize({
   // 传入 marked 的配置
   // 参考 https://github.com/chjj/marked#options-1
   markdown: {
      smartypants: true
   }
});

配置

需在页面底部初始化 reveal，所有配置项均为可选，默认值如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
Reveal.initialize({

    // 在右下角显示控制面板
    controls: true,

    // 显示演示进度条
    progress: true,

    // 显示幻灯片页码
    // 可使用代码 slideNumber: 'c/t'，表示 '当前页/总页数'
    slideNumber: false,

    // 幻灯片切换时写入浏览器历史记录
    history: false,

    // 启用键盘快捷键
    keyboard: true,

    // 启用幻灯片概览
    overview: true,

    // 幻灯片垂直居中
    center: true,

    // 在触屏设备上启用触摸滑动切换
    touch: true,

    // 循环演示
    loop: false,

    // 演示方向为右往左，即向左切换为下一张，向右切换为上一张
    rtl: false,

    // 打乱幻灯片顺序
    shuffle: false,

    // 启用幻灯片分段
    fragments: true,

    // 演示文稿是否运行于嵌入模式（如只占页面的一部分）
    // 译者注：与触屏相关
    // false：所有在演示文稿上触发的 "touchmove" 的默认行为都会被阻止
    // true：只有在 "touchmove" 触发了演示文稿事件时才会阻止默认行为
    embedded: false,

    // 是否在按下 ? 键时显示快捷键帮助面板
    help: true,

    // 演讲备注是否对所有人可见
    showNotes: false,

    // 两个幻灯片之间自动播放的时间间隔（毫秒），当设置为 0 时，则禁止自动播放。
    // 该值可以被幻灯片上的 `data-autoslide` 属性覆盖
    autoSlide: 0,

    // 允许停止自动播放
    // 在手动切换分段或幻灯片后暂停自动播放
    // 按 a 键暂停或恢复自动播放
    autoSlideStoppable: true,

    // 使用该函数执行自动播放操作
    autoSlideMethod: Reveal.navigateNext,

    // 启用鼠标滚轮切换幻灯片，作用与 SPACE 相同
    mouseWheel: false,

    // 在移动设备上隐藏地址栏
    hideAddressBar: true,

    // 在 iframe 预览弹框中打开链接
    previewLinks: false,

    // 切换过渡效果
    // none-无/fade-渐变/slide-飞入/convex-凸面/concave-凹面/zoom-缩放
    transition: 'slide', // none/fade/slide/convex/concave/zoom

    // 切换过渡速度
    // default-中速/fast-快速/slow-慢速
    transitionSpeed: 'default', // default/fast/slow

    // 背景切换过渡效果
    backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

    // 预加载幻灯片数
    viewDistance: 3,

    // 视差背景图
    parallaxBackgroundImage: '', // 示例："'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

    // 视察背景图尺寸
    parallaxBackgroundSize: '', // CSS 写法，示例："2100px 900px"（目前只支持像素值，不支持 % 和 auto）

    // 相邻两张幻灯片间，视差背景移动的像素值
    // - 如果不设置则自动计算
    // - 当设置为 0 时，则禁止视差动画
    parallaxBackgroundHorizontal: null,
    parallaxBackgroundVertical: null

});

在执行初始化后，可通过 configure 方法来更新配置：

1
2
3
4
5
// 关闭自动播放
Reveal.configure({ autoSlide: 0 });

// 开启自动播放（时间间隔为 5 秒）
Reveal.configure({ autoSlide: 5000 });

演示文稿尺寸

演示文稿有一个标准尺寸，框架会在其基础上自动缩放以适应各种分辨率。

尺寸相关的配置项及其默认值如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Reveal.initialize({

  ...

  // 演示文稿缩放时，会保持标准尺寸的宽高比。
  // 可使用百分比，如：'200%'
  width: 960,
  height: 700,

  // 内容外边距
  margin: 0.1,

  // 内容缩放比例的最小值/最大值
  minScale: 0.2,
  maxScale: 1.5

});

如果想要使用自定义的缩放方式（如使用媒体查询），可通过下面的设置来禁用自动缩放：

1
2
3
4
5
6
7
8
9
10
Reveal.initialize({

  ...

  width: "100%",
  height: "100%",
  margin: 0,
  minScale: 1,
  maxScale: 1
});

依赖

Reveal.js 的部分功能需要引入自带的第三方库，可在初始化时传入依赖项，运行时会自动加载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Reveal.initialize({
  dependencies: [
    // classList 跨浏览器支持 - https://github.com/eligrey/classList.js/
    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

    // 解析 <section> 元素里的 Markdown 内容
    { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
    { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

    // <code> 元素语法高亮
    { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

    // Alt+click 缩放点击元素
    { src: 'plugin/zoom-js/zoom.js', async: true },

    // 演讲备注
    { src: 'plugin/notes/notes.js', async: true },

    // 数学公式
    { src: 'plugin/math/math.js', async: true }
  ]
});

自定义库也可以使用该方式加载。
依赖项属性：

  • src: 脚本路径
  • async: [可选] 异步，是否允许 reveal.js 执行后再加载脚本，默认值为 false
  • callback: [可选] 回调函数，脚本加载完成后执行
  • condition: [可选] 条件函数，返回 true 时才会加载脚本

要使用该方式来加载依赖项，需在引入 reveal.js 之前引入 head.js (提供加载脚本功能的库)。

Ready事件

reveal.js 在所有非异步依赖加载完成，准备播放时，会广播 ‘ready’ 事件。
可调用 Reveal.isReady() 函数来检查 reveal.js 是否已准备完成。

1
2
3
Reveal.addEventListener( 'ready', function( event ) {
  // event.currentSlide, event.indexh, event.indexv
} );

reveal.js 准备完成时会给 .reveal 元素增加 .ready 类，也可以此来判断是否已准备完成。

自动播放

演示文稿可以设置为自动播放，只需告诉框架自动切换的时间间隔（毫秒）：

1
2
3
4
// 每 5 秒自动切换下一张幻灯片
Reveal.configure({
  autoSlide: 5000
});

在手动切换分段或幻灯片后会暂停自动播放，也可以按 a 键来暂停或恢复自动播放。
设置

false``` 后，用户操作则不会打断自动播放。
1
2
3
4
5
6
7
8
9

也可以通过 ```data-autoslide``` 属性来给个别幻灯片或分段重新设置时间间隔:

```html
<section data-autoslide="2000">
  <p class="fragment"> 2 秒后第一个分段会自动显示 </p>
  <p class="fragment" data-autoslide="10000"> 10 秒后下一个分段会自动显示 </p>
  <p class="fragment"> 2 秒后会自动切换到下一张幻灯片 </p>
</section>

通过设置

指定自动播放的方式，如设置为 ```Reveal.navigateRight```，则自动播放时纵向幻灯片只会播放主幻灯片，其它纵向幻灯片会被忽略。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

自动播放被暂停和恢复时，会广播 ```autoslidepaused``` 和 ```autoslideresumed``` 事件。

## 自定义快捷键

如果不喜欢默认的快捷键，可通过 ```keyboard``` 配置项来自定义：

```javascript
Reveal.configure({
  keyboard: {
    13: 'next', // 按 ENTER 键切换到下一个分段或幻灯片
    27: function() {}, // 按 ESC 键时触发自定义行为
    32: null // 按 SPACE 时不做任何处理（可用于禁用 reveal.js 的默认快捷键）
  }
});

触屏操作

在触屏设备上可以通过滑动来操作幻灯片，水平滑动切换横向幻灯片，垂直滑动切换纵向幻灯片。
设置

false`` 可禁用触屏操作。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如果幻灯片内容本身带有滑动操作（比如滚动内容），需要给元素添加 `data-prevent-swipe` 属性来阻止默认的滑动行为。


## 延迟加载

当演示文稿中带有大量的多媒体或 iframe 内容时，延迟加载就显得尤为重要，即只提前加载当前幻灯片最近的几张幻灯片中的内容。
预加载的幻灯片数量由 `viewDistance` 配置项决定。

延迟加载支持 image、video、audio 和 iframe 元素，只需把 "src" 属性改为 "data-src" 即可。
幻灯片中延迟加载的 iframe，会在切换到其它幻灯片时自动卸载。

```html
<section>
  <img data-src="图片.png">
  <iframe data-src="http://hakim.se"></iframe>
  <video>
    <source data-src="视频.webm" type="video/webm" />
    <source data-src="视频.mp4" type="video/mp4" />
  </video>
</section>

API中文

Reveal 对象提供了一套控制演示进度和管理演示状态的 JavaScript API：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 演示进度控制
Reveal.slide( indexh, indexv, indexf );
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();
Reveal.prevFragment();
Reveal.nextFragment();

// 打乱幻灯片顺序
Reveal.shuffle();

// 显示快捷键帮助面板
Reveal.showHelp();

// 管理演示文稿状态，传入 true/false 对应 on/off 状态
Reveal.toggleOverview();
Reveal.togglePause();
Reveal.toggleAutoSlide();

// 改变配置项设置
Reveal.configure({ controls: true });

// 获取当前的配置项设置
Reveal.getConfig();

// 获取当前演示文稿的缩放比例
Reveal.getScale();

// 获取上一个/当前幻灯片节点
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();

// 获取当前演示状态
// h-横向幻灯片索引，v-纵向幻灯片索引，f-分段索引
Reveal.getIndices(); // { h: 0, v: 0, f: 0 }
// 获取当前演示进度
Reveal.getProgress(); // 0-1
// 获取幻灯片总数（包括横向幻灯片和纵向幻灯片）
Reveal.getTotalSlides();

// 获取当前幻灯片的演讲备注
Reveal.getSlideNotes();

// 状态检查
Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isOverview();
Reveal.isPaused();
Reveal.isAutoSliding();

幻灯片切换事件

幻灯片切换时会广播 ‘slidechanged’ 事件。event 对象保存了当前幻灯片的横向索引和纵向索引、上一张幻灯片和当前幻灯片的节点引用。

部分第三方库，如 MathJax（见 #226），会受到幻灯片变形和显示状态的影响，此时可以尝试在该事件的回调函数中重新计算和渲染来进行修复。

1
2
3
Reveal.addEventListener( 'slidechanged', function( event ) {
  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );

演示状态

getState 方法可以获取演示文稿的当前状态，使用这个快照，可以非常方便地返回到记录的演示进度。

1
2
3
4
5
6
7
8
9
10
11
// 切换到幻灯片 1
Reveal.slide( 1 );

// 获取当前状态
var state = Reveal.getState();

// 切换到幻灯片 3
Reveal.slide( 3 );

// 切回幻灯片 1
Reveal.setState( state );

幻灯片状态

如果给幻灯片 <section> 设置了 data-state="somestate" 属性，则当播放到该幻灯片时，”somestate” 将会出现在文档元素 <html> 的类里，可以很方便地给各个幻灯片设置不同的页面样式。

此外，还可以在 JavaScript 中侦听这个状态：

1
2
3
Reveal.addEventListener( 'somestate', function() {
  // TODO: somestate 出现了，做些啥吧
}, false );

幻灯片背景

元素的 ```data-background``` 属性可以设置一个覆盖整个幻灯片的背景。
1
2
3
4
5
6
7
8
支持 4 种类型的背景：颜色，图像，视频和 iframe。

#### 颜色背景
支持所有 CSS 颜色格式，如 rgba() 或 hsl()。
```html
<section data-background-color="#ff0000">
  <h2> 颜色背景 </h2>
</section>

图像背景

背景图像默认会自动调整大小以覆盖整个幻灯片，可设置的选项：

属性 默认值 说明
data-background-image 图片 URL（GIF 动图会在幻灯片显示时重新播放）
data-background-size cover 见 MDN background-size
data-background-position center 见 MDN background-position
data-background-repeat no-repeat 见 MDN background-repeat 
1
2
3
4
5
6
<section data-background-image="http://example.com/image.png">
  <h2> 图像背景 </h2>
</section>
<section data-background-image="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
  <h2> 背景图像尺寸为 100 像素，且平铺模式为重复 </h2>
</section>

视频背景

在幻灯片后面自动播放一个撑满页面的视频。

属性 默认值 说明
data-background-video 单个视频地址，或由半角逗号 ‘,’ 分隔的视频地址列表。
data-background-video-loop false 是否循环播放
data-background-video-muted false 是否静音 
1
2
3
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
  <h2> 视频背景 </h2>
</section>

Iframe 背景

嵌入一个网页作为背景，该网页位于幻灯片后面的背景层，无法进行交互。

1
2
3
<section data-background-iframe="https://slides.com">
  <h2> Iframe </h2>
</section>

背景切换过渡效果

背景切换的默认过渡效果为 fade（渐变），可在初始化

时传入 ```backgroundTransition``` 配置项来修改，也可给 `
` 添加 ```data-background-transition``` 属性来给个别幻灯片单独设置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#### 视差背景

要使用视差滚动背景，需要在初始化 reveal.js 时设置下面的前两个配置项（后两个为可选项）。

```javascript
Reveal.initialize({

    // 视差背景图
    parallaxBackgroundImage: '', // 示例："'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

    // 视察背景图尺寸
    parallaxBackgroundSize: '', // CSS 写法，示例："2100px 900px"（目前只支持像素值，不支持 % 和 auto）

    // 相邻两张幻灯片间，视差背景移动的像素值
    // - 如果不设置则自动计算
    // - 当设置为 0 时，则禁止视差动画
    parallaxBackgroundHorizontal: 200,
    parallaxBackgroundVertical: 50

});

视差背景图尺寸必须大于幻灯片尺寸，否则切换幻灯片时无法滚动。查看示例

切换过渡效果

幻灯片的切换过渡效果，默认使用配置项

设置的值，可通过 ```data-transition``` 属性来给个别幻灯片单独指定过渡效果：
1
2
3
4
5
6
7
8
9

```html
<section data-transition="zoom">
  <h2> 该幻灯片不使用全局的切换过渡效果，而是单独指定的缩放！ </h2>
</section>

<section data-transition-speed="fast">
  <h2> 可供选择的切换过渡速度有：default-中速、fast-快速、slow-慢速！ </h2>
</section>

甚至可以给同一张幻灯片指定不同的切入和切出过渡效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section data-transition="slide">
    没时间解释了快上车……
</section>
<section data-transition="slide">
    继续前进……
</section>
<section data-transition="slide-in fade-out">
    到站停车。
</section>
<section data-transition="fade-in slide-out">
    （乘客上车和下车）
</section>
<section data-transition="slide">
    重新上路。
</section>

内部跳转

幻灯片间的跳转十分简单，下面第一个例子指定的是目标幻灯片的索引，第二个例子指定的是目标幻灯片的 ID 属性（

id
1
2
3
4

```html
<a href="#/2/1"> 跳转到第 3 个横向幻灯片的第 2 个纵向幻灯片 </a>
<a href="#/some-slide"> 跳转到 ID 为 some-slide 的幻灯片 </a>

也可以给元素添加下面这些类，来指定一个相对地址，类似于 reveal.js 的控制面板。
如果指定的是一个有效的跳转地址，元素会自动附加

类。
1
2
3
4
5
6
7
8

```html
<a href="#" class="navigate-left">
<a href="#" class="navigate-right">
<a href="#" class="navigate-up">
<a href="#" class="navigate-down">
<a href="#" class="navigate-prev"> <!-- 上一张纵向幻灯片或横向幻灯片 -->
<a href="#" class="navigate-next"> <!-- 下一张纵向幻灯片或横向幻灯片 -->

片段

分段可用于强调幻灯片中的个别元素。演示文稿向前播放时，所有带有

类的元素，会在切换下个幻灯片之前逐个触发。[查看示例](http://lab.hakim.se/reveal-js/#/fragments)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

分段默认是初始隐藏，播放时渐显出现，可通过给分段追加类来修改这个效果：

```html
<section>
  <p class="fragment grow"> 放大：初始可见，播放时放大 </p>
  <p class="fragment shrink"> 缩小：初始可见，播放时缩小 </p>
  <p class="fragment fade-out"> 渐隐消失：初始可见，播放时渐隐消失 </p>
  <p class="fragment fade-up"> 渐显上升：初始隐藏，播放时渐显上升出现（down、left、right 类似） </p>
  <p class="fragment current-visible"> 显示一次：初始隐藏，播放时出现，继续播放则消失 </p>
  <p class="fragment highlight-current-blue"> 高亮蓝一次：初始可见，播放时变蓝，继续播放则恢复颜色 </p>
  <p class="fragment highlight-red"> 高亮红：初始可见，播放时变红 </p>
  <p class="fragment highlight-green"> 高亮绿：初始可见，播放时变绿 </p>
  <p class="fragment highlight-blue"> 高亮蓝：初始可见，播放时变蓝 </p>
</section>

嵌套分段会对包裹的内容逐个触发，在下面的例子中，播放时文本会先渐显出现，继续播放则文本渐隐消失。

1
2
3
4
5
<section>
  <span class="fragment fade-in">
    <span class="fragment fade-out"> 我将渐显出现，然后渐隐消失 </span>
  </span>
</section>

分段的播放顺序，可以通过

属性来控制。
1
2
3
4
5
6
7

```html
<section>
  <p class="fragment" data-fragment-index="3"> 最后播放 </p>
  <p class="fragment" data-fragment-index="1"> 最先播放 </p>
  <p class="fragment" data-fragment-index="2"> 第二个播放 </p>
</section>

片段事件

任意分段在出现和隐藏时，reveal.js 都会广播事件。

部分第三方库，如 MathJax（见 #505），会受到初始隐藏的分段元素的影响，此时可以尝试在这些事件的回调函数中重新计算和渲染来进行修复。

1
2
3
4
5
6
Reveal.addEventListener( 'fragmentshown', function( event ) {
  // event.fragment = 分段元素节点
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
  // event.fragment = 分段元素节点
} );

代码语法高亮

Reveal 自带代码语法高亮插件 highlight.js（需引入该依赖项）。
在下面的例子中， clojure 代码会自动语法高亮，指定 data-trim 属性可以自动删除多余空格。
HTML 默认会自动转义，要避免转义（如例子中的 <mark> 标签要显示出来），可以给 <code> 元素追加 data-noescape 属性。

1
2
3
4
5
6
7
8
9
<section>
  <pre><code data-trim data-noescape>
(def lazy-fib
  (concat
   [0 1]
   <mark>((fn rfib [a b]</mark>
        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
  </code></pre>
</section>

幻灯片页码

如果想显示幻灯片页码，可以设置

配置项。
1
2
3
4
5
6
7
8
9
10
11

```javascript
// 使用默认格式显示幻灯片页码
Reveal.configure({ slideNumber: true });

// 可供选择的幻灯片页码格式：
//  "h.v":  当前横向幻灯片页码 . 当前纵向幻灯片页码 (默认)
//  "h/v":  当前横向幻灯片页码 / 当前纵向幻灯片页码
//    "c":  当前幻灯片页码（包括横向幻灯片和纵向幻灯片）
//  "c/t":  当前幻灯片页码 / 幻灯片总数
Reveal.configure({ slideNumber: 'c/t' });

概览模式

按 “Esc” 或 “o” 键可以打开或关闭概览模式。在概览模式中，你仍然可以在幻灯片间切换，就好像位于演示文稿的上空，操作平铺开来的幻灯片。
与概览模式相关的 API：

1
2
3
4
5
Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );

// 通过代码打开或关闭概览模式
Reveal.toggleOverview();

全屏模式

按 »F« 键可以让演示文稿进入全屏模式，按 »ESC« 键退出全屏模式。

嵌入媒体

嵌入的 HTML5 <video>/<audio> 和 YouTube iframe，会在幻灯片切出时自动暂停播放，通过给元素添加 data-ignore 属性可以禁止该行为。

给媒体元素添加 data-autoplay 属性，则在幻灯片显示时媒体将自动播放：

1
<video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

此外，框架会自动发送两条消息（见 发送消息）给所有的 iframe。包含 iframe 的幻灯片，显示时会给其内部所有的 iframe 发送

```slide:stop``` 消息。
1
2
3
4
5
6
7
8
9
10
11


### 拉伸元素

有时我们希望元素（如图像或者视频）可以自动拉伸，尽可能多的占用幻灯片的空间，这时可以给元素添加 ```.stretch``` 类：

```html
<section>
  <h2> 这个视频将占用幻灯片的所有剩余空间 </h2>
    <video class="stretch" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</section>

限制：

  • 只能用于幻灯片的直接子元素
  • 每个幻灯片最多只能设置 1 个子元素

通信 API

框架自带一个发送消息 API 

1
2
3
4
下面的例子展示了如何让指定窗口中的 reveal.js 实例切换到幻灯片 2：

```javascript
<window>.postMessage( JSON.stringify({ method: 'slide', args: [ 2 ] }), '*' );

译者注
示例可参考 icewind1991 的 plugin/postmessage。
reveal.js 已自带该特性，无需额外引入 postmessage.js 插件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
    <body>
        <iframe id="reveal" src="../../index.html" style="border: 0;" width="500" height="500"></iframe>
        <div>
            <input id="back" type="button" value="后退"/>
            <input id="ahead" type="button" value="前进"/>
            <input id="slideto" type="button" value="切换到 2-2"/>
        </div>
        <script>
            (function (){
                var back = document.getElementById( 'back' ),
                    ahead = document.getElementById( 'ahead' ),
                    slideto = document.getElementById( 'slideto' ),
                    reveal =  window.frames[0];
                back.addEventListener( 'click', function () {
                    reveal.postMessage( JSON.stringify({method: 'prev', args: []}), '*' );
                }, false );
                ahead.addEventListener( 'click', function (){
                    reveal.postMessage( JSON.stringify({method: 'next', args: []}), '*' );
                }, false );
                slideto.addEventListener( 'click', function (){
                    reveal.postMessage( JSON.stringify({method: 'slide', args: [2,2]}), '*' );
                }, false );
            }());
        </script>
    </body>
</html>

reveal.js 在 iframe 中运行时，可选择是否将其所有事件冒泡给父窗口。冒泡的事件对象为一个 JSON 字符串，保存了 3 个字段：namespace-命名空间、eventName-事件名、state-状态。
下面的例子展示了父窗口如何向 reveal 订阅事件：

1
2
3
4
5
6
window.addEventListener( 'message', function( event ) {
  var data = JSON.parse( event.data );
  if( data.namespace === 'reveal' && data.eventName ==='slidechanged' ) {
    // 幻灯片切换，可访问 data.state 来查看幻灯片页码
  }
} );

跨窗口消息传递可通过配置项来打开或关闭。

1
2
3
4
5
6
7
8
9
Reveal.initialize({
  ...,

    // 暴露 postMessage API
  postMessage: true,

    // 将演示文稿的所有事件冒泡给父窗口
  postMessageEvents: false
});

导出 PDF

演示文稿可以通过一个特殊的打印样式来导出 PDF。该特性需要使用 Google Chrome 或 Chromium、且运行于 web 服务器上时，可以导出为 PDF。
这是一个演示文稿导出 PDF 并上传到 SlideShare 的例子：http://www.slideshare.net/hakimel/revealjs-300。

页面尺寸

导出的 PDF 尺寸由 演示文稿尺寸 决定，如果幻灯片太高无法一页展示完，则会切分为多页，可通过 pdfMaxPagesPerSlide 配置项设置每张幻灯片最多可被切分为几数，如 Reveal.configure({ pdfMaxPagesPerSlide: 1 }) 可确保幻灯片不会被切分。

打印样式

想要启用演示文稿的打印功能，需要加载一个用于打印的特殊样式 /css/print/pdf.css，默认的 index.html 文件已包含该逻辑，只要演示文稿的链接中带有 print-pdf 参数，就会自动加载。如果使用的是其它的 HTML 模板，可以在 HEAD 中插入以下代码：

1
2
3
4
5
6
7
<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>

步骤

  1. 给演示文稿的 URL 加上 print-pdf 参数，如：http://localhost:8000/?print-pdf#/ ，可以尝试这个例子 lab.hakim.se/reveal-js?print-pdf。
  2. 打开浏览器的打印面板 (CTRL/CMD+P)。
  3. Destination（目标打印机） 修改为 Save as PDF（另存为 PDF）。
  4. Layout（布局） 修改为 Landscape（横向）。
  5. Margins（边距） 修改为 None（无）。
  6. 启用选项 Background graphics（背景图形）。
  7. 点击 Save（保存）

谷歌浏览器打印设置

也可使用 decktape（一个将 HTML5 演示文稿导出为高质量 PDF 的框架）项目代替。

主题

框架带有几个不同的主题：

  • black：黑色背景，白色文本，蓝色链接（默认主题）
  • white：白色背景，黑色文本，蓝色链接
  • league：灰色背景，白色文本，蓝色链接（reveal.js 3.0.0 之前版本的默认主题）
  • beige：米黄色背景，暗色（#333）文本，棕色链接
  • sky：蓝色背景，暗色文本，蓝色链接
  • night：黑色背景，亮色（#eee）文本，橙色链接
  • serif：咖啡色背景，灰色文本，褐色链接
  • simple：白色背景，黑色文本，蓝色链接
  • solarized：奶油色背景，深绿色文本，蓝色链接

每个主题都是一个单独的样式文件，修改主题只需把 index.html 的主题样式中的 black 替换为想要的主题名即可：

1
<link rel="stylesheet" href="css/theme/black.css" id="theme">

如果要增加自定义主题，请参考：/css/theme/README.md。

演讲备注

reveal.js 自带演讲备注插件，可以在一个单独的浏览器窗口中为每张幻灯片提供备注，同时预览下一张幻灯片。
按 ‘s’ 键来打开备注窗口。

演讲计时器会在备注窗口打开时启动，点击时间可以重置为 00:00:00。

给幻灯片追加一个

元素来添加备注，如果想用 Markdown 编写备注内容，可以给 aside 元素添加 ```data-markdown``` 属性。
1
2
3
4
5
6
7
8
9
10
11
12
13

也可以通过幻灯片的 `data-notes` 属性来添加简单的备注，如 `<section data-notes="一些简单的备注"></section>`。

如果是在本地打开演示文稿，想要使用演讲备注，需要 reveal.js [运行于一个本地 web 服务器](#完整安装).

```html
<section>
  <h2> 我是幻灯片 </h2>

  <aside class="notes">
        大家好，我是这张幻灯片的备注，在演示文稿上是看不到，不过可以按 's' 键打开备注窗口来找我哦，么么哒~
  </aside>
</section>

对于幻灯片引入的外部 Markdown 文件，可以在指定的分隔符后面添加备注：

1
2
3
4
5
6
7
8
9
<section data-markdown="example.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n" data-separator-notes="^Note:"></section>

# 标题
## 子标题

幻灯片内容……

Note:
只会在备注窗口显示的内容……

分享和打印演讲备注

备注只对演讲者可见，如果想让其他人也能看到，可以在初始化 reveal.js 时，把 showNotes 配置项设为 true，则备注会显示在演示文稿的底部。

如果启用了 showNotes，在 导出 PDF 时也会包含备注。
备注默认打印在一个半透明的浮窗中，覆盖于幻灯片底部，如果想在该幻灯片后面单独新建一页打印备注，可以把 showNotes 设置为 "separate-page"。

服务器端演讲备注

基于 Node.js 的演讲备注插件，让你可以在其它设备上运行你正在控制的演讲备注，就像客户端演讲备注的副本，会相互同步操作。
需要引入以下依赖项：

1
2
3
4
5
6
7
8
Reveal.initialize({
  ...

  dependencies: [
    { src: 'socket.io/socket.io.js', async: true },
    { src: 'plugin/notes-server/client.js', async: true }
  ]
});

然后：

  1. 安装 Node.js（4.0.0 或更新版本）
  2. 执行
    install```
    1
    3. 执行 ```node plugin/notes-server

多路复用

多路复用插件让你的听众可以在自己的手机、平板电脑或笔记本电脑上观看你正在控制的演示文稿，当你操作主演示文稿时，所有的客户端演示文稿将实时同步更新。查看示例：https://reveal-js-multiplex-ccjbegmaii.now.sh/。

多路复用插件需要以下 3 个部分：

  1. 可以控制的主演示文稿
  2. 同步更新的客户端演示文稿
  3. 用于广播主演示文稿事件给客户端演示文稿的 Socket.io 服务器

更多说明：

主演示文稿

存放于只有演讲者可以访问（最好）的静态文件服务器（存放在演讲者的电脑上即可，在演讲者的电脑上运行主演示文稿会更加保险，即使会场断网，也不会打断演示。）。
在主演示文稿目录中执行以下命令：

  1. install node-static```
    1
    2. ```static

如果想在主演示文稿上使用演讲备注，需要先配置演讲备注插件，然后在主演示文稿目录中执行

plugin/notes-server``` 命令。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

运行演讲备注/静态文件服务器，作为主控端连接 socket.io 服务器。

通过 ```http://localhost:1947``` 访问主演示文稿。

配置示例：
```javascript
Reveal.initialize({
  // 其它配置项……

  multiplex: {
    // 示例值，使用时请自己生成，具体参考 socket.io 说明。
    secret: '13652805320794272084', // 从 socket.io 服务器获得，允许演示文稿可以被控制
    id: '1ea875674b17ca76', // 从 socket.io 服务器获得
    url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // socket.io 服务器地址
  },

  // 依赖项
  dependencies: [
    { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
    { src: 'plugin/multiplex/master.js', async: true },

    // 演讲备注
    { src: 'plugin/notes-server/client.js', async: true }

    // 其它依赖项……
  ]
});

客户端演示文稿

存放于可以公开访问的静态文件服务器，如 GitHub Pages、Amazon S3、Dreamhost、Akamai 等。

使用下面的配置，当听众通过

访问演示文稿时，将作为被控端连接 socket.io 服务器。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

配置示例：
```javascript
Reveal.initialize({
  // 其它配置项……

  multiplex: {
    // 示例值，使用时请自己生成，具体参考 socket.io 说明。
    secret: null, // 设置为 null，演示文稿将不能被控制，而是同步 socket.io 服务器上相同 id 的主演示文稿的操作
    id: '1ea875674b17ca76', // 从 socket.io 服务器获得
    url: 'https://reveal-js-multiplex-ccjbegmaii.now.sh' // socket.io 服务器地址
  },

  // 依赖项
  dependencies: [
    { src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
    { src: 'plugin/multiplex/client.js', async: true }

    // 其它依赖项……
  ]
});

_MathJax

如果想在演示文稿中更好的显示数学公式，可以使用基于 MathJax 库封装的这个小插件。

插件默认使用 LaTeX 格式（一种基于ΤΕΧ的排版系统），可通过

配置项来修改。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

MathJax 是从远程服务器加载的，如果想离线使用，需自行下载该库，并修改 ```mathjax``` 配置项。

下面是 MathJax 的配置示例（使用默认配置时，```math``` 配置项可省略）：

```js
Reveal.initialize({
  // 其它配置项……

  math: {
    mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js',
    config: 'TeX-AMS_HTML-full'  // 参考 http://docs.mathjax.org/en/latest/config-files.html
  },

  dependencies: [
    { src: 'plugin/math/math.js', async: true }
  ]

});

如果想了解 MathJax 的 HTTPS 传输方式，或为了稳定性需要使用特定版本，请参考 MathJax 的说明文档。

工程安装

基础安装 适用于创建简单的演讲文稿，完整安装 可以使用 reveal.js 的所有特性和插件（如演讲备注）。

基础安装

reveal.js 基础功能的安装十分简单，只需下载框架包，然后直接在浏览器中打开 index.html 文件即可。

  1. 在 https://github.com/hakimel/reveal.js/releases 上下载 reveal.js 的最新版本

  2. 解压缩，然后将 index.html 里的示例内容修改为自己的内容

  3. 在浏览器中打开 index.html

完整安装

部分 reveal.js 特性（如 Markdown 和演讲备注）需要演示文稿运行于一个本地 web 服务器。
按照下面的步骤，可以创建一个完整的 reveal.js 开发和运行环境：

  1. 安装 Node.js （4.0.0 或更新版本）

  2. 克隆 reveal.js 仓库

    1
    $ git clone https://github.com/palmerye/demos-Reveal.js.git

  3. 进入 reveal.js 目录

    1
    $ cd reveal.js

  4. 安装依赖

    1
    $ npm install

  5. 启动演示文稿并监控文件变更

    1
    $ npm start

  6. 打开 http://localhost:8000 查看演示文稿

通过 npm start -- --port=8001 指令可修改端口号

目录结构

  • css/ 框架样式
  • js/ 框架 JavaScript
  • plugin/ 用于扩展 reveal.js 的组件
  • lib/ 第三方库（JavaScript、样式、字体）

许可

遵循 MIT 开源协议

Copyright (C) 2016 Hakim El Hattab, http://hakim.se

PalmerYe wechat
世界很大，圈子很小，欢迎关注，相互进步。
Fork me on GitHub