reveal.js 技术文档

2024-12-24 11:40:22作者：董灵辛Dennis

1. 安装指南

1.1 安装方式

reveal.js 可以通过多种方式进行安装，以下是几种常见的安装方式：

1.1.1 通过 npm 安装

首先，确保你已经安装了 Node.js。然后，在命令行中运行以下命令：

npm install reveal.js

1.1.2 通过下载源码安装

你可以直接从 GitHub 下载 reveal.js 的源码，解压后即可使用。

1.1.3 通过 CDN 使用

如果你不想安装 reveal.js，可以直接通过 CDN 引入相关文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
<script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>

2. 项目的使用说明

2.1 创建一个简单的演示文稿

在安装好 reveal.js 后，你可以创建一个简单的 HTML 文件来制作演示文稿。以下是一个基本的示例：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/reveal.css">
  <link rel="stylesheet" href="dist/theme/black.css">
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section>第一张幻灯片</section>
      <section>第二张幻灯片</section>
    </div>
  </div>
  <script src="dist/reveal.js"></script>
  <script>
    Reveal.initialize();
  </script>
</body>
</html>

2.2 使用 Markdown 创建幻灯片

reveal.js 支持使用 Markdown 语法来创建幻灯片。你可以在 <section> 标签中使用 data-markdown 属性来指定 Markdown 内容：

<section data-markdown>
  <textarea data-template>
    ## 幻灯片标题
    
    这是一个使用 Markdown 的幻灯片。
  </textarea>
</section>

2.3 使用自动动画

reveal.js 提供了自动动画功能，可以在幻灯片之间自动添加动画效果。你可以在初始化时启用自动动画：

Reveal.initialize({
  autoAnimate: true
});

3. 项目API使用文档

3.1 初始化API

reveal.js 提供了丰富的 API 来控制演示文稿的行为。以下是一些常用的 API 方法：

3.1.1 初始化演示文稿

Reveal.initialize({
  controls: true,
  progress: true,
  center: true,
  hash: true
});

3.1.2 导航到指定幻灯片

Reveal.slide(2); // 跳转到第三张幻灯片

3.1.3 获取当前幻灯片索引

var currentSlideIndex = Reveal.getCurrentSlideIndex();

3.2 事件监听

reveal.js 提供了多种事件，你可以通过监听这些事件来执行自定义操作：

Reveal.on('slidechanged', function(event) {
  console.log('当前幻灯片:', event.currentSlide);
});

4. 项目安装方式

4.1 通过 npm 安装

npm install reveal.js

4.2 通过下载源码安装

从 GitHub 下载源码并解压。

4.3 通过 CDN 使用

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.css">
<script src="https://cdn.jsdelivr.net/npm/reveal.js/dist/reveal.js"></script>