HTML5幻灯片库reveal.js使用总结

reveal.js是一个用于实现幻灯片效果的库。

团队内部分享之前都是八仙过海各显神通,某日峰哥给发的reveal.js链接,让吾研究研究,以备以后技术分享使用!
github地址:reveal.js
页面编辑功能: slide
本文原创地址:https://segmentfault.com/a/1190000004055732

reveal.js

支持标签来区分每一页幻灯片
可以使用markdown来写内容
支持pdf的导出
支持演说注释
提供JavaScript API来控制页面
提供了多个默认主题和切换方式

幻灯片实现步骤

1.从reveal.js上下载压缩包,并解压
2.进入reveal.js文件夹,直接修改index.html文件就可以
3.编辑后好,打开页面就可以看到PPT的内容。 按下S键,会打开时间,下一张PPT,Notes等信息的页面,方便演示PPT

幻灯片内容实现方法

可以这样理解:横向的幻灯片代表一章,纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的,而纵向的幻灯片是上下切换的

1
2
3
4
5
6
7
8
9
10
一个section是一页幻灯片。当section包含在section中时,是一个纵向的幻灯片
<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不仅支持html表示来实现内容, 还可以通过markdown来实现内容。使用markdown实现内容时,需要对section标示添加data-markdown属性,然后将markdown内容写到一个text/template脚本中

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>

背景色,fragment功能的实现,可以通过注释来实现

1
2
3
4
5
6
7
<section data-markdown>
<script type="text/template">
<!-- .slide: data-background="#ff0000" -->
- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
</script>
</section>

外置md文件

reveal.js可以引用一个外置的markdown文件来解析

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文件中可以连续包含多个章内容。可以在section中通过属性data-separator, data-separator-vertical来划分章节

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section data-separator="---" data-separator-vertical="--" >
<script type="text/template">
# 主题1
- 主题1-内容1
- 主题1-内容2
--
## 主题1-内容1
内容1-细节1
--
## 主题1-内容2
内容1-细节2
---
# 主题2
</script>
</section>

注释

对section添加 data-separator-notes=”^Note:”属性,就可以指定Note:后面的内容为当前幻灯片的注释

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.

reveal.js来实现幻灯片,可以只关注内容,忽略各种切换效果,关键是外部md文档导入,非常快!

文章目录
  1. 1.
  2. 2.
    1. 2.1. reveal.js
    2. 2.2. 幻灯片实现步骤
    3. 2.3. 幻灯片内容实现方法
    4. 2.4. markdown实现
      1. 2.4.1. 外置md文件
      2. 2.4.2. 分页实现
      3. 2.4.3. 注释
  3. 3.
|