Nodeppt使用教程

Nodeppt使用教程

安装

首先确保电脑安装了node.js
nodeppt是基于node.js制作的，未安装node.js无法运行nodeppt

此处附上node.js下载官网
下载|node.js 中文网

安装完成后，在命令行中输入以下代码安装nodeppt:

npm install -g nodeppt

安装之后：

• 输入nodeapp -v查看安装版本

• 输入nodeapp -h获得帮助

创建幻灯片

nodeppt总共三个指令：

1. nodeppt new 文件名.md
   • 使用官方模板创建新幻灯片
2. nodeppt new slide.md -t username/repo
   • 直接从 GitHub 模板创建新幻灯片
3. nodeppt serve 文件名.md
   • 启动本地服务器显示幻灯片
4. nodeppt build 文件名.md
   • 构建幻灯片

注：

• 构建幻灯片要在写好幻灯片之后，否则会报错

• 构建完成之后需要删除存放输出html页面的dist文件夹，否则无法再进行修改ppt

• 运行时报错可能是node.js版本太高，在命令行输入set NODE_OPTIONS=--openssl-legacy-provider修改编码方式

• 构建时插入图片，图片的url只能使用网址的方式从网络中插入，如果想要插入本地图片需要在项目构建完成之后修改生成的html中图片的url

制作幻灯片时的快捷键

• →/←/空格
  • 翻页
• END
  • 跳转到尾页
• HOME
  • 跳转到首页
• F
  • 全屏
• • 打开预览
• • 关闭预览
• N
  • 演讲者笔记
• 回车（ENTER）
  • 网格背景

nodeppt使用方式

nodeppt使用md文件编写页面，每个页面使用以下标签分割

<slide class="" :class="" >
内容

该标签以下的内容为该页面的内容

在md文档中嵌入的表格、代码块、图片等均会出现在ppt中

md文件头部引用格式

title: 此处填写题目
speaker: 此处填写演讲人
url: 此处填写地址
css:此处填写引用的css代码位置
js:此处填写使用的js的代码位置
plugins:此处填写要使用的插件

注：css和js的位置只能是网络位置

css样式

nodeppt中有已经写好的css样式，使用类来表示

字体排版样式

.text-landing
标题

.text-subtitle
副标题

.text-data
数据

.text-intro
介绍

.text-context
文本上下文

.text-cols
分割段落为左右两部分

…

背景颜色

.bg-primary
#44d

.bg-secondary
#67d

.bg-light
#edf2f7

body
#f7f9fb

.bg-black
#111

.bg-black-blue
#123

.bg-white
#fff

.bg-red
#c23

.bg-green
#077

.bg-blue
#346

.bg-purple
#62b

.bg-trans-dark
rgba(0,0,0,0.5)

.bg-trans-light
reba(255,255,255,0.2)

.bg-apple

…

背景颜色渐变

.bg-gradient-h
水平渐变

.bg-gradient-r
径向渐变

.bg-gradient-v
垂直渐变

背景图片

nodeppt中无法使用本地图片，想要使用图片需要设置背景图片的网址

.background
选中背景，继续使用其他css样式设置背景

.background-video
背景视频

.background-left
背景居左

.background-right
背景居右

.background-top
背景居上

.background-bottom
背景局下

.background-center-bottom

…

内容位置

.slide-top
居上

.slide-bottom
居下

.content-left
居左

.content-right
居右

.content-center
居中

文字位置

.text-pull-left
文字居左为一个文本框显示

.text-pull-right
文字居右为一个文本框显示

.aligncenter
文字居中对齐

.alignleft
文字居左对齐

.alignright
文字居右对齐

.vertical-align
垂直对齐

尺寸

尺寸在使用的时候如果在slide标签中，需要写在:class=“”中

.size-50

.size-40

…

同样写在:class=“”中的还有:

.frame

实现边框效果

动画

.bounce
弹跳

.swing
摆动

.flash
闪动

.pulse
脉冲

.shake
摇动

.bounceIn
弹入

.wobble
游移不定

.fadeInLeft
从左淡入

.flipInX
x轴翻转

.tada
惊讶

.slideInUp
向上滑动

.jello
果冻

.heartBeat
心跳

.fadeInUp
从上淡入

.lightSpeedIn
光速进入

.background.anim
背景图片向上移动

自行添加css样式

在slide中直接写style=“”

在文字后写大括号{style=“”}

元件(Components)

使用元件需要用:::将内容包裹住

例：

:::div

内容

:::

同一页面元件不同内容使用水平分割线区分

---

官方元件有以下几种：

flexblock

shadowbox

card

gallery

gallery-overlay

column

header

footer

可用html标签：

div

未知作用的css样式

.build

.text-shadow

.metrics

未知元件

cta

其他

.button 设置按钮

更多详细内容参见官网

nodeppt—这可能是迄今为止最好的网页版演示库