安装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

posted @ 2021-02-08 16:20  叕叒双又  阅读(595)  评论(0编辑  收藏  举报