reveal.js让程序员做ppt也享受快乐

Posted 2020-10-02 Jinus

reveal.js，一款优秀的ppt设计框架

前言

       程序员除了会写的一手漂亮的代码，也要求做出风格优雅的PPT，诸如向领导汇报工作、向小组成员反馈项目进展自己的工作等等。就本人而言，做ppt还要去找模板，还需要设计风格，内心是焦灼的。于是乎，我搜到了这样的一款js库，用代码完成ppt，培训期间论文的答辩PPT采用这一方案，得到了领导同事的一致好评。这篇文章简单地讲一下reveal.js的基础知识，我是用了不到两个小时做出了一个ppt，从无到有，个人觉得很简单。

正文

       reveal.js是一个专门用来做 html 演示文稿的框架。只需要在index.html中引入主题样式文件（其中包括bootstrap.min.css,如果你想用到bootstrap的样式的话）以及js文件即可。如下所示

<link rel="stylesheet" href="css/reveal.css" />
    <link rel="stylesheet" href="css/theme/white.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/reveal.js"></script>

View Code

       reveal.js的主题部分是body内嵌的html代码，如下图

       所有的ppt部分要求写在双层div中，且外层div的class为reveal，内层div的class为slides。每个ppt即为一个section，即<section></section>。互为兄弟节点的section在ppt演示时是通过左右方向的箭头进行切换，而section也可以内嵌section。比如我们做一个ppt分为三个章节，假设第一章节有1.1,1.2,1.3三个小节，那么三个章节就是兄弟节点关系，1.1，1.2,1.3则是兄弟节点关系，且这三个小节是内嵌在第一章节的section内部。

       还有一点，我们也可以很方便地写出每张ppt的页眉和页脚，页眉（或页脚）的内容不写在section，它的父节点就是<div class="slides"></div>,至于是页眉还是页脚，可以通过css控制定位即可。

       reveal.js也定义了自己一套默认规则，如下图所示

    <script>
        Reveal.initialize({
            controls: true,
            progress: true,
            slideNumber: \'c/t\'
        });
    </script>

View Code

       通过Reveal.initialize({});进行设置，像进度条、页码、自动播放控制等。reveal.js虽然是通过浏览器播放，但是它也提供了打印以及pdf转换等功能。本文只是讲了reveal.js最基本的用法。