HTML5幻灯片库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 键，就可以调出注释页面，注释页面包含了当前幻灯片，下一章幻灯片，注释，以及幻灯片播放时间。
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的转化。步骤是
-
再url后面添加
print-pdf参数，访问后，页面会去加载打印用的css文件，页面效果就是pdf的样式。 -
右键选择打印。设置为保存pdf。
我试过保存pdf的功能，有内容会重叠，怀疑是样式没有处理好。
多主题
reveal.js 提供了多种样式。可以通过引用不同的主题来实现。具体主题查看 reveal.js/css/theme 下的css文件。
总结
用 reveal.js 来实现幻灯片，可以只关注内容，忽略各种切换效果。而且可以使用 markdown 来实现，大大提高了编写效率。对于最后生成的html文件，可以部署到服务器，这样只需要网络就可以进行分享，不需要使用U盘拷来拷去了。
正文到此结束
热门推荐
相关文章
近期评论
-
可能有人安装的时候开了魔法也依然没办法安装，显示的是"等待网络连接解决方法：在存放安装包的目录下打开cmd，分别运行下面2个命令：set "https_proxy=http://127.0.0.1:1080"start "" ".\comet_installer_latest.exe"需要注意有一些科技用的不是1080端口，按需修改
-
-
来看看，最近更新了一波，顺着友联过来的，几年过去了，网站越搞越好，厉害
-
哥太牛了
-
是呀，看您的IP显示在美国，还以为您移民了
-
-
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
