html reveal.js的Jekyll布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html reveal.js的Jekyll布局相关的知识,希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>
      {% if page.title %}
        {{ page.title }} | {{ site.title }}
      {% else %}
        {{ site.title }}
      {% endif %}
    </title>

    <meta name="author" content="{{ site.author }}" />

    <!-- Description -->
    {% if page.description %}
      <meta name="description" content="{{ page.description }}" />
    {% else %}
      <meta name="description" content="{{ site.description }}">
    {% endif %}

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="{{ "/reveal.js/css/reveal.css" | prepend: site.baseurl }}"/>
    {%if page.theme %}
      <link rel="stylesheet" href="{{ "/reveal.js/css/theme/" | prepend: site.baseurl | append: page.theme | append: '.css' }}" id="theme"/>
    {% else %}
      <link rel="stylesheet" href="{{ "/reveal.js/css/theme/black.css" | prepend: site.baseurl }}" id="theme"/>
    {% endif %}

    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="{{ "/reveal.js/lib/css/zenburn.css" | prepend: site.baseurl }}"/>

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? '{{ "/reveal.js/css/print/pdf.css" | prepend: site.baseurl }}' : '{{ "/reveal.js/css/print/paper.css" | prepend: site.baseurl }}';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>

    <link rel="apple-touch-icon" href="{{ "/apple-touch-icon.png" | prepend: site.baseurl }}" />

    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">

    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
  
    <div class="reveal">
      <div class="slides">
        {{ content }}
      </div>
    </div>

    <script src="{{ "/reveal.js/lib/js/head.min.js" | prepend: site.baseurl }}"></script>
    <script src="{{ "/reveal.js/js/reveal.js" | prepend: site.baseurl }}"></script>
    <script>
      // Full list of configuration options available at:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,
        {%if page.transition %}
          transition: '{{page.transition}}',
        {% else %}
          transition: 'slide', // none/fade/slide/convex/concave/zoom
        {% endif %}

        // Optional reveal.js plugins
        dependencies: [
          { src: '{{ "/reveal.js/lib/js/classList.js" | prepend: site.baseurl }}', condition: function() { return !document.body.classList; } },
          { src: '{{ "/reveal.js/plugin/markdown/marked.js" | prepend: site.baseurl }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: '{{ "/reveal.js/plugin/markdown/markdown.js" | prepend: site.baseurl }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: '{{ "/reveal.js/plugin/highlight/highlight.js" | prepend: site.baseurl }}', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: '{{ "/reveal.js/plugin/zoom-js/zoom.js" | prepend: site.baseurl }}', async: true },
          { src: '{{ "/reveal.js/plugin/notes/notes.js" | prepend: site.baseurl }}', async: true }
        ]
      });

    </script>
    
  </body>
</html>

以上是关于html reveal.js的Jekyll布局的主要内容,如果未能解决你的问题,请参考以下文章

html 从我的博客文章:使用Jekyll创建动态布局

HTML Reveal.js - 清空HTML文件

在线PPT: reveal.js介绍

HTML Reveal.js - 基本幻灯片

HTML Reveal.js - 无序列表

HTML Reveal.js - 代码幻灯片