使用前端技术制作在线PPT：reveal.js基础与应用 01-快速上手篇

王士江WangJohn
2,614 阅读5分钟

背景：由于本人是一名前端开发工程师，而且平时喜欢把收获到的开发知识和经验进行技术分享，于是就产生了直接使用前端技术进行在线PPT制作的想法。就这样、我发现了两个非常优秀的制作在线PPT的JS库——reveal.js和impress.js。 接下来我会分别以系列文章的形式进行reveal.js和impress.js的基础与应用分享，希望能帮到有同样需求的朋友。 本系列文章主要是介绍reveal.js的基础和应用。

《使用前端技术制作在线PPT：reveal.js基础与应用》会以系列文章的形式，有步骤、有重点地分享我使用reveal.js实现在线PPT相关的知识和经验，目前该系列文章有如下3篇：

  1. 使用前端技术制作在线PPT：reveal.js基础与应用 01-快速上手篇
  2. 使用前端技术制作在线PPT：reveal.js基础与应用 02-定制样式篇
  3. 使用前端技术制作在线PPT：reveal.js基础与应用 03-插件应用篇

以下是《使用前端技术制作在线PPT：reveal.js基础与应用 01-快速上手篇》的文章正文。

1、背景

reveal.js-website-demo.png

reveal.js是一个使用 HTML 语言制作演示文稿的 Web 框架，支持了很完整的PPT功能，如嵌套幻灯片、Markdown支持、自动设置动画、PDF导出、演讲者提示、LaTeX支持、代码高亮... ...

使用reveal.js制作在线PPT有很多好处，我自己感受最深的有以下几点：

  1. 支持代码语法高亮：我要做的是技术分享的，经常会贴一些代码上去，如果使用的是PPT和Keynote的话，它们是不支持代码高亮的——虽然我可以使用Carbon等等把高亮的代码生成图片，但是涉及到修改代码时、需要额外增加更多操作步骤、我还是倾向于直接使用代码文本；
  2. 平台无关：由于reveal.js使用的技术栈是HTML、CSS和JavaScript制作PPT，只要有浏览器就能打开，不需要额外安装PPT、Keynote等客户端软件，可以做到平台无关，一次制作、到处运行；
  3. 上手简单：由于reveal.js使用的技术栈是HTML、CSS和JavaScript制作PPT，对于我们前端来说都是底层基础技术，非常熟悉、完全可控，我们可以做到根据自己的需要加入自己的代码和功能实现。

推荐喜欢做技术分享的各位朋友上手试用一下reveal.js——可以点击这里查看案例。

2、快速上手

reveal.js的使用可以有以下两种方法：

  1. 可以不依赖于构建工具直接从GitHub仓库下来单独使用——代码下载完之后，可以通过直接修改index.html的方式进行PPT的制作； reveal-slides-markup-html-full.png
  2. 也可以通过npm包的方式进行下载使用——为了学习时免去建立开发环境的烦恼，大家可以通过点击这里查看我在码上掘金创建的案例。 code.juejin.cn_pen_7291830840550490150.png

2.1、基本用法

为了学习时免去建立开发环境的烦恼，大家可以通过点击这里查看我在码上掘金创建的案例。

reveal.js使用HTML进行PPT的制作，使用时的基本用法包括如下三个部分：

code.juejin.cn_pen_7291830840550490150-html-markup.png

2.1.1 HTML标记

reveal.jsPPT的HTML标记层次是这样的——.reveal > .slides > section——一个section就是一页PPT：

<div class="reveal">
    <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
    </div>
</div>

2.1.2 CSS样式

我们通过import引入了reveal.js的CSS文件和一个主题样式文件（更多主题样式，可以在node_modules/reveal.js/dist/theme中查看）。

import 'reveal.js@4.1.3/dist/reveal.css';
// 查看更多主题 -> node_modules/reveal.js/dist/theme
//  beige, black, blood, league, moon, night, serif, simple, ...
import 'reveal.js@4.1.3/dist/theme/league.css';

2.1.3 JavaScript脚本

我们通过创建一个reveal.js的实例、调用initialize方法进行PPT的初始化：

import Reveal from 'reveal.js@4.1.3';

const deck = new Reveal();
deck.initialize({
  hash: true,
  slideNumber: true
});

通过以上三步，我们就能完成了reveal.js的基本使用，接下来我们可以像平时写HTML代码一样、向PPT里面添加内容。

2.2、 内容添加

除了像平时写HTML标签一样，添加各种标题(h1~h5)、文本(p/strong/span)、超链接(a)和图片(<img>)等多媒体内容，reveal.js还支持嵌套幻灯片（竖直幻灯片）、幻灯片背景等内容形式。

2.2.1 嵌套幻灯片（竖直幻灯片）

通过在section中添加新的section——reveal.js的标签层级是.reveal > .slides > section）——就可以实现嵌套幻灯片（或者竖直幻灯片）。

<section>Slide 1</section>
<section>
  <section>Slide 2.1</section>
  <section>Slide 2.2</section>
  <section>Slide 2.3</section>
</section>
<section>Slide 3</section>
<section>Slide 3</section>

reveal.js-vertical-slides.gif

2.2.2 幻灯片背景

revealjs支持对每一页幻灯片使用自定义背景——我们只需要在section标签中使用data-background即可, 并且支持背景透明:

<section data-background-image="./assets/background-image.jpg"  data-background-opacity="0.68">
  <h1>使用前端技术制作在线PPT</h1>
</section>

幻灯片背景有如下属性可以使用:

  • data-background-image： 当前页的背景图片地址；
  • data-background-size： 背景的大小；
  • data-background-position： 背景位置；
  • data-background-repeat： 背景的重复方式；
  • data-background-opacity： 背景透明度；
  • data-background-video： 视频背景的地址；
  • data-background-video-loop： 视频背景的循环模式；
  • data-background-iframe： 背景为iframe的url地址；
  • data-background-interactive： 是否能与iframe的内容交互。

3、总结

通过以上步骤，我们能够实现快速上手reveal.js——通过使用HTML标签制作PPT：

  1. 通过引入reveal.js的HTML标记、CSS样式、JS脚本，完成一个PPT项目的初始化；
  2. 通过在reveal.js的.reveal > .slides > section层级中，通过添加section来添加新的PPT幻灯片页面；
  3. 在section幻灯片页面中，通过内嵌section来实现幻灯片嵌套；
  4. 通过使用data-background等属性，添加HTML幻灯片的背景等等。

以上是我们使用reveal.js进行PPT制作的最基本、最常用的操作，接下来我们还会通过系列文章对reveal.js进行进一步的学习和定制：

  1. 使用前端技术制作在线PPT：reveal.js基础与应用 01-快速上手篇
  2. 使用前端技术制作在线PPT：reveal.js基础与应用 02-定制样式篇
  3. 使用前端技术制作在线PPT：reveal.js基础与应用 03-插件应用篇
avatar
文章
阅读
粉丝