Привет, ребята, которых мы так мало видели, что мы можем создавать веб-сайты с использованием JavaScript, но как насчет того, можем ли мы создать нашу собственную презентацию с помощью JavaScript. Reveal.js - это среда представления HTML с открытым исходным кодом. Это инструмент, который позволяет любому, у кого есть веб-браузер, бесплатно создавать полнофункциональные и красивые презентации. Это потрясающая документация, она хорошо описана и проста для понимания. Презентации, сделанные с помощью detect.js, построены на открытых веб-технологиях. Это означает, что все, что вы можете делать в Интернете, вы можете делать в своей презентации. Измените стили с помощью CSS, включите внешнюю веб-страницу с помощью <iframe> или добавьте наше собственное поведение в нашу презентацию. Reveal.js поставляется с широким набором функций, включая вложенные слайды, поддержку Markdown, автоматическую анимацию, экспорт в PDF, заметки докладчика и выделенный синтаксис код.

эта строка фактически означает сначала выделение всех строк, а затем на следующем слайде выделение только 4, 8, 9, 10, 11 строк. RevealJS использует для этой функции плагин, называемый подсветкой. На следующем слайде мы реализовали вертикальный слайд, если мы обернем несколько разделов одним разделом, эти разделы будут действовать как вертикальные слайды, а основной раздел будет корневыми слайдами. Таким образом, есть две секции внутри одной секции, это означает, что эта секция будет действовать как вертикальные слайды. Мы можем добавить стили в анимацию, добавив стили в параметр data-auto-animate-easing раздела section, это все предопределенные классы отображения, для получения более подробной информации мы можем проверить документацию. Мы также добавили анимацию к следующим слайдам подряд. Мы также можем создавать слайды с использованием текста уценки, нам нужно просто добавить свойство data-markdown в тег раздела. RevalJS также поддерживает создание слайдов с использованием внешних файлов уценки, для которых он использует плагин уценки. Есть еще одна функция, называемая фрагментами, означающая, что внешним видом текста можно управлять, щелкая следующую стрелку или контроллеры стрелок нашей презентации. Мы также можем добавить стили к фрагменту, что означает, что мы также можем определить, как текст должен отображаться в нашей презентации: сверху, снизу, должен исчезать, постепенно проявляться и т. Д. Мы можем изменить стиль при переходе между презентациями, например по умолчанию для него установлено значение «Нет», при нажатии на такие параметры, как «Затухание» или «Слайд» и т. д., мы добавим ? transition = slide # / transitions к нашему URL-адресу слайда, что изменит стиль перехода нашей презентации. Мы также можем добавить цвет фона к нашим слайдам, передав цвет в свойства фона раздела данных. В RevealJS мы также можем использовать изображение в качестве настраиваемого контроллера слайда, например, если мы хотим сдвинуть нашу презентацию вниз, мы обернем ее тегом привязки и добавим класс навигации вниз. Мы можем добавить фоновое изображение на слайды. Мы также можем повторить изображение на нашем фоне слайдов, добавив data-background-repeat = ‘repeat’. И, что наиболее важно, мы можем добавить видео и ссылку на веб-сайт в фон слайда, добавив ссылки в реквизиты data-background-video и data-background-iframe в раздел соответственно. RevealJS также предоставляет полезные функции для докладчика, он предоставляет специальный раздел комментариев для каждого слайда, который будет виден докладчику только во время презентации, эта функция называется функциями заметок, RevealJS использует плагин заметок для реализации. Выступающий также может приостановить презентацию, нажав кнопку B, и наоборот. Теперь посмотрим на финальную презентацию:

Чтобы начать с RevealJS, мы должны создать пустую папку, после этого открыть ее с помощью Visual Studio, а затем клонировать последнее обновленное репозиторий Git RevealJS.

$ git clone https://github.com/hakimel/reveal.js.git

Перейдите в папку detect.js и установите зависимости.

$ cd reveal.js && npm install

Теперь пройдемся по кодовой базе:

Итак, основная структура папок RevealJS, самая замечательная вещь в RevealJS - это то, что он поставляется с диапазоном ширины сторонних плагинов, которые необходимы для анимации, выделения кода и перехода. Папка css содержит стили scss, которые мы можем использовать для оформления нашей презентации. Папка dist содержит стили css, преобразованные из scss в css. examples содержит пример нескольких функций, предоставляемых RevealJs в качестве ссылки для пользователя, поскольку я упоминал, что его шаблонный код делает RevealJS очень удобным для пользователя. js - это папка, которая содержит весь код javascript, компоненты, контроллеры и утилиты, содержащий весь код javascript функций RevealJS. config.js содержит конфигурацию RevealJS по умолчанию, мы обсудим это позже. index.js выполняет часть рендеринга Dom в RevealJS, точно так же, как файл index.js в шаблоне React. show.js объединяет все функции RevealJS логически. Фактически он строит нашу презентацию, добавляя функции, которые мы хотим добавить. Раньше мы добавляли функции в нашу презентацию с помощью:

‹script›

Reveal.initialize ({

hash: true,

плагины: [RevealMarkdown, RevealHighlight, RevealNotes]

});

‹/script›

detect.js на самом деле настраивает наш объект открытия или, проще говоря, нашу презентацию. Мы можем обратиться к документации RevealJS для получения более подробной информации. плагин содержит настройки сторонних плагинов, такие как выделение для выделения кода, уценка для создания слайда с использованием внешних файлов разметки и т. Д. node_modules будут созданы, когда мы выполним npm i, demo.html - это html-файл, который содержит презентацию на Reveal Js, имеющую все функции, предоставляемые Reveal.JS , Это хорошая ссылка для начала работы с RevealJS. И мы создали наш код в index.html. Теперь мы увидим наш файл index.html.

Итак, в index.html мы создаем нашу презентацию. Прежде чем перейти к полному подробному объяснению кода, нам нужно знать базовый синтаксис того, как мы создаем каждый слайд нашей презентации. Иерархия разметки презентации должна быть .reveal > .slides > section, где элемент section представляет один слайд и может повторяться бесконечно. Если вы поместите несколько section элементов внутри другого section, они будут показаны в виде вертикального слайда. Первый из вертикальных слайдов является «корнем» других (вверху) и будет включен в горизонтальную последовательность.

Итак, внутри тега html мы создали тег заголовка, который содержит метатег для метаданных, заголовок для заголовка нашего проекта, а ссылка будет содержать все файлы css, которые мы будем использовать в нашей презентации. reset.css содержит стили, специфичные для браузера, show.css - стили представления, а Black.css - для стилей тем, мы хотим, чтобы черный в качестве цвета нашей темы или цвета фона. monokai.css - это плагин стилей для выделения, который используется для выделения кода синтаксиса. Теперь идет тело. Как мы уже упоминали, раздел .reveal ›.slides›, мы создали div с именем класса show, внутри этих слайдов, а затем в разделе, каждый раздел будет слайдом для нашей презентации.

Итак, мы создаем презентацию «Обзор среднего профиля». На самом деле я создал эту презентацию, чтобы охватить все возможности RevealJS. На первом слайде будет изображение, заголовок и сведения о создателе. На втором мы добавили анимацию для включения подсветки кода. Наш второй слайд будет иметь подкатегорию, определенную 1/0/0, первоначально она будет отображать всю выделенную строку кода, когда мы щелкнем следующую стрелку, она покажет 4-ю строку с выделенными 8,9,10,11 строками.

‹code class =” hljs ”data-trim data-line-numbers =” | 4,8–11 '›

‹/code›

Это несколько слайдов из презентации, я поделюсь ссылкой github на базу кода и ссылкой на документацию RevealJS. А до тех пор, пожалуйста, не переставайте исследовать что-то новое. Существует множество замечательных библиотек и пакетов, которые предоставляют нам отличные возможности для создания замечательных веб-сайтов и презентаций. Если вы хотите быть более интересным при представлении нашей презентации, я вам посоветую, вам всегда следует пробовать такой технический подход для создания презентации, когда вы пишете свой собственный код javascript для создания презентации, а не используете Power Point или какое-либо другое программное обеспечение.

Документация:

«Структура представления HTML | Show.js
Документация и демонстрации для HTML-фреймворка с открытым исходным кодом detect.js. detectjs.com »



Код:



«Yudhajitadhikary / RevealJS
Создание презентации с помощью RevealJS GitHub является домом для более чем 50 миллионов разработчиков, которые вместе размещают и проверяют… github.com»



HAPPY CODING… :)



Создание потрясающей презентации с помощью RevealJS ..