安装

¥Installation

根据你的使用情况和技术经验，我们提供三种不同的安装 reveal.js 的方式。

¥We provide three different ways to install reveal.js depending on your use case and technical experience.

  1. 基本设置 是最简单的入门方法。无需设置任何构建工具。

    ¥The basic setup is the easiest way to get started. No need to set up any build tools.

  2. 完整设置 允许你访问修改 reveal.js 源代码所需的构建工具。它包含一个 Web 服务器，如果你想加载外部 Markdown 文件，则需要该服务器（基本设置与你选择的本地 Web 服务器配对也可以）。

    ¥The full setup gives you access to the build tools needed to make changes to the reveal.js source code. It includes a web server which is required if you want to load external Markdown files (the basic setup paired with your own choice of local web server works too).

  3. 如果你想在项目中使用 reveal.js 作为依赖，你可以使用 从以下位置安装 npm。

    ¥If you want to use reveal.js as a dependency in your project, you can install from npm.

后续步骤

¥Next Steps

安装 reveal.js 后，我们建议你查看 标记 和 配置选项 指南。

¥Once reveal.js is installed, we recommend checking out the Markup and Config Option guides.

基本设置

¥Basic Setup

我们致力于以尽可能多的人可以使用的方式发布 reveal.js。基本设置是我们最常用的入门方法，只需要你拥有一个 Web 浏览器。无需进行构建过程或安装任何依赖。

¥We make a point of distributing reveal.js in a way that it can be used by as many people as possible. The basic setup is our most broadly accessible way to get started and only requires that you have a web browser. There's no need to go through a build process or install any dependencies.

  1. 下载最新的 reveal.js 版本 https://github.com/hakimel/reveal.js/archive/master.zip

    ¥Download the latest reveal.js version https://github.com/hakimel/reveal.js/archive/master.zip

  2. 解压 index.html 中的示例内容并将其替换为你自己的内容。

    ¥Unzip and replace the example contents in index.html with your own

  3. 在浏览器中打开 index.html 查看

    ¥Open index.html in a browser to view it

就是这样 🚀

¥That's it 🚀

完整设置 - 推荐

¥Full Setup - Recommended

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

¥Some reveal.js features, like external Markdown, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code.

  1. 安装 Node.js（10.0.0 或更高版本）

    ¥Install Node.js (10.0.0 or later)

  2. 克隆 reveal.js 代码库

    ¥Clone the reveal.js repository

    $ git clone https://github.com/hakimel/reveal.js.git

  3. 移动到 reveal.js 文件夹并安装依赖

    ¥Move to the reveal.js folder and install dependencies

    $ cd reveal.js && npm install

  4. 提供演示文稿并监视源文件的更改

    ¥Serve the presentation and monitor source files for changes

    $ npm start

  5. 打开 http://localhost:8000 查看你的演示文稿

    ¥Open http://localhost:8000 to view your presentation

开发服务器端口

¥Development Server Port

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

¥The development server defaults to port 8000. You can use the port argument to switch to a different one:

npm start -- --port=8001

从 npm 安装

¥Installing From npm

该框架已发布到 npm，并可从 npm 安装。请注意，reveal.js 针对浏览器，包含 CSS、字体和其他资源，因此 npm 依赖用例可能会受到限制。

¥The framework is published to, and can be installed from, npm. Note that reveal.js is targeted at the browser and includes CSS, fonts and other assets so the npm dependency use case may be limited.

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

安装后，你可以将 reveal.js 作为 ES 模块引入：

¥Once installed, you can include reveal.js as an ES module:

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 样式和 演示文稿主题。

¥You'll also need to include the reveal.js styles and a presentation theme.

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