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

最新推荐文章于 2024-04-30 08:30:33 发布

dingshi7798

最新推荐文章于 2024-04-30 08:30:33 发布

阅读量187

点赞数

文章标签： java js javascript git vue ViewUI

原文链接：https://www.sitepoint.com/creating-slick-html-presentations-using-reveal-js/

版权

reveal.js

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

manifest.js是一个使用HTML创建漂亮的演示文稿的框架。它具有许多精巧的功能，例如Markdown内容，嵌套幻灯片，PDF导出以及用于控制幻灯片导航JavaScript API。使用Reveal.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标签结束之前，我们有一个脚本，该脚本是所有演示文稿配置的关键。我们可以配置许多选项。例如，我们可以选择显示演示进度，启用过渡并为演示设置主题。一旦开始向演示文稿添加幻灯片，我们将对此进行更深入的研究。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>reveal.js - The HTML Presentation Framework</title>
  <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
  <meta name="author" content="Hakim El Hattab">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="css/reveal.min.css">
  <link rel="stylesheet" href="css/theme/default.css" id="theme">

  <!-- For syntax highlighting -->
  <link rel="stylesheet" href="lib/css/zenburn.css">

  <!-- If the query includes 'print-pdf', include the PDF print sheet -->
  <script>
    if (window.location.search.match(/print-pdf/gi)) {
      var link = document.createElement('link');

      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = 'css/print/pdf.css';
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  </script>

  <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
  <![endif]-->
</head>
<body>

  <!-- Slides  content to be added here -->

  <script src="lib/js/head.min.js"></script>
  <script src="js/reveal.min.js"></script>
  <script>
    // Full list of configuration options available here:
    // https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
      controls: true,
      progress: true,
      history: true,
      center: true,

      theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
      transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

      // Parallax scrolling
      // parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
      // parallaxBackgroundSize: '2100px 900px',

      // Optional libraries used to extend on reveal.js
      dependencies: [{
        src: 'lib/js/classList.js',
        condition: function () {
          return !document.body.classList;
        }
      }, {
        src: 'plugin/markdown/marked.js',
        condition: function () {
          return !!document.querySelector('[data-markdown]');
        }
      }, {
        src: 'plugin/markdown/markdown.js',
        condition: function () {
          return !!document.querySelector('[data-markdown]');
        }
      }, {
        src: 'plugin/highlight/highlight.js',
        async: true,
        callback: function () {
          hljs.initHighlightingOnLoad();
        }
      }, {
        src: 'plugin/zoom-js/zoom.js',
        async: true,
        condition: function () {
          return !!document.body.classList;
        }
      }, {
        src: 'plugin/notes/notes.js',
        async: true,
        condition: function () {
          return !!document.body.classList;
        }
      }]
    });
  </script>
</body>
</html>

滑梯

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

<div class="reveal">
  <div class="slides">
    <section>
      Welcome to Reveal.js Demo
    </section>
    <section>
      Theme Changes to Solarized. Isn't it Nice ;)
    </section>
    <section>
        <section>
            LalaLand Floor 1
        </section>
        <section>
            LalaLand Floor 2
        </section>
    </section>
  </div>
</div>

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

主题

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

<link rel="stylesheet" href="css/theme/default.css" id="theme">

转场

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

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

降价幻灯片内容

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

<section data-markdown>
  <script type="text/template">
    ## Here comes Markdown
  </script>
</section>

显示源代码

manifest.js使用highlight.js进行语法高亮显示。为了在幻灯片中显示源代码，请在<pre><code>标记内添加代码，如下所示。

<section>
  jQuery Code Sample
  <pre><code>
    $(function () {
      $('a').click(function(event) {
        alert('Thanks for visiting!'');
      });
    });
  </code></pre>
</section>

创建演讲者笔记

manifest.js有一个插件，可以显示每张幻灯片的注释。可以使用aside标签将演讲者注释添加到幻灯片中，如下所示。要查看注释，只需按s键。

<section>
  Hello I have Notes. Press 's' to view
  <aside class="notes">
    I'm your Notes :)
  </aside>
</section>

显示数学

数学方程式也可以显示在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连接，或将库托管在本地计算机上。包含库后，我们可以创建一个数学公式，如下所示。请注意， $字符用于开始和结束数学公式。

<section>
  <p>Math Formula</p>
  $\cos (2\theta) = \cos^2 \theta - \sin^2 \theta$
</section>

部署到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上启动并运行。

翻译自: https://www.sitepoint.com/creating-slick-html-presentations-using-reveal-js/

reveal.js

dingshi7798

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫