介绍

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

github地址：​​github​​

提供了页面编辑功能：​​​​

官方demo: ​​demo​​

我自己做的PPT地址：​​ppt​​（建议使用Chrome查看）

特点

​​reveal.js​​有一下几个特点：

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

安装

  2. 从reveal.js上下载压缩包，并解压
  3. 进入reveal.js文件夹，直接修改index.html文件就可以
  4. 编辑后好，用浏览器打开html页面就可以看到PPT的内容。

必需的文件只有这几个：

HTML5幻灯片库reveal.js使用_css

使用方法

整体布局

幻灯片的内容需要包含在​​<div class="reveal"> <div class="slides">​​的标签中。

一个​​section​​是一页幻灯片。当​​section​​包含在​​section​​中时，是一个纵向的幻灯片。

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



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


标题和正文

​​section​​中的内容就是幻灯片的内容，你可以使用​​h2​​标签表示​​title​​, ​​p​​表示内容。需要红色的字体可以直接设置​​style​​的​​color​​为​​red​​。

当某一页需要特殊背景色，可以使用​​data-background​​在​​section​​上设置, ​​data-background-transition​​表示背景的过渡效果。For example:



<section data-background-transition="zoom" data-background="#dddddd">


如果需要正文一段一段出现。可以使用​​fragment​​。For Example:



<p class="fragment"></p>


代码高亮

​​reveal.js​​使用​​highlight.js​​来支持代码高亮。可以直接写code标签来实现, ​​data-trim​​表示去除多余的空格，​​data-noescape​​ 来避免自动转义，For Example:



<pre><code data-trim>
  console.log('hello reveal.js!');
</code></pre>


注释

在演说时，会用到注释，对于注释，可以通过<aside class="notes">来实现。For Example:



<aside class="notes">
  这里是注释。
</aside>


在幻灯片页面，按下​​s​​键，就可以调出注释页面，注释页面包含了当前幻灯片，下一章幻灯片，注释，以及幻灯片播放时间。

使用markdown

​​reveal.js​​不仅支持html表示来实现内容， 还可以通过​​markdown​​来实现内容。使用​​markdown​​实现内容时，需要对​​section​​标示添加​​data-markdown​​属性，然后将​​markdown​​内容写到一个​​text/template​​脚本中。For Example:



<section data-markdown>
    <script type="text/template">
        ## Page title

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


背景色，​​fragment​​功能的实现，可以通过注释来实现。For Example:



<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​​文件来解析。For Example:



<section data-markdown=""  
         data-separator="^\n\n\n"  
         data-separator-vertical="^\n\n"  
         data-separator-notes="^Note:"  
         data-charset="utf-8">
</section>


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



# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.


一个​​markdown​​文件中可以连续包含多个章内容。可以在​​section​​中通过属性​​data-separator​​, ​​data-separator-vertical​​来划分章节。For Example:



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


嵌入媒体

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

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



<video data-autoplay src="http:///big_buck_bunny.mp4"></video>


图像背景

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



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


内部跳转

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



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


PDF导出

1.给演示文稿的 URL 加上 ​​print-pdf​​ 参数，如：​​http://localhost:8000/?print-pdf#/​​ 

2. 打开浏览器的打印面板 (CTRL/CMD+P)

3. Destination（目标打印机） 修改为 Save as PDF（另存为 PDF）。

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

主题

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

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

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



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


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

引入依赖

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



Reveal.initialize({
  dependencies: [
    // classList 跨浏览器支持 - https:///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 时才会加载脚本

自动播放

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



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


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

配置初始项

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



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

});


 

 

参考链接：

1. ​​PalmerBlog-RevealJs(Slide演示工具)中文文档​​

2. segmentfault-chenhao_ch-HTML5幻灯片库reveal.js使用


个性签名：时间会解决一切