HTML5 幻灯片库 reveal.js 使用

  • A+
所属分类:系统运维
输入正文标题广告代码(非移动端)

如果你也觉着用 powerpoint 写幻灯片比较麻烦,那就可以可以跟着作者一起使用 reveal.js 来实现幻灯片。

介绍
最近在准备一个团队内部的分享,觉得 powerpoint 写幻灯片太麻烦,效率太低。作为前端,就想到是否可以使用页面来做幻灯片。于是就去搜索了下有没有 HTML5 实现幻灯片的工具。经过对比,最后选择了了reveal.js 来实现幻灯片。
reveal.js 是一个用于实现幻灯片效果的库。使用该库。
  • github 地址:github
  • 提供了页面编辑功能:slides.com
  • 官方 demo: demo
  • 我自己做的 PPT 地址:vuejs-ppt
特点
reveal.js 有一下几个特点:
  • 支持标签来区分每一页幻灯片
  • 可以使用 markdown 来写内容
  • 支持 pdf 的导出
  • 支持演说注释
  • 提供 JavaScript API 来控制页面
  • 提供了多个默认主题和切换方式
幻灯片实现步骤
从 reveal.js 上下载压缩包,并解压
进入 reveal.js 文件夹,直接修改 index.html 文件就可以
幻灯片内容实现方法
幻灯片的内容需要包含在 <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 表示内容。需要红色的字体可以直接设置 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 表示去除多余的空格。For Example:
<pre><code data-trim> console.log('hello reveal.js!');</code></pre>
注释
在演说时,会用到注释,对于注释,可以通过 <aside class="notes"> 来实现。For Example:
<aside class="notes"> 这里是注释。</aside>
在幻灯片页面,按下 s 键,就可以调出注释页面,注释页面包含了当前幻灯片,下一章幻灯片,注释,以及幻灯片播放时间。

Markdowmn 实现

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-titleHere 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盘拷来拷去了。
输入正文底部广告代码(非移动端)
输入评论上方广告代码(非移动端)

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: