在线PPT演示工具---nodePPT 简介

Author Avatar
Trace 9月 14, 2017
  • 在其它设备中阅读本文章

简介

这可能是迄今为止最好的网页版演示库

正如作者所说，nodePPT是基于node.js开发的，用Markdown语法来编写的在线PPT工具，参见Github nodePPT。下面是官方demo，当然也是用nodePPT实现。

常用命令

安装

npm install -g nodeppt
如果出现被qiang的情况可以用下面这个命令：
npm install -g nodeppt --registry=http://r.cnpmjs.org

创建

支持markdown语法快速创建网页幻灯片。
nodeppt create ppt-name

启动

# 获取帮助
nodeppt start -h
# 绑定端口
nodeppt start -p <port>
nodeppt start -p 8090 -d path/for/ppts
# 绑定host，默认绑定0.0.0.0
nodeppt start -p 8080 -d path/for/ppts -H 127.0.0.1

启用socket控制

使用socket通信（按Q键显示/关闭二维码，手机扫描，即可控制）
socket须知：1、注意手机和pc要可以相互访问，2、防火墙，3、ip

方法1 使用url参数

http://127.0.0.1:8080/md/demo.md?controller=socket
在页面按键【Q】显示控制url的二维码和控制链接（需要隐身窗口打开），手机上可以使用左右touch滑动和摇一摇切换下一页

方法2 使用start命令行

nodeppt start -c socket
在页面按键【Q】显示控制url的二维码和控制链接（需要隐身窗口打开），手机上可以使用左右touch滑动和摇一摇切换下一页

打印&导出PPT

使用url?print=1访问页面，然后选择chrome的系统打印即可。 

# 获取generate帮助
nodeppt generate -h
# 使用generate命令
nodeppt generate filepath
# 导出全部，包括nodeppt的js、img和css文件夹
# 默认导出在publish文件夹
nodeppt generate ./ppts/demo.md -a
# 指定导出文件夹
nodeppt generate ./ppts/demo.md output/path -a

这里可以生成.html文件，但是必须是-a模式，不然单独打开时没有PPT的效果。

语法

总体来说，nodePPT用的是Markdown，在此基础上做了一些扩展。

基本配置

title: 演讲题目
speaker: 演讲者
url: 可以设置链接
transition: 转场效果，例如：zoomin/cards/slide，其他的可以参见github页面
files: 引入的js和css文件，多个以半角逗号隔开
theme: 皮肤样式
highlightStyle: 代码高亮样式，默认monokai_sublime
usemathjax: yes 启用MathJax渲染公式

单页配置语法

通过[slide]作为PPT分隔

背景

[slide style="background-image:url('/img/bg1.png')"]

单页动画

主要有以下模式：kontext，vkontext，circle，earthquake，cards，glue，stick，move，newspaper，slide，slide2，slide3，horizontal3d，horizontal，vertical3d，zoomin，zoomout，pulse等

[slide data-transition="vertical3d"]

转场回调

[slide data-on-leave="outcallback" data-on-enter="incallback"]
## 当进入此页，就执行incallback函数
## 当离开此页面，就执行outcallback函数

页面内配置语法

单条动画

使用方法：列表第一条加上{:&.动画类型}（注意空格），下面是示例代码，其他动画类型包括moveIn，fadeIn，bounceIn，rollIn，zoomIn： 

* 上下左右方向键翻页
    * 列表支持渐显动画 {:&.moveIn}
    * 支持多级列表
    * 这个动画是moveIn

页面内上下布局

[slide]
## 主页面样式
### ----是上下分界线
----
nodeppt是基于nodejs写的支持 **Markdown!** 语法的网页PPT
nodeppt：https://github.com/ksky521/nodeppt

页面内表格

### 市面上主要的css预处理器：less\sass\stylus
---
 |less| sass | stylus
:-------|:------:|-------:|--------
环境 |js/nodejs | Ruby | nodejs
扩展名 | .less | .sass/.scss | .styl
特点 | 老牌，用户多，支持js解析 | 功能全，有成型框架，发展快 | 语法多样，小众
案例/框架 | [Bootstrap](http://getbootstrap.com/) | [compass](http://compass-style.org) [bourbon](http://bourbon.io) |

转场效果

magic标签，转场效果有zoomin/zoomout,move,circle,earthquake,newspaper,cover-diamond,horizontal3d/horizontal,vertical3d,cover-circle等 

[slide]
[magic data-transition="效果"]
form code
===== #4个以上的=作为转换前后页面的分隔符
new code
[/magic]

其他属性

  • 字体分类 <span class="text-分类">text</span>
  • 字体颜色 <span class="颜色">text</span>
  • label分类 <span class="label label-分类">text</span>
  • href <a href="">text</a>
  • mark <mark>text</mark>
  • 左、右对齐 {:&.pull-right} 和 {:&.pull-right}
  • 引用块 > nodeppt可能是迄今为止最好用的web presentation <small>三水清</small> {:&.pull-right}
  • 代码高亮 <code class="javascript">code</code> 这里必须在配置中设置highlightStyle为特定风格，比如monokai_sublime

特色功能

iframe 效果

  • 可以嵌入网页等，在做demo的时候会相当有用 <iframe data-src="http://www.baidu.com" src="about:blank;"></iframe>

快速翻页

  • 输入页码，然后enter
  • 使用O键，开启纵览模式，然后翻页

动效样式强调

  • 官方文档说粗体和斜体，都可以有动效，但是我的实践中只有斜体有效，之后可能还要再研究一下
  • 按下【H】键查看效果

支持zoom.js

  • 增加了zoom.js的支持，在演示过程中使用alt+click，则点击的地方就开始放大，再次alt+click则回复原状

使用note笔记

  • 代码 [note]这是note[/note]
  • 按下键盘【N】键显示note
  • 如果使用多窗口控制，note会在控制窗口中出现，这个功能点个赞！

使用画笔

  • 按下键盘【P】键：按下鼠标左键，在此处乱花下看看效果。
  • 按下键盘【B/Y/R/G/M】：更换颜色
  • 按下【1~4】：更换粗细
  • 按下键盘【C】键：清空画板

PPT宽度变化

  • 按下键盘【W】键，切换到更宽的页面看效果，第二次按键返回
本文标题: 在线PPT演示工具---nodePPT 简介
原始链接: https://oyeblog.com/2017/use_nodeppt/
发布时间: 2017年09月14日 - 19时11分
最后更新: 2023年10月22日 - 15时06分
版权声明: 本站文章均采用CC BY-NC-SA 4.0协议进行许可。转载请注明出处！
Powered by Hexo
Theme - Material