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

2018-08-26 本文已影响21人高少辉_骚辉

安装

装有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