Nodeppt 入坑指南

前置准备

• 阅读官方文档:

  https://github.com/ksky521/nodeppt

  观看官方 demo

  https://nodeppt.js.org/#slide=1

• 安装 node.js

  下载地址: https://nodejs.org/zh-cn/

• 安装 nodeppt

  npm install -g nodeppt

  如果一直显示 still install loadCurrentTree

  你需要换一个 nodejs 的安装源，这个自行搜索

基本使用

三条指令

1
2
3

nodeppt new slides.md
nodeppt serve slides.md
nodeppt build slides.md

指令有什么用参见官方文档

但是注意，第三条指令不只会生成 html文件，还会生成三个文件夹

js css 文件夹中都放了为了该 html 文件正常渲染的文件，但img文件夹我还不知道怎么用(我猜应该是可以在 nodeppt 本地引用里面的图片)

所以转移文件的时候别忘了那三个文件夹

nodeppt 的语法可以参考官方 demo，或直接在这里看一看具体的写法(请使用 raw 或者编辑模式阅读)

使用通过 Github Pages 部署的 Hexo 博客在线查看 nodeppt

如果我们本地观看 nodeppt 的 html 文件的话，会发现 FontAwesome 图标无法显示和背景的 Youtube 视频无法播放

但是我们如果把 html 文件部署到网页上就不会出现这个问题

现在很多人都使用 Github Pages 部署的 Hexo 博客，于是我们可以将 html 文件作为 博客的一部分部署到网页上

注意我现在使用的主题是 Aria, 可能与您的主题不太一样，但是操作都是大同小异的

• 创建一个新页面，这里的新页面指的是与 tags categories about 同级别的页面

  • 在你的主题的文件中的 config.yml 文件夹中的对应位置添加新页面

    以 Aria 主题为例，添加

    1 2 3

    - page: slides url: slides/ logo:

  • 输入 Git 指令（在你的blog文件夹也就是主文件夹中）

    hexo new page slides

  一般来说这两个操作后会生成 source\slides\index.md

• 将已经build 的css js img 和 html文件全部复制进 source\slides 文件夹中

  然后将那个 html 文件改名成 index.html 并删除 index.md

• 接下来我们需要让 hexo 跳过渲染 index.html

  在主文件夹的 config.yml 中找到skip_render: 这一项，加入source\slides 这个文件夹

  具体操作:

  1 2	skip_render: - slides\*

• 常规的hexo clean hexo g-d 操作过后就好了

  在你的博客中点击 slides 就好了