nodePPT - 讓你愛上做分享！

原創 杰克课堂 2018-08-21 20:42

nodePPT - 讓你愛上做分享！

This is a readme file in English

NPM
NPM

導出pdf不再支持，請使用chrome打印服務另存爲pdf，url中添加?print=1，然後使用chrome打印 ctrl+P

爲什麼選擇nodePPT

這可能是迄今爲止最好的網頁版演示庫

  • 基於GFM的markdown語法編寫
  • 支持html混排，再複雜的demo也可以做！
  • 支持多個皮膚：colors-moon-blue-dark-green-light
  • 實現watch功能nodeppt start -w
  • 支持20種轉場動畫，可以設置單頁動畫
  • 支持單頁背景圖片
  • 多種模式：overview模式，雙屏模式，socket遠程控制，搖一搖換頁，使用ipad/iphone控制翻頁更酷哦~
  • 可以使用畫板，雙屏同步畫板內容！可以使用note做備註
  • 支持語法高亮，自由選擇highlight樣式
  • 可以單頁ppt內部動畫，單步動畫
  • 支持進入/退出回調，做在線demo很方便
  • 支持事件update函數，查看demo
  • zoom.js：alt+click

demo

1.4 新功能

支持單個slide事件：build/enter/leave/keypress，事件統一在[slide]中使用data-on-X來指定一個全局函數名

事件說明如下

  • build：當觸發下一步操作的時候，會觸發這個事件，具有stop方法
  • keypress：在當前頁面按鍵觸發，具有stop方法
  • enter/leave：進入/離開 此頁面觸發的事件，無stop方法

build/keypress會在當前slide完全渲染後觸發，回調函數會接受一個event對象，如果想阻止默認事件（即翻頁，或者對應的快捷鍵），可以使用event對象的stop()方法；slide退場後事件解綁

使用舉例

示例1：進入頁面如果觸發翻頁事件，就會當前執行做轉場，做一些類似magicmove效果

[slide data-on-build="globalCallbackName"]
var count = 0;
function globalCallbackName(e){
    count++;
    if(count<2){
        //做一些頁面動效，或者轉場
        e.stop();//阻止默認事件，就不會跳轉
    }
}

示例2：代理空格按鍵事件

[slide data-on-keypress="globalCallbackName"]
function globalCallbackName(e){
    if(e.keyCode==32){
        //play();//觸發自定義的頁面效果
        e.stop();//阻止默認事件，則不會觸發nodeppt默認綁定的事件
    }
}

文件定位

對於nodeppt內部的文件，定位需要用根目錄的方式來寫，例如項目路徑是 slide，demo.md中的圖片使用：

![測試文件路徑](/img/demo.png)

對應的圖片路徑是 slide/img/demo.png

使用 nodeppt generate demo.md output -a 則生成後，圖片路徑是：output/img/demo.png

magic

magic是在一頁幻燈片中播放多個子頁面，頁面之間進行動效切換，但是slide不翻頁（類似keynote的magicmove），使用[magic]標籤包裹，子頁面之間使用====間隔

[magic]標籤支持全部轉場動效，效果比較好的有：

  • zoomin/zoomout
  • move
  • circle
  • earthquake
  • newspaper
  • cover-diamond
  • horizontal3d/horizontal
  • vertical3d
  • cover-circle
[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]

theme 自定義

感覺默認的模板不符合新意？可以支持自定義模板，查看theme.moon

自定義後的模板路徑在markdown的設置裏填寫：

title: 這是演講的題目
speaker: 演講者名字
url: 可以設置鏈接
transition: 轉場效果，例如：zoomin/cards/slide
files: /css/theme.moon.css，尾部的文件
theme: moon //皮膚
highlightStyle: monokai_sublime //hljs的樣式
headFiles: //頭部的文件
usemathjax: //如果爲yes，則引入mathjax，默認不建議開啓，導出文件太多
date: 2015年12月20日

另外有：colors-moon-blue-dark-green-light 共六套自帶皮膚可供選擇

theme: moon

or url?theme=moon

安裝

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

啓用socket控制

方法一：使用url參數
http://127.0.0.1:8080/md/demo.md?controller=socket

在頁面按鍵【Q】顯示控制url的二維碼和控制鏈接（需要隱身窗口打開），手機上可以使用左右touch滑動和搖一搖切換下一頁

方法二：使用start命令行
nodeppt start -c socket

在頁面按鍵【Q】顯示控制url的二維碼和控制鏈接（需要隱身窗口打開），手機上可以使用左右touch滑動和搖一搖切換下一頁

啓用postMessage控制

默認使用postMessage多窗口控制，打開方法：

http://127.0.0.1:8080/md/demo.md?_multiscreen=1

事件綁定

使用函數Slide.on，目前支持update函數，即轉場後的回調。示例代碼：

Slide.on('update', function(i, itemIndex, cls) {
//接受三個參數：
//* 當前slide的index
//* itemIndex當前slide進入的第幾個build動畫，從1開始
//* 方向pageup/pagedown
    Puff.add('#FFC524' /*colors[i % 6]*/ , ctx, 20, 700, width / 2, height / 2, width / 1.8, 400);
    clearInterval(timer);
    //第十三個有動效
    if (i === 13 || i === 14) {
        timer = setInterval(function() {
            Puff.draw(1);
        }, 1E3 / FPS);
    }

})

demo中第13張使用回調做了魔幻翻頁效果

打印/導出ppt

這麼高端大氣上檔次的ppt，怎麼能不導出分享給大家呢？？

使用url?print=1訪問頁面，然後選擇chrome的系統打印即可

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 output/path -a

導出目錄下所有ppt，並且生成ppt list首頁：

nodeppt path output/path -a

markdown語法

nodeppt是支持marked語法的，但是爲了製作出來更加完美的ppt，擴展了下面的語法

配置

基本配置如下：

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')"]
# 這是個有背景的傢伙
## 我是副標題

單頁ppt上下佈局

[slide]
## 主頁面樣式
### ----是上下分界線
----
nodeppt是基於nodejs寫的支持 **Markdown!** 語法的網頁PPT

nodeppt：https://github.com/ksky521/nodePPT

代碼格式化

語法跟Github Flavored Markdown 一樣~

單條動畫

使用方法：列表第一條加上 ` {:&.動畫類型}“（注意空格）

* 上下左右方向鍵翻頁
    * 列表支持漸顯動畫 {:&.moveIn}
    * 支持多級列表
    * 這個動畫是moveIn

目前支持的單條動畫效果包括：

  • moveIn
  • fadeIn
  • bounceIn
  • rollIn
  • zoomIn

單頁動畫設置

在md文件，頂部 配置 可以設置全局轉場動畫，如果要設置單頁的轉場動畫，可以通過下面的語法

[slide data-transition="vertical3d"]
## 這是一個vertical3d的動畫

插入html代碼

如果需要完全diy自己的ppt內容，可以直接使用 html標籤，支持markdown和html混編。例如：

<div class="file-setting">
    <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語法外，還提供了enter和outcallback，分別用於：切入（切走）到當前ppt，執行的js函數名。例如：

[slide data-on-leave="outcallback" data-on-enter="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) |

插入iframe

使用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}
## 使用方法：&#91;slide style="background-image:url('/img/bg1.png')"&#93;

[slide]

## 主頁面樣式
### ----是上下分界線
----

nodeppt是基於nodejs寫的支持 **Markdown!** 語法的網頁PPT

nodeppt：https://github.com/ksky521/nodePPT

[slide]

什麼？這些功能還不夠用？

極客模式：查看源碼的nodeppt.js，相信你會找到牛逼的手機互動（搖一搖換頁）功能

查看項目目錄ppts獲取更多幫助信息

更多demo，查看 ppts 目錄的demo

查看幫助

nodeppt -h
# 任何命令都可以輸入-h查看幫助
nodeppt start -h

demo演示 & 使用方法

Thanks

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Markdown

步荀仙 2019-02-22 21:10:32

多角度認識markdown

z00w00 2019-02-22 21:02:20

Markdown

無名小卒 2019-02-22 19:52:18

markdown常用語法

Lee_吉 2019-02-22 18:51:39

微信小程序小技巧系列《一》幻燈片，tab導航切換

小程序聯盟 2019-02-22 21:32:59

讓圖片的個性化設置“留下來”

天翼博雅 2019-02-22 21:17:32

在演示文稿中控制視頻播放效果

天翼博雅 2019-02-22 21:17:27

如何在PowerPoint2007製造課件免費ppt模板下載

znilpb 2019-02-22 20:32:27

PowerPoint巧妙確定圓心的技巧商務ppt模板

znilpb 2019-02-22 20:32:24

PowerPoint2010幻燈片組織爲邏輯節

znilpb 2019-02-22 20:32:24

PowerPoint2010教程之創建視頻ppt模板素材

itbtje 2019-02-22 18:24:23

如何設置ppt，使講演者看到備註，而觀衆看不到

nono86926 2019-02-23 00:37:50

ppt中只有聲音沒有圖像處理

cnzqf 2019-02-22 23:52:46

文檔資源搜索小工具 - 支持PDF,DOC,PPT,XLS

JKol 2019-02-22 22:28:35

PPT文件太大了，怎麼在線壓縮的呢

qingnai 2019-02-22 20:59:09