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

    人就像是被蒙着眼推磨的驴子,生活就像一条鞭子;当鞭子抽到你背上时,你就只能一直往前走,虽然连你也不知道要走到什么时候为止,便一直这么坚持着。
  • 相关阅读:
    delphi 如何让ScrollBox的内容与滚动条一起实时滚动
    C# Wpf集合双向绑定
    C# Wpf异步修改UI,多线程修改UI(二)
    C# 自定义线程修改UI(一)
    WPF FindName()查找命名注册的元素
    数据绑定
    WPF绑定Binding及模式
    WPF-Binding的源
    WPF-Binding对数据的检验
    WPF-数据转换
  • 原文地址:https://www.cnblogs.com/guochaoxxl/p/14389319.html
Copyright © 2020-2023  润新知