浙江省嘉兴市第一中学

从零开始的网页PPT展示

2019-08-17 10:39:42


“你在干嘛?”

“写ppt”

"你这叫写ppt?"

[白眼]

开始之前先看看这个demo

太酷炫了有没有,讲课不用随身带U盘,到地方打开网站就可以开始展示,发课件回去不用发一大堆文件,只要发一个link过去就可以了,并且网页同步跳转无障碍。做ppt再也不用整晚整晚的纠结公式排版,Nodeppt 解决您所遇到的一切问题。

累死累活干不过ppt writer

Nodeppt 是基于 Node.js 由三水清开发的一款网页展示库,其具有简单易用,所思即所得,支持KaTeX,Echart,Mermaid的特点,作者不用纠结于排版,只需专注于内容,便可得到排版美观展示好看的网页ppt。

Why nodeppt?

就像 yfz 说的“都写这样的code了,为啥不用LaTeX?”没错,Beamer非常好用,而且写起来也和markdown一样顺手,那为啥还要费劲去学nodeppt呢?

  • 颜值决定一切 用 beamer 写出的 pdf,有一个通病,修改太烦,展示太单调。有时为了一些特殊场合,因为有对于课件美观的要求,不得不使用 ppt/WPS 来代替 LaTeX 做一些讲稿。然而用过的人都知道,这两个东西插入公式简直丧**狂。

  • 兼顾二者优点,合二为一。 既有 ppt 一样好看的展示效果,又有 LaTeX 一样方便插入公式,便于排版的特性。

  • 安慰健忘党 ,不知你可曾遇到过这种情况,老师叫你提前准备好讲课,你辛辛苦苦准备好了课件,到了上课之时却忘了带U盘,使用 Nodeppt 告别健忘!不慌不忙的走上讲台打开浏览器输入你的github部署地址吧!

  • 自由的写作空间 写 ppt 或者 LaTeX 经常会遇到这种情况,因为最终生成的页面大小是固定的,所以每一页能装的东西有限,经常需要一页分两页写,或者是把字体缩得很小,明明只是多了一点点内容,却要排版半天,这是件很烦人的事。而 Nodeppt 每一页的版面可以说是无限的,你既可以像网页一样向下滚动,也可以像 ppt 一样左右翻页!

  • 简单易用 对于对于大部分的OIer来说,其实是可以很熟练的编写Markdown文档的,但是对于LaTeX的演示文稿,未免就需要模板来助一臂之力了,而使用Nodeppt就几乎不需要学习额外知识!

  • 体量较轻 比 LaTeX 轻挺多的,至少我装CTeX有好几个G。

  • 演讲者模式,和 ppt 一样的功能,比 LaTeX 多一点优势。

Disadvantage?

  • 因为是网页展示,所以必须是有网的地方才能用,部署需要一些github经验。
  • 使用Chrome自带的 ctrl P 导出pdf效果感人。

How to get it?

  • 首先请确保您已安装 node.js 和包管理器 npm。
  • 输入以下命令
    sudo npm install -g nodeppt
  • 您获得了 nodeppt !
  • 然后只需使用这三个命令就可以开始了!第一个命令是从模板创建一个md文件,第二个是根据md文件形成html文件包用于网页部署,第三个是部署到本地8080端口,用于预览效果。
    nodeppt new xxx.md
    nodeppt build xxx.md
    nodeppt serve xxx.md

Some diffculties I had faced

  • 什么?node.js 版本过低?不慌!我们只需要两步就可以安装最新稳定版本的node.js
    sudo npm install -g n
    n stable
  • 什么?nodeppt serve一直编译失败?仔细读报错发现是 node-sass 由于 node.js 版本更新却没有更新,没事!
    npm rebuild node-sass
  • 什么?还是编译失败?仔细一看 nodeppt 的目录下面发现他自己有一个 node-sass,好那我们把我们自己安装的 node-sass 复制到这个目录下面替换掉不就行了!大功告成!

Now I have got nodeppt, how to use it?

nodeppt 的编写是完全按照 markdown 语法的,所以能写洛谷博客就可以写 nodeppt!同时官方文档里给出了多种不同的布局格式,和一些容器用法。

基本语法

整个 markdown 文件分为两部分,第一部分是写在最前面的配置,然后是使用<slide>隔开的每页幻灯片内容。其支持katex,echarts,mermaid等多个插件!

演讲者模式

nodeppt 有演讲者模式,在页面 url 后面增加?mode=speaker 既可以打开演讲者模式,双屏同步

键盘操作

  • Page: ←/→ Space Home End
  • Fullscreen: F
  • Overview: -/+
  • Speaker Note: N
  • Grid Background: Enter

<slide> 语法

nodeppt 会根据<slide>对整个 markdown 文件进行拆分,拆成单页的幻灯片内容。<slide> 标签支持下面标签:

  • class/style 等:正常的 class 类,可以通过这个控制居中(aligncenter),内容位置,背景色等
  • image:背景图片,基本语法 <slide image="img_url">
  • video:背景视频,基本语法 <slide video="video_src1,video_src2">
背景:图片

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

<slide image="https://source.unsplash.com/UJbHNoVPZW0/">

# 这是一个普通的背景图

<slide image="https://source.unsplash.com/UJbHNoVPZW0/ .dark">

# 这张背景图会在图片上面蒙一层偏黑色的透明层

<slide image="https://source.unsplash.com/UJbHNoVPZW0/ .light">

# 这张背景图会在图片上面蒙一层偏白色的透明层

<slide class="bg-black aligncenter" image="https://source.unsplash.com/n9WPPWiPPJw/ .anim">

# 这张背景图会缓慢动

样式

样式太多,详见 demosource

布局

nodeppt 这次使用webslides的布局,支持丰富的布局,实在太多了,直接看文档在线演示

button

nodeppt 的 button 是类似link语法的,支持蓝色、圆角、空心和 icon 版本的 button:

[普通按钮](){.button} [圆角普通按钮](){.button.radius}

[空心](){.button.ghost} [:fa-github: 前面带 icon](){.button}

FontAwesome

nodeppt 的 icon 支持 FontAwesome 语法:

  • :fa-xxx:<i class="fa fa-xxx"></i>
  • :~fa-xxx:~<span><i class="fa fa-xxx"></i></span>
  • ::fa-xxx:: → 块级<i class="fa fa-xxx"></i>,即不会被p包裹

Animation

nodeppt 一如既往的支持动效,2.0 版本支持动效主要是页面内的动效。

支持动效包括:

  • fadeIn
  • zoomIn
  • rollIn
  • moveIn
  • fadeInUp
  • slow

在需要支持的动效父节点添加.build或者在具体的某个元素上添加.tobuild+动效 class即可。

按照惯例,nodeppt 还支持animate.css的动效哦~

详细查看文件:site/animation.md在线演示

使用强大的:::完成复杂布局

:::语法是扩展了 markdown-it-container 语法,默认是任意 tag,例如

:::div {.content-left}

How to build a website?

我们可以灵活运用 github 的 pages 功能,把 build 好的 html包直接 push 上去就可以了!

更多更骚的玩法请看官方demo官方文档