HTML5幻灯片库reveal.js使用

醉美新疆 發表於 2020-2-4 10:30:00

<h2>介绍</h2>
<code>reveal.js</code>是一个用于实现幻灯片效果的库。使用该库。 github地址：github 提供了页面编辑功能：slides.com 官方demo: demo 我自己做的PPT地址：ppt（建议使用Chrome查看）
<h2>特点</h2>
<code>reveal.js</code>有一下几个特点：
<ul>
<li>
支持标签来区分每一页幻灯片

</li>
<li>
可以使用markdown来写内容

</li>
<li>
支持pdf的导出

</li>
<li>
支持演说注释

</li>
<li>
提供JavaScript API来控制页面

</li>
<li>
提供了多个默认主题和切换方式

</li>
<li>自适应移动端和PC端</li>

</ul>
<h2>安装</h2>
<ol>
<li>
从reveal.js上下载压缩包，并解压

</li>
<li>
进入<code>reveal.js</code>文件夹，直接修改<code>index.html</code>文件就可以

</li>
<li>
编辑后好，用浏览器打开html页面就可以看到PPT的内容。

</li>

</ol>
必需的文件只有这几个：
<img src="https://img2018.cnblogs.com/i-beta/1365470/202002/1365470-20200204100054038-1085337860.png" alt="" width="570" height="163">
<h2>使用方法</h2>
<h3>整体布局</h3>
幻灯片的内容需要包含在<code><div class="reveal"> <div class="slides"></code>的标签中。 一个<code>section</code>是一页幻灯片。当<code>section</code>包含在<code>section</code>中时，是一个纵向的幻灯片。 怎么理解呢？可以这样理解：横向的幻灯片代表一章，纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的，而纵向的幻灯片是上下切换的。For example:
<div class="cnblogs_code">
<pre><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></pre>
</div>
<h3>标题和正文</h3>
<code>section</code>中的内容就是幻灯片的内容，你可以使用<code>h2</code>标签表示<code>title</code>, <code>p</code>表示内容。需要红色的字体可以直接设置<code>style</code>的<code>color</code>为<code>red</code>。 当某一页需要特殊背景色，可以使用<code>data-background</code>在<code>section</code>上设置, <code>data-background-transition</code>表示背景的过渡效果。For example:
<div class="cnblogs_code">
<pre><section data-background-transition="zoom" data-background="#dddddd"></pre>
</div>
如果需要正文一段一段出现。可以使用<code>fragment</code>。For Example:
<div class="cnblogs_code">
<pre><p class="fragment"></p></pre>
</div>
<h3>代码高亮</h3>
<code>reveal.js</code>使用<code>highlight.js</code>来支持代码高亮。可以直接写code标签来实现, <code>data-trim</code>表示去除多余的空格，<code>data-noescape</code> 来避免自动转义，For Example:
<div class="cnblogs_code">
<pre><pre><code data-trim>
console.log('hello reveal.js!');
</code></pre></pre>
</div>
<h3>注释</h3>
在演说时，会用到注释，对于注释，可以通过<aside class="notes">来实现。For Example:
<div class="cnblogs_code">
<pre><aside class="notes">
这里是注释。
</aside></pre>
</div>
在幻灯片页面，按下<code>s</code>键，就可以调出注释页面，注释页面包含了当前幻灯片，下一章幻灯片，注释，以及幻灯片播放时间。
<h3>使用markdown</h3>
<code>reveal.js</code>不仅支持html表示来实现内容，还可以通过<code>markdown</code>来实现内容。使用<code>markdown</code>实现内容时，需要对<code>section</code>标示添加<code>data-markdown</code>属性，然后将<code>markdown</code>内容写到一个<code>text/template</code>脚本中。For Example:
<div class="cnblogs_code">
<pre><section data-markdown>
<script type="text/template">
 ## Page title

 A paragraph with some text and a (http://hakim.se).
</script>
</section></pre>
</div>
背景色，<code>fragment</code>功能的实现，可以通过注释来实现。For Example:
<div class="cnblogs_code">
<pre><section data-markdown>
<script type="text/template">

 - Item 1 
 - Item 2 
</script>
</section></pre>
</div>
<h3>引入md文件</h3>
<code>reveal.js</code>可以引用一个外置的<code>markdown</code>文件来解析。For Example:
<div class="cnblogs_code">
<pre><section data-markdown="example.md"
 data-separator="^\n\n\n"
 data-separator-vertical="^\n\n"
 data-separator-notes="^Note:"
 data-charset="utf-8">
</section></pre>
</div>
对<code>section</code>添加 <code>data-separator-notes="^Note:"</code>属性，就可以指定<code>Note:</code>后面的内容为当前幻灯片的注释。For Example:
<div class="cnblogs_code">
<pre># Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.</pre>
</div>
一个<code>markdown</code>文件中可以连续包含多个章内容。可以在<code>section</code>中通过属性<code>data-separator</code>, <code>data-separator-vertical</code>来划分章节。For Example:
<div class="cnblogs_code">
<pre><section data-separator="---" data-separator-vertical="--">
<script type="text/template">
# 主题1
- 主题1-内容1
- 主题1-内容2
--
## 主题1-内容1
内容1-细节1
--
## 主题1-内容2
内容1-细节2
---
# 主题2
</script>
</section></pre>
</div>
<h3>嵌入媒体</h3>
嵌入的 HTML5 <code><video></code>/<code><audio></code> 和 YouTube iframe，会在幻灯片切出时自动暂停播放，通过给元素添加 <code>data-ignore</code> 属性可以禁止该行为。
给媒体元素添加 <code>data-autoplay</code> 属性，则在幻灯片显示时媒体将自动播放：
<div class="cnblogs_code">
<pre><video data-autoplay src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></pre>
</div>
<h3>图像背景</h3>
背景图像默认会自动调整大小以覆盖整个幻灯片，可设置的选项：
<div class="cnblogs_code">
<pre><section data-background-image="http://example.com/image.png">
<h2> 图像背景 </h2>
</section>
<section data-background-image="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
<h2> 背景图像尺寸为 100 像素，且平铺模式为重复 </h2>
</section></pre>
</div>
<h3>内部跳转</h3>
幻灯片间的跳转十分简单，下面第一个例子指定的是目标幻灯片的索引，第二个例子指定的是目标幻灯片的 ID 属性
<div class="cnblogs_code">
<pre><a href="#/2/1"> 跳转到第 3 个横向幻灯片的第 2 个纵向幻灯片 </a>
<a href="#/some-slide"> 跳转到 ID 为 some-slide 的幻灯片 </a></pre>
</div>
<h3>PDF导出</h3>
1.给演示文稿的 URL 加上 <code>print-pdf</code> 参数，如：http://localhost:8000/?print-pdf#/ 
2. 打开浏览器的打印面板 (CTRL/CMD+P)
3. Destination（目标打印机） 修改为 Save as PDF（另存为 PDF）。
也可使用 decktape（一个将 HTML5 演示文稿导出为高质量 PDF 的框架）项目代替。
<h3>主题</h3>
框架带有几个不同的主题：
<ul>
<li>black：黑色背景，白色文本，蓝色链接（默认主题）</li>
<li>white：白色背景，黑色文本，蓝色链接</li>
<li>league：灰色背景，白色文本，蓝色链接（reveal.js 3.0.0 之前版本的默认主题）</li>
<li>beige：米黄色背景，暗色（#333）文本，棕色链接</li>
<li>sky：蓝色背景，暗色文本，蓝色链接</li>
<li>night：黑色背景，亮色（#eee）文本，橙色链接</li>
<li>serif：咖啡色背景，灰色文本，褐色链接</li>
<li>simple：白色背景，黑色文本，蓝色链接</li>
<li>solarized：奶油色背景，深绿色文本，蓝色链接</li>
</ul>
每个主题都是一个单独的样式文件，修改主题只需把 index.html 的主题样式中的 black 替换为想要的主题名即可：
<div class="cnblogs_code">
<pre><link rel="stylesheet" href="css/theme/black.css" id="theme"></pre>
</div>
如果要增加自定义主题，请参考：/css/theme/README.md。
<h3>引入依赖</h3>
Reveal.js 的部分功能需要引入自带的第三方库，可在初始化时传入依赖项，运行时会自动加载。
<div class="cnblogs_code">
<pre>Reveal.initialize({
dependencies: [
// classList 跨浏览器支持 - https://github.com/eligrey/classList.js/
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },

// 解析 <section> 元素里的 Markdown 内容
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '' ); } },

// <code> 元素语法高亮
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

// Alt+click 缩放点击元素
{ src: 'plugin/zoom-js/zoom.js', async: true },

// 演讲备注
{ src: 'plugin/notes/notes.js', async: true },

// 数学公式
{ src: 'plugin/math/math.js', async: true }
]
});</pre>
</div>
自定义库也可以使用该方式加载。 依赖项属性：
<ul>
<li>src: 脚本路径</li>
<li>async: [可选] 异步，是否允许 reveal.js 执行后再加载脚本，默认值为 false</li>
<li>callback: [可选] 回调函数，脚本加载完成后执行</li>
<li>condition: [可选] 条件函数，返回 true 时才会加载脚本</li>

</ul>
<h3>自动播放</h3>
演示文稿可以设置为自动播放，只需告诉框架自动切换的时间间隔（毫秒）：
<div class="cnblogs_code">
<pre>// 每 5 秒自动切换下一张幻灯片
Reveal.configure({
autoSlide: 5000
});</pre>
</div>
在手动切换分段或幻灯片后会暂停自动播放，也可以按 a 键来暂停或恢复自动播放。
<h3>配置初始项</h3>
需在页面底部初始化 reveal，所有配置项均为可选，默认值如下：
<div class="cnblogs_code">
<pre>Reveal.initialize({

// 在右下角显示控制面板
controls: true,

// 显示演示进度条
progress: true,

// 显示幻灯片页码
// 可使用代码 slideNumber: 'c/t'，表示 '当前页/总页数'
slideNumber: false,

// 幻灯片切换时写入浏览器历史记录
history: false,

// 启用键盘快捷键
keyboard: true,

// 启用幻灯片概览
overview: true,

// 幻灯片垂直居中
center: true,

// 在触屏设备上启用触摸滑动切换
touch: true,

// 循环演示
loop: false,

// 演示方向为右往左，即向左切换为下一张，向右切换为上一张
rtl: false,

// 打乱幻灯片顺序
shuffle: false,

// 启用幻灯片分段
fragments: true,

// 演示文稿是否运行于嵌入模式（如只占页面的一部分）
// 译者注：与触屏相关
// false：所有在演示文稿上触发的 "touchmove" 的默认行为都会被阻止
// true：只有在 "touchmove" 触发了演示文稿事件时才会阻止默认行为
embedded: false,

// 是否在按下 ? 键时显示快捷键帮助面板
help: true,

// 演讲备注是否对所有人可见
showNotes: false,

// 两个幻灯片之间自动播放的时间间隔（毫秒），当设置为 0 时，则禁止自动播放。
// 该值可以被幻灯片上的 `data-autoslide` 属性覆盖
autoSlide: 0,

// 允许停止自动播放
// 在手动切换分段或幻灯片后暂停自动播放
// 按 a 键暂停或恢复自动播放
autoSlideStoppable: true,

// 使用该函数执行自动播放操作
 autoSlideMethod: Reveal.navigateNext,

// 启用鼠标滚轮切换幻灯片，作用与 SPACE 相同
mouseWheel: false,

// 在移动设备上隐藏地址栏
hideAddressBar: true,

// 在 iframe 预览弹框中打开链接
previewLinks: false,

// 切换过渡效果
// none-无/fade-渐变/slide-飞入/convex-凸面/concave-凹面/zoom-缩放
transition: 'slide', // none/fade/slide/convex/concave/zoom

// 切换过渡速度
// default-中速/fast-快速/slow-慢速
transitionSpeed: 'default', // default/fast/slow

// 背景切换过渡效果
backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom

// 预加载幻灯片数
viewDistance: 3,

// 视差背景图
parallaxBackgroundImage: '', // 示例："'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

// 视察背景图尺寸
parallaxBackgroundSize: '', // CSS 写法，示例："2100px 900px"（目前只支持像素值，不支持 % 和 auto）

// 相邻两张幻灯片间，视差背景移动的像素值
// - 如果不设置则自动计算
// - 当设置为 0 时，则禁止视差动画
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null

});</pre>
</div>
 
 
参考链接：
1. PalmerBlog-RevealJs(Slide演示工具)中文文档
2. segmentfault-chenhao_ch-HTML5幻灯片库reveal.js使用

</div>
<div id="MySignature" role="contentinfo">
个性签名：时间会解决一切 
来源：https://www.cnblogs.com/lfri/p/12258515.html

頁: [1]

琼殿技术论坛's Archiver

HTML5幻灯片库reveal.js使用