reveal.js配置小结

2023年05月08日

Reveal.js 配置小结

最近组会老是要拷PPT，我自己的U盘不见了，无奈，只能每次都用QQ发给负责组会的同学，一来二去十分麻烦。在跟着jyy老师的操作系统课程学习时注意到老师的PPT是可以运行在浏览器环境里的，瞬间被种草并直接开始安装配置研究。

安装

先简单过一下环境，Ubuntu22.04，没了

安装流程很简单：reveal.js本身只是一个2M不到的HTML项目，只需要使用Node.js的服务将其运行起来就可以了。

NVM

NVM是一个Bash脚本，可以方便地控制安装的Node.js版本，还可以同时安装多个Node.js版本。Ubuntu软件源中默认的Node.js是9.6版本，无法运行reveal.js，因此通过NVM安装新版本的Node.js。

1	`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh \| bash`

不要使用 sudo 运行，因为这会为 root 用户启用nvm。这条指令会把nvm保存到~/.nvm

接着添加环境变量，在~/.bashrc末尾添加如下内容：

1
2
3

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

如果使用的是oh-my-zsh，则配置文件为~/.zshrc。之后更新环境变量

1	`source ~/.bashrc`

现在nvm应该就是可用状态了，使用如下命令检查：

1	`nvm --version`

正常情况下会输出版本号

接下来安装最新版本的Node.js

1	`nvm install node`

也可以用如下命令安装长期支持版和指定版本

1 2	`nvm install --lts # long time service nvm install 10.9.0 # 10.9.0`

之后执行nvm list检查安装结果
如果结果中出现如下内容

1	`default -> 12.13.0 (-> N/A)`

这代表默认的Node.js版本未指定，可以通过如下命令指定

1	`nvm alias default 12.13.0`

这样就安装好了，可以用npm完成包管理过程了。

reveal.js

很简单，只需要将项目克隆到本地即可

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
npm install
npm start

Node.js会默认把网页挂在localhost:8000，如果需要切换端口，只需要指定port参数即可

1	`npm start -- --port=12306`

这就可以通过localhost:12306或127.0.0.1:12306访问幻灯片了

非本机访问

这个问题折腾了我一个晚上
我的reveal.js运行在一台有稳定局域网IP的机子上，我想着只要访问这台机子的8000端口就可以了，没想到无论怎么尝试都是拒绝访问。定位了一晚上，从vue框架中猜测是host域名的问题，最后锁定到这么一个文件

--- gulpfile_old.js 2023-05-08 22:10:10.374744332 +0800
+++ gulpfile.js     2023-05-04 22:41:31.108223722 +0800
@@ -24,7 +24,7 @@
 
 const root = yargs.argv.root || '.'
 const port = yargs.argv.port || 8000
-const host = yargs.argv.host || 'localhost'
+const host = yargs.argv.host || '0.0.0.0'
 
 const banner = `/*!
 * reveal.js ${pkg.version}

按照vue相关的博客所说，这个字段定义的地址会导致外部访问时寻址失败，我不做前端真的搞不懂是什么原因，但这么改了以后确实能通过ip+端口的方式访问了，就这样吧。

下一步

下次组会就用这玩意放PPT了，到时再写一下这玩意怎么用。