1. 技术文章
  2. HTML5幻灯片库reveal.js使用

HTML5幻灯片库reveal.js使用

由 不问归期 提交于 2020-02-04 11:36:32

介绍

reveal.js是一个用于实现幻灯片效果的库。使用该库。
github地址：github
提供了页面编辑功能：slides.com
官方demo: demo
我自己做的PPT地址：ppt（建议使用Chrome查看）

特点

reveal.js有一下几个特点：

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

  • 可以使用markdown来写内容

  • 支持pdf的导出

  • 支持演说注释

  • 提供JavaScript API来控制页面

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

  • 自适应移动端和PC端

安装

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

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

  3. 编辑后好，用浏览器打开html页面就可以看到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>

标题和正文

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="example.md"  
         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://clips.vorwaerts-gmbh.de/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://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 时才会加载脚本

自动播放

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

// 每 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使用

标签
幻灯片
Markdown
幻灯片背景
fragment
section
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!