安装

我们根据你的用例和技术经验提供了三种不同的安装 reveal.js 的方法。

  1. 基本设置 是最简单的入门方法。无需设置任何构建工具。
  2. 完整设置 可以让你访问构建工具,用于更改 reveal.js 源代码。它包括一个 Web 服务器,如果你想要加载外部 Markdown 文件,则需要该服务器(基本设置搭配你自己的本地 Web 服务器也是可行的)。
  3. 如果你想在你项目中使用 reveal.js 作为依赖,你可以从 npm 安装

后续步骤

一旦安装 reveal.js,我们建议查看标记配置选项指南。

基本设置

我们精心分发 reveal.js,以便尽可能多的人能够使用它。基本设置是我们最广泛的入门方式,只需要您有一个网络浏览器。无需经历构建过程或安装任何依赖项。

  1. 下载最新的 reveal.js 版本 https://github.com/hakimel/reveal.js/archive/master.zip
  2. 解压并用您自己的内容替换 index.html 中的示例内容
  3. 在浏览器中打开 index.html 以查看它

那就这样啦 🚀

完整设置 - 推荐

某些 reveal.js 功能(例如外部 Markdown)要求演示文稿从本地网络服务器运行。以下说明将设置此类服务器以及对 reveal.js 源代码进行编辑所需的所有开发任务。

  1. 安装 Node.js(10.0.0 或更高版本)

  2. 克隆 reveal.js 存储库

    $ git clone https://github.com/hakimel/reveal.js.git
  3. 移动到 reveal.js 文件夹并安装依赖项

    $ cd reveal.js && npm install
  4. 提供演示文稿并监视源文件是否发生更改

    $ npm start
  5. 打开 http://localhost:8000 以查看演示文稿

开发服务器端口

开发服务器默认为端口 8000。您可以使用 port 参数切换到其他端口

npm start -- --port=8001

从 npm 安装

该框架已发布到 npm,并且可以从中安装。请注意,reveal.js 面向浏览器,并包含 CSS、字体和其他资源,因此 npm 依赖项用例可能有限。

npm install reveal.js
# or
yarn add reveal.js

安装后,您可以将 reveal.js 包含为一个 ES 模块

import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown/markdown.esm.js';

let deck = new Reveal({
  plugins: [Markdown],
});
deck.initialize();

您还需要包含 reveal.js 样式和 演示文稿主题

<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css" />
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css" />