使用nodejs寫的網絡幻燈片：nodePPT
nodePPT 是使用nodejs寫的網絡幻燈片。
為什么選擇nodePPT
-
基于GFM的markdown語法編寫
-
支持html混排，再復雜的demo也可以做！
-
支持18種轉場動畫，可以設置單頁動畫
-
支持單頁背景圖片
-
多種模式：overview模式，雙屏模式，socket遠程控制，搖一搖換頁，使用ipad控制做分享更酷哦~
-
可以使用畫板，可以使用note做備注
-
支持語法高亮，自由選擇highlight樣式
-
可以單頁ppt內部動畫，單步動畫
-
支持進入/退出回調，做在線demo很方便
demo
安裝
npm install -g nodeppt
shell使用
啟動
# 獲取幫助 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通信（按Q鍵顯示/關閉二維碼，手機掃描，即可控制） # socket須知：1、注意手機和pc要可以相互訪問，2、防火墻，3、ip nodeppt start -c socket # 不加-c默認使用postMessage，窗口聯動，即list頁面【多窗口】鏈接
nodeppt start -c socket
在頁面按鍵【Q】顯示控制url的二維碼和控制鏈接（需要隱身窗口打開），手機上可以使用左右touch滑動和搖一搖切換下一頁
http://127.0.0.1:8080/md/demo.md?controller=socket
在頁面按鍵【Q】顯示控制url的二維碼和控制鏈接（需要隱身窗口打開），手機上可以使用左右touch滑動和搖一搖切換下一頁
默認使用postMessage多窗口控制，打開方法：
http://127.0.0.1:8080/md/demo.md?_multiscreen=1
這么高端大氣上檔次的ppt，怎么能不導出分享給大家呢？？
導出ppt有兩種，一種是pdf版，一種是html版
pdf版
需要安裝 phantomJS 。
# 安裝phantomjs，如果安裝了，請忽略 npm install -g phantomjs # 啟動nodeppt server nodeppt start # 導出文件 nodeppt pdf http://127.0.0.1:8080/md/demo.md -o a.pdf
html版
# 獲取generate幫助 nodeppt generate -h # 使用generate命令 nodeppt generate filepath # 導出全部，包括nodeppt的js、img和css文件夾 # 默認導出在publish文件夾 nodeppt generate ./ppts/demo.md -a # 指定導出文件夾 nodeppt generate ./ppts/demo.md -a -o output/path
導出目錄下所有ppt，并且生成ppt list首頁：
nodeppt path -o output/path -a
#### markdown語法 nodeppt是支持**marked**語法的，但是為了制作出來更加完美的ppt，擴展了下面的語法 #### 配置 基本配置如下： ```markdown title: 這是演講的題目 speaker: 演講者名字 url: 可以設置鏈接 transition: 轉場效果，例如：zoomin/cards/slide files: 引入js和css的地址，如果有的話~自動放在頁面底部
目錄關系：可以在md同級目錄下創建img、js、css等文件夾，然后在markdown里面引用，nodeppt默認會先查找md文件同級目錄下面的靜態資源，沒有再找默認的assets文件夾下靜態內容
支持的轉場動畫包括：
-
kontext
-
vkontext
-
circle
-
earthquake
-
cards
-
glue
-
stick
-
move
-
newspaper
-
slide
-
slide2
-
slide3
-
horizontal3d
-
horizontal
-
vertical3d
-
zoomin
-
zoomout
-
pulse
如果設置單頁動畫，請參考下面的單頁動畫設置部分~
通過[slide]作為每頁ppt的間隔，如果需要添加單頁背景，使用下面的語法：
[slide style="background-image:url('/img/bg1.png')"]
# 這是個有背景的家伙
## 我是副標題
[slide] ## 主頁面樣式 ### ----是上下分界線 ---- nodeppt是基于nodejs寫的支持 **Markdown!** 語法的網頁PPT nodeppt：https://github.com/ksky521/nodePPT
語法跟Github Flavored Markdown 一樣~
單頁動畫設置
在md文件，頂部 配置 可以設置全局轉場動畫，如果要設置單頁的轉場動畫，可以通過下面的語法
[slide data-transition="vertical3d"] ## 這是一個vertical3d的動畫
插入html代碼
如果需要完全diy自己的ppt內容，可以直接使用 html標簽，支持markdown和html混編。例如：
<div>
<p>這是html</p>
</div>
<p id="css-demo">這是css樣式</p>
<p>具體看下項目中 ppts/demo.md 代碼</p>
<script>
function testScriptTag(){
}
console.log(typeof testScriptTag);
</script>
<style>
#css-demo{
color: red;
}
</style> 轉場回調
前端的ppt，難免會在頁面中演示一些demo，除了上面的插入html語法外，還提供了incallback和outcallback，分別用于：切入（切走）到當前ppt，執行的js函數名。例如：
[slide data-outcallback="outcallback" data-incallback="incallback"] ## 當進入此頁，就執行incallback函數 ## 當離開此頁面，就執行outcallback函數
### 市面上主要的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) |
使用data-src作為iframe的url，這樣只有切換到當前頁才會加載url內容~
<iframe data-src="http://www.baidu.com" src="about:blank;"></iframe>
類似下面的語法：(更多用法查看ppts/demo.md文件)
title: nodeppt markdown 演示
speaker: Theo Wang url: https://github.com/ksky521/nodePPT
transition: zoomin [slide]
# 封面樣式
## h1是作為封面用的，內部的都用h2
[slide style="background-image:url('/img/bg1.png')"]
# 背景圖片 {:&.flexbox.vleft}
## 使用方法：[slide style="background-image:url('/img/bg1.png')"]
[slide]
## 主頁面樣式
###
----是上下分界線
----
nodeppt是基于nodejs寫的支持
**Markdown!**
語法的網頁PPT
nodeppt：https://github.com/ksky521/nodePPT
[slide]
什么？這些功能還不夠用？
極客模式：查看源碼的nodeppt.js，相信你會找到牛逼的手機互動（搖一搖換頁）功能
查看項目目錄ppts獲取更多幫助信息 更多demo，查看 ppts 目錄的demo
nodeppt -h # 任何命令都可以輸入-h查看幫助 nodeppt start -h
-
執行
nodeppt start -
在線demo： http://qdemo.sinaapp.com/
參考：