HTML5幻灯片库reveal.js使用

介绍

最近在准备一个团队内部的分享,觉得powerpoint写幻灯片太麻烦,效率太低。作为前端,就想到是否可以使用页面来做幻灯片。于是就去搜索了下有没有HTML5实现幻灯片的工具。经过对比,最后选择了了reveal.js来实现幻灯片。
reveal.js是一个用于实现幻灯片效果的库。使用该库。
github地址:github
提供了页面编辑功能:slides.com
官方demo: demo
我自己做的PPT地址:vuejs-ppt

特点

reveal.js有一下几个特点:

  • 支持标签来区分每一页幻灯片

  • 可以使用markdown来写内容

  • 支持pdf的导出

  • 支持演说注释

  • 提供JavaScript API来控制页面

  • 提供了多个默认主题和切换方式

幻灯片实现步骤

  1. reveal.js上下载压缩包,并解压

  2. 进入reveal.js文件夹,直接修改index.html文件就可以

  3. 编辑后好,打开页面就可以看到PPT的内容。 按下S键,会打开时间,下一张PPT,Notes等信息的页面,方便演示PPT

幻灯片内容实现方法

幻灯片的内容需要包含在<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>

html实现内容

标题和正文

section中的内容就是幻灯片的内容,你可以使用h2标签标示title, p表示内容。需要红色的字体可以直接设置stylecolorred
当某一页需要特殊背景色,可以使用data-backgroundsection上设置, 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表示去除多余的空格。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="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来划分章节。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>

注释

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

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.

PDF导出

可以利用浏览器保存为pdf的功能来实现pdf的转化。步骤是

  1. 再url后面添加print-pdf参数,访问后,页面会去加载打印用的css文件,页面效果就是pdf的样式。

  2. 右键选择打印。设置为保存pdf。

我试过保存pdf的功能,有内容会重叠,怀疑是样式没有处理好。

多主题

reveal.js提供了多种样式。可以通过引用不同的主题来实现。具体主题查看reveal.js/css/theme下的css文件。

总结

reveal.js来实现幻灯片,可以只关注内容,忽略各种切换效果。而且可以使用markdown来实现,大大提高了编写效率。对于最后生成的html文件,可以部署到服务器,这样只需要网络就可以进行分享,不需要使用U盘拷来拷去了。

    原文作者:chenhao_ch
    原文地址: https://segmentfault.com/a/1190000004055732
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞