从零开始的网页PPT展示

> “你在干嘛？” > > “写ppt” > >  > > "你这叫写ppt?" > > [白眼] ### [开始之前先看看这个demo](https://andrewwayne.github.io/OI_Nodeppt/show/class2/) 太酷炫了有没有，讲课不用随身带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。 - 输入以下命令 ```bash sudo npm install -g nodeppt ``` - 您获得了 nodeppt ! - 然后只需使用这三个命令就可以开始了！第一个命令是从模板创建一个md文件，第二个是根据md文件形成html文件包用于网页部署，第三个是部署到本地8080端口，用于预览效果。 ```bash nodeppt new xxx.md nodeppt build xxx.md nodeppt serve xxx.md ``` #### Some diffculties I had faced - 什么？node.js 版本过低？不慌！我们只需要两步就可以安装最新稳定版本的node.js ```bash sudo npm install -g n n stable ``` - 什么？nodeppt serve一直编译失败？仔细读报错发现是 node-sass 由于 node.js 版本更新却没有更新，没事! ```bash 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` 会被解析成背景大图，常见的支持方式有： ```md <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"> # 这张背景图会缓慢动 ``` #### 样式 样式太多，详见 [demo](https://nodeppt.js.org/nodeppt/classes.html) 和 [source](https://github.com/ksky521/nodeppt/blob/master/site/classes.md) #### 布局 nodeppt 这次使用`webslides`的布局，支持丰富的布局，实在太多了，直接看[文档](https://github.com/ksky521/nodeppt/blob/master/site/layout.md)和[在线演示](https://nodeppt.js.org/nodeppt/layout.html) #### button nodeppt 的 button 是类似`link`语法的，支持蓝色、圆角、空心和 icon 版本的 button： ```markdown [普通按钮](){.button} [圆角普通按钮](){.button.radius} [空心](){.button.ghost} [:fa-github: 前面带 icon](){.button} ``` #### FontAwesome nodeppt 的 icon 支持 [FontAwesome](https://fontawesome.com/) 语法： - `: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](https://github.com/ksky521/nodeppt/blob/master/site/animation.md)和[在线演示](https://nodeppt.js.org/nodeppt/animation.html) #### 使用强大的`:::`完成复杂布局 `:::`语法是扩展了 [markdown-it-container](https://www.npmjs.com/package/markdown-it-container) 语法，默认是任意 tag，例如 ```markdown :::div {.content-left} ``` ### How to build a website? 我们可以灵活运用 github 的 pages 功能，把 build 好的 html包直接 push 上去就可以了！ ## 更多更骚的玩法请看[官方demo](https://nodeppt.js.org/)和[官方文档](https://github.com/ksky521/nodeppt/)