安装reveal.js
就想简单的写演示文稿,不想盗版,不想花钱,不想臃肿;觉得reavel.js应该是好选择。主要是reveal.js是一个使用html和Markdown快速创建和演示幻灯片的工具,功能使用,众多第三方软件增强效果,而且不需要额外安装软件,只需要一个浏览器就OK。其他就不多说了,总之,我需要的功能恰好它都有,它没有的正好我不需要了就够了。
0、安装准备:
sudo pacman -S nodejs npm gyp yarn
1、下载文件:
git clone https://github.com/hakimel/reveal.js.git
2、切换目录:
cd reveal.js/
3、安装模块
npm install
4、编辑文稿
vim ~/reveal.js/index.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, m aximum-scale=1.0, user-scalable=no"> 6 7 <title>reveal.js</title> 8 9 <link rel="stylesheet" href="dist/reset.css"> 10 <link rel="stylesheet" href="dist/reveal.css"> 11 <link rel="stylesheet" href="dist/theme/black.css" id="theme"> 12 13 <!-- Theme used for syntax highlighted code --> 14 <link rel="stylesheet" href="plugin/highlight/monokai.css" id="highligh t-theme"> 15 </head> 16 <body> 17 <div class="reveal"> 18 <div class="slides"> 19 <section>如何使用reveal.js创建和演示幻灯片</section> 20 <section>首先下载reveal.js项目构建创作环境</section> 21 <section>接着熟悉语法规则后策划构建内容</section> 22 <section>然后启动本地服务进行文稿展示</section> 23 <section>最后根据情况重复上述两步直至完美展示</section> 24 </div> 25 </div> 26 27 <script src="dist/reveal.js"></script> 28 <script src="plugin/notes/notes.js"></script> 29 <script src="plugin/markdown/markdown.js"></script> 30 <script src="plugin/highlight/highlight.js"></script> 31 <script> 32 // More info about initialization & config: 33 // - https://revealjs.com/initialization/ 34 // - https://revealjs.com/config/ 35 Reveal.initialize({ 36 hash: true, 37 38 // Learn about plugins: https://revealjs.com/plugins/ 39 plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] 40 }); 41 </script> 42 </body> 43 </html> 44
将幻灯片内容按照每页的内容分别按照19~23行中即可
上述代码主要分为3个部分,各个部分用途:
1、<head>中设置文稿演示的主题
2、<section>中编写演示文稿的内容,每个section就是一个页面
3、<script>中的 Reveal.initialize({})的大括号中添加reveal.js的依赖和配置选项
5、启动服务
npm start
如下提示信息:
> reveal.js@4.1.0 start > gulp serve [08:27:04] Using gulpfile ~/reveal.js/gulpfile.js [08:27:04] Starting 'serve'... [08:27:04] Starting server... [08:27:04] Server started http://0.0.0.0:8000 [08:27:04] LiveReload started on port 35729 [08:27:04] Running server
6、就可以自动打开浏览器,将Server started后的地址http://0.0.0.0:8000输入到浏览器地址栏回车后就可以开始展示了,只需要用上下左右方向键进行切换了
7、我在实验室的另外一台电脑上运行npm start时,总是提示Node Sass does not yet support,还有几个Error,一通乱弄,没有弄好,还是到官方找到解决办法:更新过期插件即可
yarn add reveal.js //将过期的插件更新即可
https://zhuanlan.zhihu.com/p/83425852