4年前 (2015-12-04)  系统运维 |   6 条评论  522 
百度已收录 | 文章评分 1 次,平均分 5.0

如果你也觉着用 powerpoint 写幻灯片比较麻烦,那就可以可以跟着作者一起使用 reveal.js 来实现幻灯片。

介绍
最近在准备一个团队内部的分享,觉得 powerpoint 写幻灯片太麻烦,效率太低。作为前端,就想到是否可以使用页面来做幻灯片。于是就去搜索了下有没有 HTML5 实现幻灯片的工具。经过对比,最后选择了了reveal.js 来实现幻灯片。
reveal.js 是一个用于实现幻灯片效果的库。使用该库。
  • github 地址:github
  • 提供了页面编辑功能:slides.com
  • 官方 demo: demo
  • 我自己做的 PPT 地址:vuejs-ppt
特点
reveal.js 有一下几个特点:
  • 支持标签来区分每一页幻灯片
  • 可以使用 markdown 来写内容
  • 支持 pdf 的导出
  • 支持演说注释
  • 提供 JavaScript API 来控制页面
  • 提供了多个默认主题和切换方式
幻灯片实现步骤
从 reveal.js 上下载压缩包,并解压
进入 reveal.js 文件夹,直接修改 index.html 文件就可以
幻灯片内容实现方法
幻灯片的内容需要包含在 <div class="reveal"> <div class="slides"> 的标签中。
一个 section 是一页幻灯片。当 section 包含在 section 中时,是一个纵向的幻灯片。
怎么理解呢? 可以这样理解:横向的幻灯片代表一章,纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的,而纵向的幻灯片是上下切换的。For example:
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"reveal"</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"slides"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">section</span>&gt;</span>Single Horizontal Slide<span class="hljs-tag">&lt;/<span class="hljs-title">section</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-title">section</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">section</span>&gt;</span>Vertical Slide 1<span class="hljs-tag">&lt;/<span class="hljs-title">section</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-title">section</span>&gt;</span>Vertical Slide 2<span class="hljs-tag">&lt;/<span class="hljs-title">section</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-title">section</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span></code>

html 实现内容

标题和正文
section 中的内容就是幻灯片的内容,你可以使用 h2 标签标示 title, p 表示内容。需要红色的字体可以直接设置 style 的 color 为 red。
当某一页需要特殊背景色,可以使用 data-background 在 section 上设置, data-background-transition 表示背景的过渡效果。For example:
<code class="html">&lt;<span class="hljs-title">section</span> <span class="hljs-attribute">data-background-transition</span>=<span class="hljs-value">"zoom"</span> <span class="hljs-attribute">data-background</span>=<span class="hljs-value">"#dddddd"</span>&gt;</code>
如果需要正文一段一段出现。可以使用 fragment。For Example:
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"fragment"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span></code>
代码
reveal.js 使用 highlight.js 来支持代码高亮。可以直接写 code 标签来实现,data-trim 表示去除多余的空格。For Example:
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">pre</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">code</span> <span class="hljs-attribute">data-trim</span>&gt;</span>
  console.log('hello reveal.js!');<span class="hljs-tag">&lt;/<span class="hljs-title">code</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">pre</span>&gt;</span></code>
注释
在演说时,会用到注释,对于注释,可以通过 <aside class="notes"> 来实现。For Example:
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">aside</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"notes"</span>&gt;</span>
  这里是注释。
<span class="hljs-tag">&lt;/<span class="hljs-title">aside</span>&gt;</span></code>
在幻灯片页面,按下 s 键,就可以调出注释页面,注释页面包含了当前幻灯片,下一章幻灯片,注释,以及幻灯片播放时间。

Markdowmn 实现

reveal.js 不仅支持 html 表示来实现内容, 还可以通过 markdown 来实现内容。使用 markdown 实现内容时,需要对 section 标示添加 data-markdown 属性,然后将 markdown 内容写到一个 text/template 脚本中。For Example:
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">section</span> <span class="hljs-attribute">data-markdown</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/template"</span>&gt;</span><span class="javascript">
        ## Page title

        A paragraph <span class="hljs-keyword">with</span> some text and a [link](http:<span class="hljs-comment">//hakim.se).</span>
    </span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">section</span>&gt;</span></code>
背景色,fragment 功能的实现,可以通过注释来实现。For Example:
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">section</span> <span class="hljs-attribute">data-markdown</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/template"</span>&gt;</span><span class="javascript">
    &lt;!-- .slide: data-background=<span class="hljs-string">"#ff0000"</span> --&gt;
        - Item <span class="hljs-number">1</span> &lt;!-- .element: <span class="hljs-keyword">class</span>=<span class="hljs-string">"fragment"</span> data-fragment-index=<span class="hljs-string">"2"</span> --&gt;
        - Item <span class="hljs-number">2</span> &lt;!-- .element: <span class="hljs-keyword">class</span>=<span class="hljs-string">"fragment"</span> data-fragment-index=<span class="hljs-string">"1"</span> --&gt;
       </span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;
</span><span class="hljs-tag">&lt;/<span class="hljs-title">section</span>&gt;</span></code>
外置 md 文件
reveal.js 可以引用一个外置的 markdown 文件来解析。For Example:
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">section</span> <span class="hljs-attribute">data-markdown</span>=<span class="hljs-value">"example.md"</span>  
         <span class="hljs-attribute">data-separator</span>=<span class="hljs-value">"^\n\n\n"</span>  
         <span class="hljs-attribute">data-separator-vertical</span>=<span class="hljs-value">"^\n\n"</span>  
         <span class="hljs-attribute">data-separator-notes</span>=<span class="hljs-value">"^Note:"</span>  
         <span class="hljs-attribute">data-charset</span>=<span class="hljs-value">"iso-8859-15"</span>&gt;
</span><span class="hljs-tag">&lt;/<span class="hljs-title">section</span>&gt;</span></code>
分页实现
一个 markdown 文件中可以连续包含多个章内容。可以在 section 中通过属性 data-separator, data-separator-vertical 来划分章节。For Example:
<code class="html"><span class="hljs-tag">&lt;<span class="hljs-title">section</span> <span class="hljs-attribute">data-separator</span>=<span class="hljs-value">"---"</span> <span class="hljs-attribute">data-separator-vertical</span>=<span class="hljs-value">"--"</span>  &gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/template"</span>&gt;</span><span class="javascript">
    # 主题<span class="hljs-number">1</span>
    - 主题<span class="hljs-number">1</span>-内容<span class="hljs-number">1</span>
    - 主题<span class="hljs-number">1</span>-内容<span class="hljs-number">2</span>
    --
    ## 主题<span class="hljs-number">1</span>-内容<span class="hljs-number">1</span>
    内容<span class="hljs-number">1</span>-细节<span class="hljs-number">1</span>
    --
    ## 主题<span class="hljs-number">1</span>-内容<span class="hljs-number">2</span>
    内容<span class="hljs-number">1</span>-细节<span class="hljs-number">2</span>
    ---
    # 主题<span class="hljs-number">2</span>
  </span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;
</span><span class="hljs-tag">&lt;/<span class="hljs-title">section</span>&gt;</span></code>
注释
对 section 添加 data-separator-notes="^Note:" 属性,就可以指定 Note: 后面的内容为当前幻灯片的注释。For Example:
<code class="html"># Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.</code>
PDF导出
可以利用浏览器保存为 pdf 的功能来实现 pdf 的转化。步骤是
  1. 在 url 后面添加 print-pdf 参数,访问后,页面会去加载打印用的 css 文件,页面效果就是 pdf 的样式。
  2. 右键选择打印。设置为保存 pdf。
我试过保存 pdf 的功能,有内容会重叠,怀疑是样式没有处理好。
多主题
reveal.js 提供了多种样式。可以通过引用不同的主题来实现。具体主题查看 reveal.js/css/theme 下的 css 文件。
总结
用 reveal.js 来实现幻灯片,可以只关注内容,忽略各种切换效果。而且可以使用 markdown 来实现,大大提高了编写效率。对于最后生成的 html 文件,可以部署到服务器,这样只需要网络就可以进行分享,不需要使用U盘拷来拷去了。
 

除特别注明外,本站所有文章均为张子豪博客(ZihaoBlog)原创,转载请注明出处来自https://www.zihao123.com/1217.html

关于
93年菜鸟云主机运维。

发表评论

表情 格式

暂无评论

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

×
订阅图标按钮