【技术教程】Reveal.js 中文使用教程
Reveal.js 中文使用教程
Reveal.js 是一个功能强大的开源 HTML 演示文稿框架，使用纯 HTML、CSS 和 JavaScript 即可创建专业、美观的幻灯片。本教程基于官方demo.html源码分析，系统介绍 Reveal.js 的使用方法和核心功能。
一、基础结构
1.1 HTML 基本框架
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>Reveal.js 演示文稿</title><!-- 核心样式 --><linkrel="stylesheet"href="dist/reveal.css"><!-- 主题样式（可替换） --><linkrel="stylesheet"href="dist/theme/black.css"></head><body><divclass="reveal"><divclass="slides"><!-- 幻灯片内容 --><section>第一页</section><section>第二页</section></div></div><!-- 核心脚本 --><scriptsrc="dist/reveal.js"></script><script>Reveal.initialize({// 配置选项});</script></body></html>1.2 核心文件结构
dist/reveal.css：核心样式dist/reveal.js：核心脚本dist/theme/：内置主题文件（如 black.css、white.css 等）plugin/：插件目录（如 highlight、markdown 等）
二、幻灯片布局
2.1 水平幻灯片
每个顶层<section>代表一张水平幻灯片（左右切换）：
<divclass="slides"><section>第 1 页</section><section>第 2 页</section><section>第 3 页</section></div>2.2 垂直幻灯片
在<section>中嵌套<section>可创建垂直幻灯片（上下切换）：
<section><section>垂直页 1</section><section>垂直页 2</section><section>垂直页 3</section></section>2.3 混合布局示例
<divclass="slides"><section>封面页</section><section><section>主题一：概述</section><section>主题一：细节 1</section><section>主题一：细节 2</section></section><section><section>主题二：概述</section><section>主题二：细节 1</section></section><section>结束页</section></div>三、主题与样式
3.1 内置主题
在<head>中引入不同主题文件：
black.css：黑色主题white.css：白色主题（默认）league.css：灰色渐变beige.css：米色sky.css：蓝色天空night.css：深蓝夜晚
<linkrel="stylesheet"href="dist/theme/white.css">3.2 自定义背景
<sectiondata-background-color="#ff0000">纯色背景</section><sectiondata-background-image="image.jpg">图片背景</section><sectiondata-background-video="video.mp4"data-background-video-loopdata-background-video-muted>视频背景</section><sectiondata-background-iframe="https://example.com">嵌入网页背景</section><!-- 高级背景设置 --><sectiondata-background-image="image.jpg"data-background-size="contain"data-background-position="center">内容</section>四、转场动画
4.1 全局配置
Reveal.initialize({transition:'slide',// none | fade | slide | convex | concave | zoombackgroundTransition:'fade'// 背景转场});4.2 单页自定义
<sectiondata-transition="zoom">缩放转场</section><sectiondata-transition="fade">淡入淡出</section>五、内容元素
5.1 标题与文本
<section><h1>一级标题</h1><h2>二级标题</h2><p>段落文本</p><small>小字说明</small></section>5.2 列表
<ul><li>无序列表项 1</li><li>无序列表项 2</li></ul><ol><li>有序列表项 1</li><li>有序列表项 2</li></ol>5.3 图片
<imgsrc="image.png"alt="描述"><!-- 无边框无阴影 --><imgsrc="image.png"style="border:none;box-shadow:none;">5.4 表格
<table><thead><tr><th>表头1</th><th>表头2</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td></tr></tbody></table>5.5 引用
<blockquotecite="来源">“这是引用文字”<footer>— 作者</footer></blockquote>5.6 代码高亮
<pre><codeclass="hljs javascript">function hello() { console.log('Hello Reveal.js!'); }</code></pre>六、高级功能
6.1 Markdown 支持
<sectiondata-markdown><textareadata-template>## Markdown 标题 - 列表项 - 列表项 ```javascript console.log('代码');```引用
6.2 自动动画（Auto-Animate）
<sectiondata-auto-animate><h1>标题</h1></section><sectiondata-auto-animate><h1style="color:red;font-size:3em;">标题变大变红</h1></section>6.3 代码逐步高亮
<pre><codeclass="hljs javascript"data-line-numbers="1-2|4|6-8">function example() { const a = 1; const b = 2; // 跳过 const c = a + b; return c * 2; }</code></pre>6.4 嵌入网页
<iframesrc="https://example.com"width="100%"height="600"></iframe>七、插件系统
7.1 常用插件配置
Reveal.initialize({plugins:[RevealZoom,RevealNotes,RevealSearch,RevealMarkdown,RevealHighlight]});7.2 演讲者备注
<section><h2>幻灯片内容</h2><asideclass="notes">这是演讲者备注（按 S 键打开演讲者视图）</aside></section>八、常用初始化配置
Reveal.initialize({controls:true,progress:true,slideNumber:true,history:true,center:true,transition:'slide',plugins:[RevealHighlight]});九、JavaScript API
9.1 导航控制
Reveal.next();// 下一页Reveal.prev();// 上一页Reveal.slide(2,1);// 跳转到第 3 个水平页的第 2 个垂直页9.2 事件监听
Reveal.on('slidechanged',event=>{console.log('当前页：',event.indexh,event.indexv);});十、实用技巧
10.1 导出 PDF
在 URL 后添加?print-pdf，然后使用浏览器打印功能保存为 PDF。
10.2 添加固定 Logo
<imgsrc="logo.png"class="slide-logo"style="position:fixed;bottom:20px;right:20px;z-index:30;">10.3 懒加载图片
<imgdata-src="large-image.jpg"alt="懒加载">十一、常用快捷键
| 按键 | 功能 |
|---|---|
| → / 空格 | 下一页 |
| ← | 上一页 |
| ↓ / ↑ | 垂直方向切换 |
| Esc | 概览模式 |
| S | 演讲者视图 |
| F | 全屏 |
| B 或 . | 黑屏 |
十二、快速开始模板
<!DOCTYPEhtml><htmllang="zh"><head><metacharset="utf-8"><title>我的 Reveal.js 演示</title><linkrel="stylesheet"href="dist/reveal.css"><linkrel="stylesheet"href="dist/theme/white.css"><linkrel="stylesheet"href="plugin/highlight/monokai.css"></head><body><divclass="reveal"><divclass="slides"><section><h1>标题</h1><p>作者 / 日期</p></section><section><h2>内容页</h2><p>这里写内容</p></section><section><h1>谢谢观看</h1><p>Q&A</p></section></div></div><scriptsrc="dist/reveal.js"></script><scriptsrc="plugin/highlight/highlight.js"></script><script>Reveal.initialize({controls:true,progress:true,center:true,transition:'slide',plugins:[RevealHighlight]});</script></body></html>Reveal.js 通过简洁的 HTML 结构即可实现专业级演示效果。建议从官方demo.html开始实践，逐步掌握嵌套布局、动画、插件等特性，即可创建出丰富交互的幻灯片。