大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

nodeppt 使用笔记,补全作者没写的内容,让你爱上分享

安装

装有node的电脑,打开命令行

npm install nodeppt -g -d

安装完即可开始使用,在电脑上打开一个目录,新建一个 xxx.md 的文件

启动

在你 xxx.md 目录,打开命令行

nodeppt start

启动完成,这种和其他node模块使用方式都差不多,就不多说

xxx.md 的文件基本结构

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日

[slide]
// 第一页ppt
[slide]
// 第二页ppt

nodeppt 的基本写法

支持 markdowm 语法,具体大家去看 markdown 的教程

title: 演示
speaker: saohui
url: https://www.fenpeiduixiang.com
transition: zoomin

[slide]

# 标题演示

[slide]

* 无需列表
* 无需列表

[slide]

1. 无需列表
2. 无需列表

[slide]

皮肤类型

自己可以试试,看看张什么样,喜欢就用

  • colors
  • moon(默认)
  • blue
  • dark
  • green
  • light
image.png

转场动画类型

  • kontext
  • vkontext
  • circle
  • earthquake
  • cards
  • glue
  • stick
  • move
  • newspaper
  • slide
  • slide2
  • slide3
  • horizontal3d
  • horizontal
  • vertical3d
  • zoomin
  • zoomout
  • pulse

magic(子页面)

magic是在一页幻灯片中播放多个子页面,页面之间进行动效切换,但是slide不翻页(类似keynote的magicmove),使用[magic]标签包裹,子页面之间使用====间隔

写法
[slide]
[magic data-transition="earthquake"]

## 子页1

====

## 子页1

[/magic]
[magic]标签支持全部转场动效,效果比较好的有:
  • zoomin/zoomout
  • move
  • circle
  • earthquake
  • newspaper
  • cover-diamond
  • horizontal3d/horizontal
  • vertical3d
  • cover-circle

单页ppt上下布局

[slide]
## 主页面样式
### ----是上下分界线
----
nodeppt是基于nodejs写的支持 **Markdown!** 语法的网页PPT

列表单条动画

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

一级列表和二级列表是分开的,所以设置是分别设置

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>

给 markdown 语法里面添加 class 或 style

## 字体红色 {: style="color:red"}

[slide]

## 加一个class {:.a }
<style>
    .a {
        color: red
    }
</style>
[slide]

## 加一个Id {:#a }
<style>
    #a {
        color: red
    }
</style>
  • 使用:.class {:.class}
  • 使用:#id{:#id}
  • 组合使用:{:.class.class2 width="200px"}
  • 父元素样式使用&:{:&.class}

内部提供的 class

  • .columns1 /2/3/4 提供 flex 布局,在 html 混编的时候可以使用
  • 字体状态/颜色
    • .text-danger
    • .text-sucess
    • .text-primary
    • .text-warning
    • .text-info
    • .text-white
    • .text-dark
    • .blue
    • .blue2
    • .blue3
    • .gray
    • .gray2
    • .gray3
    • .red
    • .red2
    • .red3
    • .yellow
    • .yellow2
    • .yellow3
    • .green
    • .green2
    • .green3
  • label
    • .label.label-primary
    • .label.label-warning
    • .label.label-danger.label
    • .label-default.label
    • .label-success
    • .label.label-info
  • btn
    • .btn.btn-default
    • .btn.btn-lg
    • .btn-primary
    • .btn.btn-waring
    • .btn.btn-success
    • .btn.btn-danger
    • .btn.btn-lg
    • .btn-default
    • .btn.btn-xs
    • .btn-success
    • .btn.btn-sm
    • .btn-primary
    • .btn.btn-rounded
    • .btn.btn-waring
image.png

image.png

页面中添加笔记

[note]
这里是note,在页面的时候 按 N 可以查看
[/note]

快捷键

  • H 动画样式强调
  • N 看笔记
  • P 画笔
    • B/Y/R/G/M 更换颜色
    • 按 【1~4】 更换粗细
    • C 清空画笔
  • W 扩展宽度
  • O overview模式(像ppt的页面列表全部展开)
  • alt 在演示过程中使用alt+鼠标点击,则点击的地方就开始放大,再次alt+click则恢复原状
  • enter 在页面中输入数字,直接按 enter 会直接进入那一页

ps

  • 很多地方我也没写,比如回调函数、怎么双屏控制等,只写了简易教程,和一些作者没有写的 api,为了是方便自己使用时候记忆
  • 作者github使用说明书:https://github.com/ksky521/nodeppt