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

Posted Jinus

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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最基本的用法。

 

以上是关于reveal.js让程序员做ppt也享受快乐的主要内容,如果未能解决你的问题,请参考以下文章

使用reveal.js写演示文稿

使用reveal.js写演示文稿

Reveal.js一个用来做WEB演示文稿的框架

Revealjs网页版PPT让你复制粘贴另类装逼,简洁优雅又低调,不懂编程也看过来

Reveal.js一个用来做WEB演示文稿的框架

居然可以用 js 写 PPT?