HTML5幻灯片库reveal.js使用

Kylin_Mountain 发布于2019-08-05 18:18 / 2688人阅读

摘要：外置文件可以引用一个外置的文件来解析。分页实现一个文件中可以连续包含多个章内容。主题主题内容主题内容主题内容内容细节主题内容内容细节主题注释对添加属性，就可以指定后面的内容为当前幻灯片的注释。

介绍

最近在准备一个团队内部的分享，觉得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文件就可以

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

幻灯片内容实现方法

幻灯片的内容需要包含在

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


    
        Single Horizontal Slide
        
            Vertical Slide 1
            Vertical Slide 2

html实现内容 标题和正文

section中的内容就是幻灯片的内容，你可以使用h2标签标示title, p表示内容。需要红色的字体可以直接设置style的color为red。
当某一页需要特殊背景色，可以使用data-background在section上设置, data-background-transition表示背景的过渡效果。For example:

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

代码

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


  console.log("hello reveal.js!");

注释

在演说时，会用到注释，对于注释，可以通过

来实现。For Example:


  这里是注释。

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

markdown实现

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

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

外置md文件

reveal.js可以引用一个外置的markdown文件来解析。For Example:

分页实现

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

注释

对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盘拷来拷去了。

云服务器超融合服务器照片库图片库网页图片库 html5标签使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60878.html

github 上有趣又实用的前端项目（持续更新，欢迎补充）

摘要：上有趣又实用的前端项目持续更新，欢迎补充幻灯片展示框架一个专门用来做幻灯片的框架，支持和语法。又一个幻灯片展示框架一个受的启发，使用了现代浏览器里支持的和的特效幻灯片。我的个人网站首页也是用开发的。好在有可以帮助我们解决这个问题。 github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架一个专门用来做 HTML 幻灯片的框架，支持 HTM...

zzzmh 2019-08-23 12:09 评论0 收藏0
github 上有趣又实用的前端项目（持续更新，欢迎补充）

摘要：上有趣又实用的前端项目持续更新，欢迎补充幻灯片展示框架一个专门用来做幻灯片的框架，支持和语法。又一个幻灯片展示框架一个受的启发，使用了现代浏览器里支持的和的特效幻灯片。我的个人网站首页也是用开发的。好在有可以帮助我们解决这个问题。 github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架一个专门用来做 HTML 幻灯片的框架，支持 HTM...

morgan 2019-08-30 15:54 评论0 收藏0
github 上有趣又实用的前端项目（持续更新，欢迎补充）

摘要：上有趣又实用的前端项目持续更新，欢迎补充幻灯片展示框架一个专门用来做幻灯片的框架，支持和语法。又一个幻灯片展示框架一个受的启发，使用了现代浏览器里支持的和的特效幻灯片。我的个人网站首页也是用开发的。好在有可以帮助我们解决这个问题。 github 上有趣又实用的前端项目（持续更新，欢迎补充） 1. reveal.js: 幻灯片展示框架一个专门用来做 HTML 幻灯片的框架，支持 HTM...

warmcheng 2019-08-05 15:04 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

高胜山 2019-08-26 13:44 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

shusen 2019-08-30 10:53 评论0 收藏0