JS学习笔记 - Reveal.js

文件结构

• 拷贝markdown.js和marked.js到和*.md同级的目录下
• 在html中head部分添加以显示中文字符

Dependencies

• 使用alt+click缩放需要：{ src: 'plugin/zoom-js/zoom.js', async:true}
• { src: 'plugin/math/math.js', async: true }

使用

0. 复制文件fontawesome-all.min.css/toolbar.css/screenfull.min.css/webfonts文件夹（放在同一级目录下，如果不在同一级目录需要修改内部代码）
1. 在head引入依赖：toolbar.css主要用于控制按钮样式，fontawesome.all.css主要是引入了一个用文字生成图标的库，参考Font Awesome，screenfull.min.js是主要全屏代码

<link rel="stylesheet" type="text/css" href="files/toolbar.css">
<link rel="stylesheet" type="text/css" href="files/fontawesome-all.min.css">
<script type="text/javascript" src="files/screenfull.min.js">script>

2. (reveal.js项目)在页面中添加按钮：在标签之后添加html代码

<div class="reveal-toolbar reveal-toolbar-bottom"><a class="reveal-toolbar-button" href="#"><i class="fa fa-expand" id="fullscreen-btn">i>a>div>

3. 给按钮注册响应事件

<script type="text/javascript">

	var btn = document.getElementById('fullscreen-btn');
	var cb = function() { 
						if (screenfull.enabled)
							screenfull.toggle(document.documentElement);
						};
	btn.onclick = function(event) {
			event.preventDefault();
			cb(event);
		};

	screenfull.on('change', function() {
		var icon = document.getElementById("fullscreen-btn");
		icon.classList.remove(screenfull.isFullscreen ? 'fa-expand' : 'fa-compress');
		icon.classList.add(screenfull.isFullscreen ? 'fa-compress' : 'fa-expand');
	});
script>

• 显示编号：slideNumber: true,或者slideNumber: 'c/t'显示当前和总页码

• 自动播放：autoSlide: 1000,

• 幻灯片切换动画：transition: ‘slide’，none/fade/slide/convex/concave/zoom

• 设置幻灯片背景图片：parallaxBackgroundImage: 'https://',
  设置大小parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px"

• 设置幻灯片大小（相对的）

• 可以在首页选择Theme，并设置开始时跳过这一页，参考 Autodesk Forge VIewer

注意

• 页面分割最好自定义用#---#，防止表格等解析出现错误

• 最好一级标题作为PPT题目，每页标题用二级

• 行间公式$$equ$$解析错误

Reveal-md

---
title: reveal-md使用笔记
separator: 
verticalSeparator: 
---

• 直接cmd运行reveal-md会在浏览器中罗列当前文件夹中的所有md文件，可以直接点击打开相应的文件

功能相关语法

• 用---和前后空行分页
  最好用其他横向和总想分割符号，然后指定：

    separator: 
    verticalSeparator: 
  

注意由于sublime中自动添加注释会在s和v的前后各加一个空格，所以应该注意对应

• fragment参考./demo/sub/c.md
• 章节之间的链接以及引用外部其他文件，参考./demo/sub/deep/d.md
• 页内引用？？
• 用Note: xxxx添加注释，可按s键，在speaker mode中看到
• 快捷键绑定，如下代码把tab绑定成向右翻页，enter绑定成向左翻页：

  Reveal.configure({
            keyboard:{
                9: "right",//tab键
                13: "left" //enter键
            }
          });
  Reveal.initialize(options);
  

• 其它

添加插件

全屏插件

0.复制文件fontawesome-all.min.css/toolbar.css/screenfull.min.css/webfonts文件夹（放在同一级目录下，如果不在同一级目录需要修改内部代码）
1.在head引入依赖：toolbar.css主要用于控制按钮样式，fontawesome.all.css主要是引入了一个用文字生成图标的库，参考Font Awesome，screenfull.min.js是主要全屏代码

<link rel="stylesheet" type="text/css" href="files/toolbar.css">
<link rel="stylesheet" type="text/css" href="files/fontawesome-all.min.css">
<script type="text/javascript" src="files/screenfull.min.js">script>

2.(reveal.js项目)在页面中添加按钮：在标签之后添加html代码

<div class="reveal-toolbar reveal-toolbar-bottom">
   <a class="reveal-toolbar-button" href="#">
      <i class="fa fa-expand" id="fullscreen-btn">i>
   a>
div>

3.给按钮注册响应事件

<script type="text/javascript">

	var btn = document.getElementById('fullscreen-btn');
	var cb = function() { 
						if (screenfull.enabled)
							screenfull.toggle(document.documentElement);
						};
	btn.onclick = function(event) {
			event.preventDefault();
			cb(event);
		};

	screenfull.on('change', function() {
		var icon = document.getElementById("fullscreen-btn");
		icon.classList.remove(screenfull.isFullscreen ? 'fa-expand' : 'fa-compress');
		icon.classList.add(screenfull.isFullscreen ? 'fa-compress' : 'fa-expand');
	});
script>

注意事项

• md文件路径名中不能有中文
• md文件名不能包含空格
• md文件路径从磁盘开始的绝对路径打不开
• 自己改写HTML代码时，应注意：toolbar.js应该在reveal.js之后，否则出现Reveal未定义的错误

参考

• 2D Transforms 101[Demo]：参考整体布局（主要是字号）、公式、表格、强调用的外框、动画等，非常值的参考

• How you can ditch PowerPoint and build better slides with Jupyter and Reveal.js

• Autodesk Forge VIewer[Demo]：Autodesk提供了一个三维接口（？），可以在线预览三维模型、爆炸图、切面图等

• 3D-UI-XML3D[Demo]：嵌入的简单3D模型和动画

• WEBGL with thress js

• 更多参考reveal.js-Example presentations