Nodeppt入坑

没错,又来入坑了。

昨天刚刚尝试了用reveal.js渲染Markdown的幻灯片,效果还行,但是每次都要在Html文档里面编辑,略嫌麻烦,强迫症患者的理想目标是,找到一个工具,在写好的MD文档之外,调用这个工具,即可渲染得到
PPT。而关于
PPT的风格主题、模板以及其他的,则可以在工具中指定参数。不过挺难找的,而当初也没好好的学学js,书看了不到一半就放弃了。今天就来试试这个自称最好的Nodeppt。
详细介绍见这里,gayhub的repo在这

开始

首先安装Nodeppt
注意,需要先安装NodeJS。

1
npm install -g nodeppt

然而在npm的过程中,fetch等了很久,网上说可以换成淘宝的源,后来试了一下,是挺快的,然后再切换回原来的源即可。不过还是安装失败。
不过问题在于没有加sudo
然后启动

1
2
3
4
# 获取帮助
nodeppt start -h
# 绑定端口
nodeppt start -p <port>

或者:

1
nodeppt start -p port -d path/for/ppts

如:

1
2
3
4
5
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通信(按Q键显示/关闭二维码,手机扫描,即可控制)
# socket须知:1、注意手机和pc要可以相互访问,2、防火墙,3、ip

启用socket控制有两种方式:

  • 使用url参数: http://127.0.0.1:8080/md/demo.md?controller=socket
  • 使用start命令行:nodeppt start -c socket
    在页面按键【Q】显示控制url的二维码和控制链接(需要隐身窗口打开),手机上可以使用左右touch滑动和摇一摇切换下一页。

最后创建Slide
可以直接用Nodeppt创建,就像hexo创建文档一样。
nodeppt create ppt-name
接下来就是按照提示输入基本信息,默认就是MD文件,如果需要Html,可以在名字后面加上后缀类型。

扩展语法

Nodeppt在支持Markdown基本语法之外,还有一些扩展。

配置

基本配置:

1
2
3
4
5
6
7
8
9
10
title: 这是演讲的题目
speaker: 演讲者名字
url: 可以设置链接
transition: 转场效果,例如:zoomin/cards/slide
files: /css/theme.moon.css,尾部的文件
theme: moon //皮肤
highlightStyle: monokai_sublime //hljs的样式
headFiles: //头部的文件
usemathjax: //如果为yes,则引入mathjax,默认不建议开启,导出文件太多
date: 2017726

另外有:colors-moon-blue-dark-green-light 共六套自带皮肤可供选择。
关于目录:可以直接在slide所在根目录添加img、css和js文件夹并添加到引用路径,Nodeppt默认可以找得到的。

排版
  • 使用[slide]标签来分页,如:
1
slide style="background-image:url('/img/bg1.png')"]
  • 使用---分界
  • 单条动画
1
2
3
4
5
使用方法:列表第一条加上 ` {:&.动画类型}``(注意空格)
* 上下左右方向键翻页
* 列表支持渐显动画 {:&.moveIn}
* 支持多级列表
* 这个动画是moveIn

目前支持的单条动画效果包括:

  • moveIn
  • fadeIn
  • bounceIn
  • rollIn
  • zoomIn
  • 转场动画
    Markdown的顶部配置可以设置,以方括号标注。
    magic是在一页幻灯片中播放多个子页面,页面之间进行动效切换,但是slide不翻页(类似keynote的magicmove),使用[magic]标签包裹,子页面之间使用====间隔。[magic]标签支持全部转场动效,效果比较好的有:
  • zoomin/zoomout
  • move
  • circle
  • earthquake
  • newspaper
  • cover-diamond
  • horizontal3d/horizontal
  • vertical3d
  • cover-circle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[slide]
[magic data-transition="earthquake"]
## 标题1
-----
<div class="columns3">
<img src="/assets/searchbox-fe-framework-and-product/Snip20151209_11.png" height="450">
<img src="/assets/searchbox-fe-framework-and-product/Snip20151209_10.png" height="450">
<img src="/assets/searchbox-fe-framework-and-product/Snip20151209_12.png" height="450">
</div>
====
## 标题2
-----
<div class="columns3">
<img src="/assets/searchbox-fe-framework-and-product/Snip20151209_11.png" height="450">
<img src="/assets/searchbox-fe-framework-and-product/Snip20151209_10.png" height="450">
<img src="/assets/searchbox-fe-framework-and-product/Snip20151209_12.png" height="450">
</div>
====
## 标题3
-----
<div class="columns3">
<img src="/assets/searchbox-fe-framework-and-product/Snip20151209_11.png" height="450">
<img src="/assets/searchbox-fe-framework-and-product/Snip20151209_10.png" height="450">
<img src="/assets/searchbox-fe-framework-and-product/Snip20151209_12.png" height="450">
</div>
[/magic]

如:[slide data-transition="vertical3d"]

  • 与Html语法混编
  • 内部回调
    除了使用Html的语法:[code][/code]之外,提供了格外的函数:
1
2
in-callback 切换来...
out-callback 切换走...
  • 表格
    与默认的Markdown语法类似。
  • 在线音乐以及其他的网页插入
    使用iframe语法插入

导出文件

可以选择到处Html用于网页展示或者pdf用于保存。但根据Nodeppt官方的说法,导出pdf不再支持,请使用chrome打印服务另存为pdf,url中添加?print=1,然后使用chrome打印 ctrl+P。不过主要目的自然是用于网页展示了,pdf随时随地可以生成。
导出Html文档:

1
2
3
4
5
6
7
8
9
# 获取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

导出目录下所有ppt,并且生成ppt list首页:

1
nodeppt path output/path -a

Demo演示

1
2
3
执行 nodeppt start
访问 http://127.0.0.1:8080/
在线demo: http://js8.in/nodeppt/

好了,写了这么多,终于要点题了。
在我尝试安装完成之后,发现Nodeppt并没有渲染成功,或许大概是已经停止更新了吧。
渲染之后,浏览器打开是酱紫的:

入坑完毕。
不过后来又找了个Marp,直接转换倒是很方便,可以导出为
PDF,但是没有找到导出html的功能,有点遗憾。
现在就连Markdown语法都是参差不齐,因为应用不同,所以语法扩展不同,希望能尽快形成一个标准,用md渲染幻灯片的技术普及民众。
不过最后还是下了个cleaver来渲染,基本上是可以了。效果在这里。

当然,我又卸载了这个cleaver。
因为他和clear命令太像了!!!害得我都没法用补全命令clear。
Aaron早逝,但Markdown正无声的占领着这个世界。

孤芳自赏,不必捧场。
分享