网页PPT: reveal.js 介绍

96
九彩拼盘
0.2 2015.10.23 14:14* 字数 551
reveal.js

reveal.js 是个啥

reveal.js 是一个展示内容的框架,可以简单的理解为网页版的PPT。我们用 reveal.js 做出来的PPT其实是一个HTML文件。

优势

和传统的PPT相比,reveal.js 有哪些吸引我的地方呢?主要有:

  • 制作简单:对程序员来说,只是做个页面而已;对非程序员可以使用在线编辑器
  • 运行简单:因为是一个HTML文件,那么只要双击,就能在浏览器中展示。(注:为了更好的效果,还是用高级浏览器打开比较好,虽然它对IE8及以上版本的旧浏览器做了优雅降级。更详细的浏览器支持,见这里
  • 功能强大,灵活:因为是在浏览器中运行的,可以用HTML+CSS+JS,做各种想要的东西:比如与现场的用户进行交互(如用户在手机上进行一些投票,页面上实时显示投票数);并且,reveal.js 有多套默认皮肤,支持 多种PPT切换动画,Fragments,内联PPT( nested slides),代码高亮,解析 Markdown,懒加载图片和视屏,导出为PDF和一系列的 JS API 等特性

安装

小白版安装

  1. 下载: https://github.com/hakimel/reveal.js/releases
  2. 解压下载的文件。将 index.html 里的内容替换成自己的内容
  3. 打开 index.html 来查看效果

完整版安装

reveal.js 的某些特性需要服务器端的支持,如 外部Markdown,演讲者注释。如果要用这些功能,需要安装完整版。步骤如下

  1. 安装 Node.js
  2. 安装 Grunt
  3. 下载
    $ git clone https://github.com/hakimel/reveal.js.git
    
  4. 到 reveal.js 文件夹
    $ cd reveal.js
    
  5. 安装依赖
    $ npm install
    
  6. 运行
    $ grunt serve
    
  7. 打开 http://localhost:8000 来查看

你也可以改变端口用 grunt serve --port 8001

DEMO

最后附上 一丝 用 reveal.js 做的高大上的demo

是不是很高大上,哈哈。

🐋 Web 前端
Web note ad 1