Reveal.js - это фреймворк для HTML-презентаций с открытым исходным кодом. В этом уроке мы объединим Jekyll и discover.js, чтобы создать нашу презентацию. Хотя это было сделано до использования различных подходов, в этом сценарии мы воспользуемся коллекциями Jekyll для создания наших слайдов.
Начиная
Если у вас еще нет сайта Jekyll, возьмите одну из тем Jekyll и разместите ее с помощью Aerobatic.
Затем загрузите последнюю версию раскрытия.js и добавьте ее в корень вашего сайта Jekyll, например. ‹Корневой каталог› /reveal.js/
Макет слайда
В каталоге _layouts создайте новый файл с именем slides.html. Содержимое этого нового файла будет таким, как показано ниже (примечание: мы повторно используем макет, ранее созданный Luu Gia Thuy):
<!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>
Коллекция слайдов
Затем мы объявим коллекцию слайдов в нашем _config.yml:
# Collections collections: - slides
Слайды
В корневом каталоге вашего сайта Jekyll создайте новый каталог с именем _slides. Здесь мы создадим слайды Show.js. Например, создайте новый файл с именем 1.md и повторите для каждого желаемого слайда:
--- title: First Slide --- ## First slide heading ![Aerobatic logo](https://www.aerobatic.com/media/aerobatic-header-logo.png)
Index.html
Наконец, нам нужно отрендерить наши слайды, используя созданную нами коллекцию. Для этого замените содержимое файла index.html в корневом каталоге следующим:
--- layout: slides title: Jekyll and reveal.js description: A presentation slide for how to use reveal.js in Jekyll theme: white transition: slide --- {% for slide in site.slides %} <section> {{ slide.content }} </section> {% endfor %}
И это конец. Зафиксируйте свои изменения, и Aerobatic автоматически перестроит ваш сайт!
Резюме
Если вы раньше не размещали свои сайты с помощью Bitbucket и Aerobatic, легко начать. Ваш сайт будет запущен менее чем через минуту.
Вот ссылка на демонстрационное репо, на которое мы ссылались в этом руководстве.