使用reveal.js创建光滑的HTML演示文稿

进行演示并不是什么新鲜事。 但是这次必须很特别，我们有竞争。 演示是营造整体印象的一种方式。 而且，要创造印象，我们需要一些与众不同的东西。 与传统的演示方式（PowerPoint等）不同，这次我们决定以不同的方式进行。 那是当我们碰到Reveal.js的时候 。

manifest.js是一个使用HTML创建漂亮的演示文稿的框架。 它具有许多精巧的功能，例如Markdown内容，嵌套幻灯片，PDF导出以及用于控制幻灯片导航的JavaScript API。 使用manifest.js的演示文稿是使用HTML编写的。 对于那些不是很精通技术的人来说，还有一个界面 。

设置reveal.js

在使用reveal.js之前，应该在计算机上同时安装Node.js和Grunt 。 下一步是从GitHub克隆manifest.js存储库 ，安装所有依赖项，然后启动显示服务器。 以下命令列表用于完成这些步骤。

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
npm install
grunt serve

接下来，将浏览器导航到http://localhost:8000/以查看演示文稿。

建立简报

以下代码清单是不包含演示幻灯片的基本的Reveal.js HTML页面。 在body标签结束之前，我们有一个脚本，该脚本是所有演示配置的关键。 我们可以配置许多选项。 例如，我们可以选择显示演示进度，启用过渡并为演示设置主题。 一旦开始向演示文稿添加幻灯片，我们将对此进行更深入的研究。

滑梯

现在，我们将开始将幻灯片添加到我们的空白演示文稿中。 让我们使用以下HTML添加我们的第一张幻灯片。 section元素代表幻灯片。 我们甚至可以将幻灯片嵌套在其他幻灯片中，如示例中的嵌套section s所示。

  

    

      Welcome to Reveal.js Demo
    
    

      Theme Changes to Solarized. Isn't it Nice ;)
    
    

        

            LalaLand Floor 1
        
        

            LalaLand Floor 2
        
    
  

保存文件并使用grunt serve命令重新启动服务器。 您应该看到我们新创建的幻灯片。 请注意，可以使用箭头键控制幻灯片。 尽管默认情况下启用了此功能，但是您可以使用Reveal.initialize()方法中的keyboard: true配置行为（请参见原始HTML文件）。

主题

在css/theme中有许多可用的主题，例如beige ， solarized和sky 。 为了使用它们，您只需要更改页面上的默认样式，如以下示例所示。

转场

可以使用transition和transitionSpeed参数在Reveal.initialize()配置过渡样式和速度。 下面是一个示例。

transitionSpeed: 'default', // default / fast / slow
backgroundTransition: 'default', // default / none / slide / concave / convex / zoom

降价幻灯片内容

如果您是Markdown的粉丝，那么使用Markdown编写幻灯片会激发您的兴趣。 只需向您的section标签添加data-markdown属性，然后将内容包装在tag as shown below.

显示源代码

manifest.js使用highlight.js进行语法突出显示。 为了在幻灯片中显示源代码，请在

标记内添加代码，如下所示。 
 
   

  jQuery Code Sample
  

    $(function () {
      $('a').click(function(event) {
        alert('Thanks for visiting!'');
      });
    });
  
 
   
 创建演讲者笔记 
 
   
 manifest.js有一个插件，可以显示每张幻灯片的注释。 可以使用aside标签将演讲者注释添加到幻灯片中，如下所示。 要查看注释，只需按s键。 
 
   

  Hello I have Notes. Press 's' to view
  

    I'm your Notes :)
  
 
   
 显示数学 
 
   
 数学方程式也可以显示在reveal.js幻灯片中。 我们只需要在MathJax库上添加一个依赖项。 以下示例显示了如何在Reveal.initalize()完成此操作。 
 
   
Reveal.initialize({
  // other options ...
  math: {
    mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
    config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
  },
  dependencies: [{
    src: 'plugin/math/math.js',
    async: true
  }]
});
 
   
 如您所见，MathJax是从远程服务器加载的。 确保您具有Internet连接，或将库托管在本地计算机上。 包含库后，我们可以创建一个数学公式，如下所示。 请注意， $字符用于开始和结束数学公式。 
 
   

  
Math Formula
  $\cos (2\theta) = \cos^2 \theta - \sin^2 \theta$
 
   
 部署到Heroku 
 
   
 接下来，我们将学习如何在Heroku上主持我们的演示文稿。 在项目的根目录中创建一个名为web.js的文件，然后添加以下代码。 请注意 ，在项目的根目录中使用express.static中间件将允许访问者查看您的所有项目文件，包括package.json 。 如果安全性很重要，则应从项目子目录托管演示文稿。 
 
   
var express = require('express');
var app = express();
var port = process.env.PORT || 5000;

app.use(express.logger());
app.use('/', express.static(__dirname));
app.listen(port, function() {
  console.log('Server started on ' + port);
});
 
   
 还创建一个名为Procfile的文件（不带文件扩展名），其中包含以下行。 
 
   
web: node web.js
 
   
 接下来，打开package.json并确保express存在依赖项。 确保版本为3.xx 最后，使用以下命令部署到Heroku。 
 
   
git init
git add .
git commit -m "first"
heroku create
git push heroku master
 
   
 结论 
 
   
 manifest.js是使用HTML创建演示文稿的最受欢迎的选择之一。 我们在本文中介绍了它的一些基本功能，但是还有更多可用的功能。 我建议看一下官方文档 ，看看还有什么可能。 本文中的代码可在GitHub上获得 ，并且实时演示已在Heroku上启动并运行。 
 
   
From: https://www.sitepoint.com/creating-slick-html-presentations-using-reveal-js/