使用reveal.js

前端 2017-06-03

  • 首先要reveal.js是一个制作网页版ppt的框架。
  • github项目地址
  • 在线编辑地址
  • 我们要用的话,就要clone或下载到本地
    git clone https://github.com/hakimel/reveal.js.git
    里面会有个demo.html和index.html
  • 怎么用呢?
 //  一个section就是一页ppt 这样的是左右翻页的
<section>Slide 1</section>
 //  一个section里套section就是上下的翻页的ppt
<section>
    <section>Slide 1</section>
    <section>Slide 2</section>
</section>
//  修改主题
<link rel="stylesheet" href="css/theme/black.css" id="theme">
//  修改一些初始设置
Reveal.initialize({
                transition: 'convex',  //  动画效果
                width: 1280,
                height: 720,
                dependencies: [
                { src: 'js/marked.js' },
                { src: 'js/markdown.js' },
                    // { src: 'plugin/notes/notes.js', async: true },
                    { src: 'js/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
                    ]
                });
//  详细配置可以看:https://github.com/hakimel/reveal.js#configuration
//  可以使用markdown
<section data-markdown>
    <textarea data-template>
        ## Page title
        A paragraph with some text and a [link](http://hakim.se).
    </textarea>
</section>
//  使用<script type="text/template">这种的话,算是特殊语法,
//  可以修改直接修改一些属性
<section data-markdown>
    <script type="text/template">
    <!-- .slide: data-background="#ff0000" -->
        Markdown content
    </script>
</section>
//  还有个挺好玩的懒加载,在src前加上data就可以了
<section>
  ![](image.png)
  <iframe data-src="http://hakim.se"></iframe>
  <video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
  </video>
</section>
  • 还有好多好玩的,我就不写了,看官方文档其实就可以很快的上手了。

本文由 阿涛 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论