使用nodeppt给hexo博客嵌入PPT演示

给网页添加PPT演示功能，一定会炫酷到你的小伙伴，这里介绍nodeppt给hexo博客添加PPT演示功能，当然PPT演示也可以独立域名访问

插入PPT

Github
demo

安装nodeppt

$ npm install -g nodeppt

使用nodeppt

# new：使用线上模板创建一个新的 md 文件
# create a new slide with an official template
$ nodeppt new slide.md
# 使用模板
$ nodeppt new username/repo xxx.md

# create a new slide straight from a github template
$ nodeppt new slide.md -t username/repo

# serve：启动一个 md 文件的 webpack dev server
# start local sever show slide
$ nodeppt serve slide.md
# start local sever show slide with port
$ nodeppt serve slide.md -p port

# build：编译产出一个 md 文件
# to build a slide
$ nodeppt build slide.md

生成的网页可以使用键盘操作(类似PPT操作)
- Page: ↑/↓/←/→ Space Home End
- Fullscreen: F
- Overview: -/+
- Speaker Note: N
- Grid Background: Enter
- nodeppt 有演讲者模式，在页面 url 后面增加?mode=speaker 既可以打开演讲者模式，双屏同步
端口port的好处是可以照着官网的demo文件学习和修改，保证多个slide.md在浏览器查看时不会冲突，默认的链接是http://192.168.0.105:8080/。
官网的demo文件在Github其中的index.md。
产生pdf：直接在浏览器上command+P/ctrl+P
产生html：
- 之前版本通过nodeppt generate ./ppts/demo.md -a，见Github nodePPT v1.2.0
- 当前版本产生html利用built指令，例如nodeppt build slide.md，产生的html在默认文件夹dist中，包含CSS、IMG、JS三个文件夹和demo.html。
- 在nodeppt仓库的Issue上找到一个小哥做的爬虫程序，亲测有效。会生成一个html文件，虽然文件会大一点。不过用index.md文件实验，发现(某些)图片响应时间过长导致失败，不过自己写的markdown基本无压力转html，给小哥点大大的赞👍而且小哥表示：
  之前试过直接用build，效果没问题，但build出来会有几个文件，如果通过手机或email分享出去直接播放的话稍显麻烦。

nodeppt入门

配置与hexo的post文件头一样，用yaml 语法设定基本配置

title: nodeppt markdown 演示
speaker: 三水清
url: https://github.com/ksky521/nodeppt
js:
    - https://www.echartsjs.com/asset/theme/shine.js
prismTheme: solarizedlight
plugins:
    - echarts
    - mermaid
    - katex

正文使用<slide>对整个 markdown 文件进行拆分，拆成单页的幻灯片内容。
图片、样式、布局、icon、动画等设置可以看看仓库的文档和demo文件学习。
演讲者模式的批注通过来:::语法添加，然后再页面的链接添加?mode=speaker，按N开启演讲中模式。

:::note
## Note here
:::

踩坑

CSS样式导入失败

生成的html数学公式的格式全部错误，即使在nodeppt的配置部分引入katex的JS和CSS，导出的文档仍然会出错。

通过nodeppt build的html页面

打开生成的html文件可以看到2

<link rel="stylesheet" href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//cdn.staticfile.org/prism/1.15.0/themes/prism.min.css" />
<link rel="stylesheet" href="//cdn.staticfile.org/KaTeX/0.10.0-rc.1/katex.min.css" />
<link rel="stylesheet" href="//cdn.staticfile.org/KaTeX/0.5.1/katex.min.css" />

只要把文件中所有//开头的都替换成http://，如

<link rel=stylesheet href=https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css>
<link rel=stylesheet href=https://cdn.staticfile.org/prism/1.15.0/themes/prism.min.css>
<link rel=stylesheet href=https://cdn.staticfile.org/KaTeX/0.10.0-rc.1/katex.min.css>
<link rel=stylesheet href=https://cdn.staticfile.org/KaTeX/0.5.1/katex.min.css>

这样控制台就不会报错了，数学公式和fa-icon能正常显示了。

通过py程序爬的html页面

配合katex官网的使用文档，在生成的html文件<head>引用katex的JS和CSS。

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  ...
</html>

添加后公式都能正确显示了。

在博客添加nodeppt

通过py程序爬的html页面

在Hexo博客里想调用或者链接nodeppt生成的html，需要hexo设置skip_render, 指定不进行渲染的文件或文件夹，例如在source目录下新建nodeppt来存放nodeppt生成的html，则需要在根目录下的_config.yml文件添加

skip_render: 
  - nodeppt/*.html

通过nodeppt build的html页面

skip_render: 
  - nodeppt/**

文件匹配是基于正则匹配的，如果需要忽略全部文件(/*)、指定类型type文件(/*.type)、全部文件以及子目录(/**)以及多个文件需要用(- file/**)。

对应的文件访问格式是../../nodeppt/file.html或../../nodeppt/file/demo.html，本页演示的加载是通过iframe实现的。

<iframe src="../../nodeppt/file.html" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe>

注意：如果这一步不执行的话，debug会发现nodeppt生成的html会被hexo处理，产生错误

FATAL Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html
Nunjucks Error:  [Line 9418, Column 3465] expected variable end

至于使用cdn来使用html似乎不行，出来的是html的源码，而不是网页。如果使用cdn的方式能成功就不用这么麻烦的skip_render。

有一种简单的方法就是用github或者coding等部署nodeppt的html，再iframe的src填对应的网址。如果hexo的skip_render设置正确，也可通过网址主页下的nodeppt下找到。

系列教程

全部文章RSS订阅

Hexo系列

HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

markdown 各种其它语法插件，latex公式支持，mermaid图表，plant uml图表，URL卡片，bilibili卡片，github卡片，豆瓣卡片，插入音乐和视频，插入脑图，插入PDF，嵌入iframe

夜法之书

https://blog.17lai.site/posts/546887ac/

本博客所有文章除特別声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源夜法之书 !

hexo matery nodeppt

使用nodeppt给hexo博客嵌入PPT演示

插入PPT

安装nodeppt

使用nodeppt

nodeppt入门

踩坑

CSS样式导入失败

在博客添加nodeppt

相关项目

slidev

系列教程

Hexo系列

使用nodeppt给hexo博客嵌入PPT演示 _

插入PPT

安装nodeppt

使用nodeppt

nodeppt入门

踩坑

CSS样式导入失败

在博客添加nodeppt

相关项目

slidev

系列教程

Hexo系列

使用nodeppt给hexo博客嵌入PPT演示