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

Author Avatar
Travon 12月 15, 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 简介
原始链接: http://oyeblog.com/2017/use_nodeppt/
发布时间: 2017年12月15日 - 19时39分
最后更新: 2017年09月14日 - 13时46分
版权声明: 本站文章均采用CC BY-NC-SA 4.0协议进行许可。转载请注明出处!