馨客栈教程

关注分享,关注导航,关注馨客栈

「馨客栈分享」网页版演示库nodePPT

文章最后更新时间: 2019-10-23

1.nodePPT介绍和安装

官网:nodePPT

开源地址:nodePPT

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

最佳体验是 chrome 浏览器,本来就是给做演示用的

下面是全局安装的命令

npm install -g nodeppt

2.nodePPT的一些命令

nodePPT命令很少,简单看看下面的介绍哈

创建一个新的 md 文件:nodeppt new xin.md

启动一个 md 文件的 webpack dev server:nodeppt serve xin.md

编译产出一个 md 文件(生成静态文件):nodeppt build xin.md

help:nodeppt -h

获取帮助:nodeppt serve -h

3.键盘快捷键

介绍一下快捷键的一些使用方法哈

页面切换:↑/↓/←/→ 空格 Home End

全屏观看:F

放大缩小(总览):-/+

演讲笔记:N

网格背景:Enter

4.基本语法

整个 markdown 文件分为两部分

第一部分是写在最前面的配置

第二部分是使用隔开的每页幻灯片内容


                title: nodeppt markdown 演示
                speaker: 馨客栈
                url: https://github.com/mackxin
                js:
                - https://www.echartsjs.com/asset/theme/shine.js
                prismTheme: solarizedlight
                plugins:
                - echarts
                - mermaid
                - katex
            

title: 这是演讲的题目

speaker: 演讲者名字

5.<slide>语法

nodeppt 会根据 <slide> 对整个 markdown 文件进行拆分,拆成单页的幻灯片内容

class/style 等:正常的 class 类,可以通过这个控制居中(aligncenter),内容位置,背景色等

image:背景图片,基本语法 image="img_url"

video:背景视频,基本语法 video="video_src1,video_src2"

:class:wrap 的 class,下面详解

每个 slide 会解析成下面的 html 结构:

<section class="slide" attrs...> <div class="wrap" wrap="true">// 具体 markdown 渲染的内容</div> </section>

其中<slide> 的class等会被解析到 <section>标签上面,而:class则被解析到div.wrap上面,例如:

<slide :class="size-50" class="bg-primary"></slide>

output 为:

<section class="slide bg-primary"> <div class="wrap size-50" wrap="true">// 具体 markdown 渲染的内容</div> </section>

背景&图片

背景演示地址:在线演示background

背景仓库地址:在线仓库background


样式

样式演示地址:在线演示classes

样式仓库地址:在线仓库classes


布局

布局演示地址:在线演示layout

布局仓库地址:在线仓库layout

<slide>的image 会被解析成背景大图,常见的支持方式有:

这是一个普通的背景图 <slide image="https://source.unsplash.com/UJbHNoVPZW0/"></slide> 这张背景图会在图片上面蒙一层偏黑色的透明层 <slide image="https://source.unsplash.com/UJbHNoVPZW0/ .dark"></slide> 这张背景图会在图片上面蒙一层偏白色的透明层 <slide image="https://source.unsplash.com/UJbHNoVPZW0/ .light"></slide> 这张背景图会缓慢动 <slide class="bg-black aligncenter" image="https://source.unsplash.com/n9WPPWiPPJw/ .anim">