fwahlqvist/reveal.js

此包的最新版本（dev-master）没有可用的许可信息。

HTML演示框架

维护者

详情

github.com/fwahlqvist/reveal.js

主页

源代码

安装: 22

依赖项: 1

建议者: 0

安全: 0

星标: 0

关注者: 1

Forks: 16,627

语言:JavaScript

dev-master 2013-04-01 21:33 UTC

Unknown License e27658ef6c7d7f93372a27d5befb75cd75eb2e67

This package is not auto-updated.

Last update: 2024-09-23 12:05:14 UTC

README

这是一个用于使用HTML轻松创建精美演示的框架。 查看实时演示。

reveal.js 拥有丰富的功能，包括 嵌套幻灯片、Markdown内容、PDF导出、演讲者备注 和一个 JavaScript API。最佳浏览效果是在支持CSS 3D转换的浏览器中，但也提供了 回退机制，以确保您的演示在其他地方仍可查看。

在Wiki中阅读更多

  • 变更日志：最新的版本历史记录。
  • 示例：使用reveal.js创建的演示，添加您自己的！
  • 浏览器支持：浏览器支持的说明和回退机制。

rvl.io

幻灯片使用HTML或Markdown编写，但还有在线编辑器供喜欢传统用户界面的用户使用。在 www.rvl.io 上尝试一下。

说明

标记

标记层次结构需要是 <div class="reveal"> <div class="slides"> <section>，其中 <section> 代表一张幻灯片，可以无限重复。如果您在另一个 <section> 中放置多个 <section>，它们将显示为垂直幻灯片。垂直幻灯片中的第一个是其他幻灯片的“根”（在顶部），它将包含在水平序列中。例如

<div class="reveal">
	<div class="slides">
		<section>Single Horizontal Slide</section>
		<section>
			<section>Vertical Slide 1</section>
			<section>Vertical Slide 2</section>
		</section>
	</div>
</div>

Markdown

您可以使用Markdown编写幻灯片。要启用Markdown，请向您的 <section> 元素添加 data-markdown 属性，并将内容包装在以下示例中的 <script type="text/template"> 中。

这是基于 data-markdown 从 Paul Irish，它又使用了 showdown。敏感于缩进（避免混合制表符和空格）和换行符（避免连续的换行符）。

<section data-markdown>
	<script type="text/template">
		## Page title

		A paragraph with some text and a [link](http://hakim.se).
	</script>
</section>

外部Markdown

您可以将内容编写为单独的文件，并在运行时让reveal.js加载它。注意分隔符参数，它决定了如何在外部文件中分隔幻灯片。

<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>

配置

在您页面的末尾，您需要通过运行以下代码来初始化reveal。请注意，所有配置值都是可选的，默认值如下。

Reveal.initialize({

	// Display controls in the bottom right corner
	controls: true,

	// Display a presentation progress bar
	progress: true,

	// Push each slide change to the browser history
	history: false,

	// Enable keyboard shortcuts for navigation
	keyboard: true,

	// Enable the slide overview mode
	overview: true,

	// Vertical centering of slides
	center: true,

	// Loop the presentation
	loop: false,

	// Change the presentation direction to be RTL
	rtl: false,

	// Number of milliseconds between automatically proceeding to the
	// next slide, disabled when set to 0, this value can be overwritten
	// by using a data-autoslide attribute on your slides
	autoSlide: 0,

	// Enable slide navigation via mouse wheel
	mouseWheel: false,

	// Apply a 3D roll to links on hover
	rollingLinks: true,

	// Transition style
	transition: 'default' // default/cube/page/concave/zoom/linear/fade/none

});

请注意，新的默认垂直居中选项将与使用背景（cube 和 page）过渡的幻灯片不兼容。要恢复之前的行为，请将 center 设置为 false。

可以在初始化后使用 configure 方法更新配置。

// Turn autoSlide off
Reveal.configure({ autoSlide: 0 });

// Start auto-sliding every 5s
Reveal.configure({ autoSlide: 5000 });

演示文稿大小

所有演示文稿都有一个正常大小，即它们被创建时的分辨率。框架将根据此大小自动均匀缩放演示文稿，以确保所有内容都适合任何给定的显示或视口。

以下列出了与大小相关的配置选项列表，包括默认值。

Reveal.initialize({

	...

	// The "normal" size of the presentation, aspect ratio will be preserved
	// when the presentation is scaled to fit different resolutions. Can be
	// specified using percentage units.
	width: 960,
	height: 700,

	// Factor of the display size that should remain empty around the content
	margin: 0.1,

	// Bounds for smallest/largest possible scale to apply to content
	minScale: 0.2,
	maxScale: 1.0

});

依赖项

Reveal.js 不依赖于任何第三方脚本即可工作，但默认包含一些可选库。这些库按出现顺序作为依赖项加载，例如

Reveal.initialize({
	dependencies: [
		// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
		{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

		// Interpret Markdown in <section> elements
		{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
		{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },

		// Syntax highlight for <code> elements
		{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

		// Zoom in and out with Alt+click
		{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },

		// Speaker notes
		{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },

		// Remote control your reveal.js presentation using a touch device
		{ src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
	]
});

您可以使用相同的语法添加自己的扩展。以下属性适用于每个依赖项对象

  • src：要加载的脚本的路径
  • async：[可选] 标志表示脚本是否应在 reveal.js 开始后加载，默认为 false
  • callback：[可选] 脚本加载后要执行的函数
  • condition：[可选] 必须返回 true 才能加载脚本的函数

API

Reveal 类提供了一种最小化的 JavaScript API，用于控制导航和读取状态

// Navigation
Reveal.slide( indexh, indexv, indexf );
Reveal.left();
Reveal.right();
Reveal.up();
Reveal.down();
Reveal.prev();
Reveal.next();
Reveal.prevFragment();
Reveal.nextFragment();
Reveal.toggleOverview();

// Retrieves the previous and current slide elements
Reveal.getPreviousSlide();
Reveal.getCurrentSlide();

Reveal.getIndices(); // { h: 0, v: 0 } }

状态

如果您在一个 <section> 幻灯片上设置 data-state="somestate"，则在打开该幻灯片时，“somestate” 将作为类应用于文档元素。这允许您根据活动幻灯片应用广泛的样式更改。

您还可以通过 JavaScript 监听这些状态变化

Reveal.addEventListener( 'somestate', function() {
	// TODO: Sprinkle magic
}, false );

就绪事件

当 reveal.js 加载所有（同步）依赖项并准备好开始导航时，会触发 'ready' 事件。

Reveal.addEventListener( 'ready', function( event ) {
	// event.currentSlide, event.indexh, event.indexv
} );

幻灯片更改事件

每次幻灯片更改时（无论状态如何）都会触发 'slidechanged' 事件。事件对象包含当前幻灯片的索引值以及上一个和当前幻灯片的 HTML 节点引用。

一些库（如 MathJax（见 #226）会因幻灯片的转换和显示状态而困惑。通常，可以通过从回调中调用它们的更新或渲染函数来解决此问题。

Reveal.addEventListener( 'slidechanged', function( event ) {
	// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );

内部链接

链接幻灯片很容易。下面的第一个例子针对另一个幻灯片的索引，而第二个例子针对具有 ID 属性的幻灯片（<section id="some-slide">）

<a href="#/2/2">Link</a>
<a href="#/some-slide">Link</a>

您还可以通过在任何元素上附加以下类之一添加相对导航链接，类似于内置的 reveal.js 控制。请注意，当元素是有效的导航路由时，每个元素都会自动获得 enabled 类。

<a href="#" class="navigate-left">
<a href="#" class="navigate-right">
<a href="#" class="navigate-up">
<a href="#" class="navigate-down">
<a href="#" class="navigate-prev"> <!-- Previous vertical or horizontal slide -->
<a href="#" class="navigate-next"> <!-- Next vertical or horizontal slide -->

片段

片段用于突出显示幻灯片上的单个元素。每个具有 fragment 类的元素都将被遍历，然后再进入下一个幻灯片。以下是一个示例：http://lab.hakim.se/reveal-js/#/16

默认片段样式是从不可见开始并淡入。可以通过向片段附加不同的类来更改此样式

<section>
	<p class="fragment grow">grow</p>
	<p class="fragment shrink">shrink</p>
	<p class="fragment roll-in">roll-in</p>
	<p class="fragment fade-out">fade-out</p>
	<p class="fragment highlight-red">highlight-red</p>
	<p class="fragment highlight-green">highlight-green</p>
	<p class="fragment highlight-blue">highlight-blue</p>
</section>

可以通过包装它来连续应用同一元素上的多个片段，这将使文本在第一步中淡入，并在第二步中淡出。

<section>
	<span class="fragment fade-in">
		<span class="fragment fade-out">I'll fade in, then out</span>
	</span>
</section>

可以使用 data-fragment-index 属性控制片段的显示顺序。

<section>
	<p class="fragment" data-fragment-index="3">Appears last</p>
	<p class="fragment" data-fragment-index="1">Appears first</p>
	<p class="fragment" data-fragment-index="2">Appears second</p>
</section>

片段事件

当幻灯片片段被显示或隐藏时，reveal.js 会触发一个事件。

Reveal.addEventListener( 'fragmentshown', function( event ) {
	// event.fragment = the fragment DOM element
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
	// event.fragment = the fragment DOM element
} );

代码语法高亮

默认情况下，Reveal 配置了 highlight.js 用于代码语法高亮。下面是一个使用 clojure 代码的示例，它将被语法高亮。

<section>
	<pre><code>
(def lazy-fib
  (concat
   [0 1]
   ((fn rfib [a b]
        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
	</code></pre>
</section>

概述模式

按 "Esc" 键切换概述模式的开和关。在此模式下，您仍然可以在幻灯片之间导航，就像您在您的演示文稿上方 1,000 英尺处一样。概述模式包含一些 API 钩子。

Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );

// Toggle the overview mode programmatically
Reveal.toggleOverview();

全屏模式

只需按键盘上的 "F" 键即可以全屏模式显示您的演示文稿。按 "ESC" 键退出全屏模式。

PDF 导出

可以通过特殊的打印样式表将演示文稿导出为 PDF。此功能需要您使用 Google Chrome。以下是将演示文稿上传到 SlideShare 的示例： http://www.slideshare.net/hakimel/revealjs-13872948。

  1. 通过在页面中包含 css/print/pdf.css 来打开您的演示文稿。默认的索引 HTML 允许您在查询中添加 print-pdf 以包括样式表，例如： lab.hakim.se/reveal-js?print-pdf。
  2. 打开浏览器中的打印对话框（CMD+P）。
  3. 将 目的地 设置为 另存为 PDF。
  4. 将 布局 更改为 横向。
  5. 将 边距 更改为 无。
  6. 点击 保存。

Chrome Print Settings

演讲者备注

reveal.js 随附一个演讲者备注插件，可用于在单独的浏览器窗口中呈现每张幻灯片的备注。备注窗口还为您提供下一张即将出现的幻灯片的预览，因此即使您没有编写任何备注，也可能很有帮助。将 ?notes 添加到演示文稿 URL 或按键盘上的 's' 键以打开备注窗口。

默认情况下，备注使用标准 HTML 编写，见下文，但您可以将 data-markdown 属性添加到 <aside> 以使用 Markdown 编写。

<section>
	<h2>Some Slide</h2>

	<aside class="notes">
		Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
	</aside>
</section>

服务器端演讲者备注

在某些情况下，可能希望在您演示的设备上运行备注。基于 Node.js 的备注插件允许您使用与客户端类似的对等备注定义来执行此操作。通过添加以下依赖项包含所需的脚本：

Reveal.initialize({
	...

	dependencies: [
		{ src: 'socket.io/socket.io.js', async: true },
		{ src: 'plugin/notes-server/client.js', async: true }
	]
});

然后

  1. 安装 Node.js
  2. 运行 npm install
  3. 运行 node plugin/notes-server

复用

复用插件允许您的观众在自己的手机、平板电脑或笔记本电脑上查看幻灯片。当主导航幻灯片时，所有客户端将实时更新。在 http://revealjs.jit.su/ 上查看演示。

通过 Reveal.initialize 中的 multiplex 对象进行配置。要生成唯一的密钥和令牌值，请访问 revealjs.jit.su/token。下面是启用 multiplex 插件的示例配置：

Reveal.initialize({
	...

	// Generate a unique id and secret at revealjs.jit.su/token
	multiplex: {
		id: '',
		secret: '',
		url: 'revealjs.jit.su:80'
	},

	dependencies: [
		{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js', async: true },
		{ src: 'plugin/multiplex/client.js', async: true },
		{ src: 'plugin/multiplex/master.js', async: true },
	]
});

multiplex.secret 应仅配置在您希望控制所有客户端幻灯片导航的页面。多主配置有效，但如果您不希望观众能够控制您的幻灯片，请将密钥设置为 null。在此主/从设置中，您应该创建一个公开可访问的页面，密钥设置为 null，并包含您的密钥的保护页面。

您非常欢迎使用在 reveal.jit.su 运行的 socketio 服务器，但是可用性和稳定性不能保证。对于任何关键任务，我建议您运行自己的服务器。将其部署到 nodejitsu 或在您自己的环境中运行都很简单。

主题样式

该框架包含一些内置的主题

  • 默认：灰色背景，白色文字，蓝色链接
  • 米色：米色背景，深色文字，棕色链接
  • 天空：蓝色背景，细白文字，蓝色链接
  • 夜间：黑色背景，粗白文字，橙色链接
  • 衬线：卡布奇诺背景，灰色文字，棕色链接
  • 简单：白色背景，黑色文字，蓝色链接

每个主题都作为单独的样式表提供。要更改主题，您需要在 index.html 中将下面的 default 替换为您想要的主题名称

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

如果您想添加自己的主题，请参阅以下说明：/css/theme/README.md。

开发环境

reveal.js 使用基于任务的命令行构建工具 grunt.js (安装说明) 构建。安装 Node.js 和 grunt.js 后，您需要先在 reveal.js 根目录下运行 npm install。当依赖项安装完成后，您应该运行 grunt watch 以开始监控文件变更。

如果您想在未运行 grunt.js 的情况下自定义 reveal.js，可以修改 HTML 以指向未压缩的源文件（css/reveal.css 和 js/reveal.js）。

目录结构

  • css/ 核心样式，没有这些样式项目无法运行
  • js/ 如上所述，但用于 JavaScript
  • plugin/ 作为 reveal.js 扩展开发的组件
  • lib/ 所有其他第三方资产（JavaScript、CSS、字体）

许可证

MIT 许可

版权所有 (C) 2013 Hakim El Hattab，http://hakim.se