30分钟上手Reveal.js：从安装到制作专业演示文稿

2026-02-05 05:10:08作者：凌朦慧Richard

你是否还在为制作单调的PPT而烦恼？是否想让你的演示文稿更具交互性和视觉冲击力？本文将带你快速掌握Reveal.js（HTML演示框架）的使用，从安装到制作专业级演示文稿，全程只需30分钟。读完本文，你将能够：使用Markdown快速编写幻灯片、添加动画和过渡效果、自定义主题样式、集成代码高亮和数学公式，并发布你的演示文稿。

什么是Reveal.js

Reveal.js是一个开源HTML演示框架，它允许你使用Web技术创建精美的演示文稿。与传统PPT软件相比，Reveal.js具有更高的灵活性和交互性，支持嵌套幻灯片、Markdown语法、动画效果、代码高亮等功能。项目源码托管在GitHub，遵循MIT许可协议。

快速开始

安装Reveal.js

有两种方式可以开始使用Reveal.js：

直接下载源码：从GitHub仓库克隆或下载最新版本。

git clone https://gitcode.com/gh_mirrors/re/reveal.js.git
cd reveal.js

使用npm安装：

npm install reveal.js

基本目录结构

Reveal.js项目的主要目录结构如下：

reveal.js/
├── index.html       # 默认演示文稿
├── demo.html        # 演示示例
├── css/             # 样式文件
├── js/              # JavaScript文件
├── plugin/          # 插件目录
├── examples/        # 示例演示文稿
└── README.md        # 项目说明文档

详细目录结构可参考项目根目录下的README.md。

第一个演示文稿

打开项目根目录下的index.html文件，你会看到一个基本的演示文稿结构。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的第一个Reveal.js演示文稿</title>
    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/white.css">
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <section>欢迎使用Reveal.js</section>
            <section>这是第二张幻灯片</section>
            <section>
                <section>嵌套幻灯片1</section>
                <section>嵌套幻灯片2</section>
            </section>
        </div>
    </div>
    <script src="dist/reveal.js"></script>
    <script>
        Reveal.initialize();
    </script>
</body>
</html>

在浏览器中打开此文件，即可看到你的第一个Reveal.js演示文稿。使用键盘方向键或空格键可以导航幻灯片。

使用Markdown编写幻灯片

Reveal.js支持使用Markdown编写幻灯片，这使得内容创作更加高效。你需要引入Markdown插件，并在HTML中添加data-markdown属性。

基本用法

以下是一个使用Markdown的示例，来自examples/markdown.html：

<section data-markdown>
    <script type="text/template">
        # Markdown演示
        ## 副标题
        
        - 列表项1
        - 列表项2
        - 列表项3
        
        ---
        
        ## 代码示例
        
        ```javascript
        function hello() {
            console.log("Hello, Reveal.js!");
        }
        ```
    </script>
</section>

外部Markdown文件

你也可以将Markdown内容保存到外部文件，然后通过data-markdown属性引用：

<section data-markdown="examples/markdown.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>

示例文件examples/markdown.md展示了如何组织外部Markdown幻灯片。

自定义主题和样式

Reveal.js提供了多种内置主题，你可以在css/theme/目录下找到它们，如black.scss、white.scss、league.scss等。

更换主题

要更换主题，只需修改HTML中的主题CSS链接：

<link rel="stylesheet" href="dist/theme/league.css">

自定义主题

如果你需要更个性化的样式，可以创建自定义主题。Reveal.js提供了主题模板，位于css/theme/template/目录。你可以复制模板文件并修改变量来自定义颜色、字体等。

例如，创建自定义主题文件mytheme.scss：

// 导入模板
@import "template/theme";

// 自定义变量
$backgroundColor: #f0f0f0;
$primaryColor: #333333;
$secondaryColor: #666666;
$headingColor: #222222;

然后使用Gulp编译SCSS：

gulp css-themes

添加动画和过渡效果

Reveal.js支持丰富的动画和过渡效果，使你的演示文稿更加生动。

幻灯片过渡效果

在初始化Reveal时配置过渡效果：

Reveal.initialize({
    transition: 'slide', // 可选: none/fade/slide/convex/concave/zoom
    transitionSpeed: 'default', // 可选: default/fast/slow
    backgroundTransition: 'fade' // 可选: none/fade/slide/convex/concave/zoom
});

更多过渡效果示例可参考examples/transitions.html。

元素动画

Reveal.js的Auto-Animate功能可以为元素添加平滑过渡动画。只需为元素添加data-auto-animate属性：

<section data-auto-animate>
    <h2>Auto-Animate示例</h2>
    <p data-auto-animate-id="text">这是一段会动画的文本</p>
</section>

<section data-auto-animate>
    <h2>Auto-Animate示例</h2>
    <p data-auto-animate-id="text" style="font-size: 2em; color: red;">这段文本会从上个幻灯片平滑过渡</p>
</section>

详细示例请参考examples/auto-animate.html。

集成插件

Reveal.js支持多种插件，扩展其功能。常用插件位于plugin/目录。

代码高亮

Reveal.js的highlight插件支持代码语法高亮。使用方法如下：

<section>
    <h2>代码高亮示例</h2>
    <pre><code class="language-javascript" data-line-numbers>function hello() {
    console.log("Hello, Reveal.js!");
}</code></pre>
</section>

需要引入highlight插件：

<script src="plugin/highlight/highlight.js"></script>
<script>
    Reveal.initialize({
        plugins: [RevealHighlight]
    });
</script>

数学公式

使用math插件可以在幻灯片中插入LaTeX数学公式。支持KaTeX、MathJax2和MathJax3。

<section>
    <h2>数学公式示例</h2>
    <p>欧拉公式: \( e^{i\pi} + 1 = 0 \)</p>
    <p>矩阵: \[ \begin{pmatrix} 1 & 2 \\ 3 & 4 \end{pmatrix} \]</p>
</section>

引入math插件：

<script src="plugin/math/math.js"></script>
<script>
    Reveal.initialize({
        plugins: [RevealMath.KaTeX]
    });
</script>

详细示例请参考examples/math.html。

控制演示文稿

Reveal.js提供了多种控制演示文稿的方式，包括键盘导航、触摸控制、演讲者备注等。

键盘快捷键

方向键：导航幻灯片
空格键：下一张幻灯片
ESC：显示/隐藏概览
F：全屏模式
S：打开演讲者备注窗口

演讲者备注

演讲者备注允许你为每张幻灯片添加仅供自己查看的备注。使用data-notes属性或<aside class="notes">标签添加备注：

<section>
    <h2>演讲者备注示例</h2>
    <p>这是观众看到的内容</p>
    <aside class="notes">
        这是演讲者备注，按S键查看
    </aside>
</section>

多显示器支持

Reveal.js支持多显示器设置，演讲者可以在一个屏幕上查看备注和计时器，而观众在另一个屏幕上查看演示文稿。

发布演示文稿

完成演示文稿后，你可以通过以下方式发布：

本地文件：直接在浏览器中打开HTML文件。
Web服务器：将文件上传到Web服务器，如Apache、Nginx等。
静态网站服务：使用GitHub Pages、Netlify等服务托管。

例如，将Reveal.js项目推送到GitHub仓库，并启用GitHub Pages，即可通过https://username.github.io/reveal.js/访问你的演示文稿。

高级功能

嵌套幻灯片

Reveal.js支持嵌套幻灯片，创建二维演示文稿结构。使用<section>标签嵌套即可：

<section>
    <h2>主幻灯片</h2>
    <section>
        <h3>嵌套幻灯片1</h3>
    </section>
    <section>
        <h3>嵌套幻灯片2</h3>
    </section>
</section>

按ESC键可以查看幻灯片概览，示例可参考examples/500-slides.html。

背景图片和视频

你可以为幻灯片添加背景图片或视频：

<section data-background="examples/assets/image1.png">
    <h2>背景图片示例</h2>
</section>

<section data-background-video="examples/assets/video.mp4">
    <h2>背景视频示例</h2>
</section>

更多背景效果示例请参考examples/backgrounds.html。

多媒体内容

Reveal.js支持嵌入音频、视频等多媒体内容：

<section>
    <h2>多媒体示例</h2>
    <video controls>
        <source src="examples/assets/video.mp4" type="video/mp4">
    </video>
    <audio controls>
        <source src="examples/assets/audio.mp3" type="audio/mpeg">
    </audio>
</section>