reveal.js

Published: by Creative Commons Licence

不多废话,直接进入正题。

Reveal.js是什么

一个使用HTML语言制作演示文稿的Web框架,支持插入多种格式的内容,并以类似PPT的形式呈现。

为什么要用 Reveal.js

优点

  • 制作灵活、不限应用,只需修改HTML文件
  • 发布灵活、不限平台,只需打开HTML文件
  • 丰富的特性,支持过渡动画、代码高亮、视频背景、Markdown 语法、导出 PDF 等
  • 极度轻量,占用空间和内存少

缺点

需要粗浅地掌握markdown以及html

但是跟着教程,十分钟搞明白,半个小时掌握基本用法不是问题。

怎么样用 Reveal.js

下载

进入reveal.js官网,进入下载界面,里面有详细教程,按照步骤操作即可。

除了下载教程之外,还有很多模块的介绍、教程和展示,比如 Media、Code、Math、themes、transitions 等等

打开index.html

先找到index.html的位置,然后用一个文本编辑器打开(不要用浏览器打开哦)。

位置 选择文本编辑器

看看结构

在改动前,index.html 文件中也就只有四十行代码,如下图。

vscode打开效果

从打开的效果图中我们可以看到,整个html分为部分:

<html>
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>

<head>...</head>为对该文档的说明, <body>...</body>是演示的主要内容。

我们的所有“大动干戈”都在<body>...</body>Line19 ~ Line20之间完成。

注意哦,只要改动18行和21行之间的内容就行啦

准备

首先要保证一点,我们要使用制表符来缩进,不仅是为了代码的美观,也是为了我们自己在套娃的时候整得清楚明白。

另外,我们得明确,前后标签名得保持一致,如<标签名>内容</标签名>

分页

Reveal.js里页面有两种页面类型,横向的一级页面、纵向的子页面。

后者务必嵌套在前者里面。所谓的纵横比较好理解,键盘上的左右箭头控制一级页面,上下键移动子页面。

一级页面以下代码实现:

<section>
    一级页面
</section>

或者

<sections>一级页面</sections>

二级页面如同套娃:

<section>
    <section>二级页面1</section>
    <section>二级页面2</section>
</section>

Markdown

<section>里面添加data-markdown属性,表示该段内容用Markdown引擎解析。

用法一: 排版

下面列举一些基础的

# 一级标题
## 二级标题
### 三级标题
#### 四级标题

1. 第一点
2. 第二点
3. 第三点

* 无序表

用法二:插入

<section data-markdown>
    Area A
</section>

然后在Area A处使用markdown语法即可。 插入图片、代码块、序列表都ok的。

转场动画

如同调用Markdown渲染引擎一样,只要为<section>标签data-transition属性就ok。

<section data-transition="参数">
    内容
</section>

参数集合

  • fede
  • slide(default)
  • convex
  • concave
  • zoom
  • none(停用动画)

当然还有下面一些高级操作:

<section data-transition-speed="fast">
  <h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>

<section data-transition="slide-in fade-out">
    and stops.
</section>

背景

纯色背景

<section data-background-color="aquamarine">
  <h2>🐟</h2>
</section>
<section data-background-color="rgb(70, 70, 255)">
  <h2>🐳</h2>
</section>

图片背景

<section data-background-image="http://example.com/image.png">
  <h2>Image</h2>
</section>
<section data-background-image="http://example.com/image.png" 
          data-background-size="100px" data-background-repeat="repeat">
  <h2>This background image will be sized to 100px and repeated</h2>
</section>
Attribute Default Description
data-background-image   URL of the image to show. GIFs restart when the slide opens.
data-background-size cover See background-size on MDN.
data-background-position center See background-position on MDN.
data-background-repeat no-repeat See background-repeat on MDN.
data-background-opacity 1 Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque.

视频背景

<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" 
          data-background-video-loop data-background-video-muted>
  <h2>Video</h2>
</section>
Attribute Default Description
data-background-video   A single video source, or a comma separated list of video sources.
data-background-video-loop false Flags if the video should play repeatedly.
data-background-video-muted false Flags if the audio should be muted.
data-background-size cover Use cover for full screen and some cropping or contain for letterboxing.
data-background-opacity 1 Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque.

最后

保存index.html文件,然后用浏览器打开它,就可以看到效果啦。

index.html一定要在原来的目录下哦


关注公众号"永远学习的小歪“,掌握最新的消息动态~