Поделитесь веб-фреймворком для создания PPT — show.js
Поделитесь веб-фреймворком для создания PPT — show.js

Предисловие

В последнее время я занимаюсь обзором продуктов и обменом технологиями, поэтому мне нужно сделать PPT, чтобы просмотреть технический вклад за последние шесть месяцев. Однако я страдаю от трогательной плавности запуска PPT на Mac, которая успешно пробудила во мне обсессивно-компульсивное состояние. расстройство, поэтому я просто подумал об этом. Решением было создать веб-версию PPT с помощью технических средств. В это время я обнаружил, что это веб-фреймворк, использующий язык HTML для создания презентаций. форматах и ​​представляет их в форме, похожей на PPT. Потратив 15 минут на систематическое исследование, я почувствовал, что оно в основном соответствует требованиям PPT для совместного использования технологий, поэтому я решил использовать это решение для реализации своей веб-версии PPT. Вот список технических исследований, которые я использовал:

Поэтому я буду примерно следовать приведенным выше критериям, чтобы показать вам, как быстро реализовать очень динамичный PPT с помощью show.js.

текст

Во-первых, позвольте мне поговорить о недостатках PPT (непрофессиональная точка зрения, техническая точка зрения):

  • Хотя PPT является мощным инструментом, он занимает много места на диске и занимает много памяти при запуске и работе; Запустить на Mac PPT Приехать сюда — все равно что ехать на зеленом поезде Индии. вместе с mac Популярность и развитие анимационных технологий, таких как Keynote, Prezi ждать Новички появляются один за другим. Они не только легкие, но и позволяют добиться различных потрясающих анимационных эффектов.
  • Производство занимает много времени и ограничено платформой.

Поэтому техническим работникам, не знакомым с процедурами PPT, часто бывает сложно быстро создать красивый PPT.

Далее давайте посмотрим на преимущества show.js.

  • reveal.jsмогу поставить Markdown Конвертируйте файлы во что-то вроде PPT Презентация легкая и трудоемкая, сокращает время на верстку, позволяет докладчику больше сосредоточиться на текстовом содержании, в то же время это также выигрывает; PPT гибкость, которой нет
  • Гибкое производство и публикация, никаких ограничений на приложения или платформы, просто изменяйте или открывайте файлы HTML.
  • Богатые возможности,Поддержка переходаанимация、подсветка кода、видеофон、Markdown Грамматика, экспорт PDF ждать
  • Чрезвычайно легкий, занимает мало места и памяти.

Сказав так много преимуществ showjs, давайте научимся его использовать.

раскрывать.js позволяет как введение, так и основной API

Будучи фронтенд-инженером, Нам легко reveal.js Интегрируйтесь в наш проект Vue или React, Но как проект речевого типа мы можем просто реализовать его самым примитивным способом. Сначала нам нужно ввести соответствующие файлы. Подробности см. в шагах, упомянутых на официальном сайте: revealjs.com/. Самый простой способ его использования заключается в следующем:

Язык кода:javascript
копировать
<html>
  <head>
    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/white.css">
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
    <script src="dist/reveal.js"></script>
    <script>
      Reveal.initialize();
    </script>
  </body>
</html>
копироватькод

Таким образом, с помощью всего лишь нескольких строк кода мы можем реализовать двухстраничный PPT.

Конечно, мы также можем добиться большего количества бесплатных демонстрационных анимаций, Родительско-детское структура вложения, Специальная анимация и т. д. Далее мы представляем несколько основных API.

Родительско-детское вложение

Родительско-детское вложение — это в основном тема PPT, которая может содержать множество подтем, Чтобы получить презентационный документ с четкой темой отца и сына, Это также легко реализовать в show.js, Просто оберните тег раздела внутри раздела. Код выглядит следующим образом:

Язык кода:javascript
копировать
<div class="reveal">
	<div class="slides">
		<section>Slide 1</section>
		<section>
           <section>
            Slide 2-1
          </section>
          <section>
            Slide 2-2
          </section>
        </section>
        <section>Slide 3</section>
	</div>
</div>
копироватькод

Эффект такой, как показано ниже:

Встроить скрипт

Мы все знаем, что технический PPT неотделим от кода. Мы можем легко отображать наш код в файле show.js и поддерживать несколько языков. Нижний уровень его структуры включает в себя известный в отрасли метод Highlight.js.

Используйте уценку

Markdown — это инструмент, обычно используемый техническими работниками для написания документов. showjs также поддерживает использование уценку способ написания PPT, Разве это не очень уместно? Конкретные методы заключаются в следующем:

Динамический фон Фоны

Showjs поддерживает использование пользовательских фонов (включая видео) для каждого слайда. Нам нужно использовать только фон данных в теге раздела, и он поддерживает прозрачный фон. Конкретная демонстрация выглядит следующим образом:

Backgrounds имеет в общей сложности следующие атрибуты, которые можно использовать:

  • data-background-image Адрес фонового изображения текущей страницы.
  • data-background-size размер фона
  • позиция фона данных
  • data-background-repeat Как повторить фон
  • прозрачность фона data-background-opacity
  • data-background-video видео фоновый адрес
  • data-background-video-loop режим видеоцикла для фона
  • data-background-iframe Фон — это URL-адрес iframe.
  • Может ли data-background-interactive взаимодействовать с содержимым iframe

Fragments

Фрагменты используются для выделения или постепенного отображения элементов. Каждый элемент, содержащий имя класса фрагмента, считается прогрессивным элементом, и они будут представлены на слайде последовательно при нажатии кнопки «Далее».

Настраиваемая тема Тема

Show.js предоставляет множество различных стилей тем, нам нужно только ввести разные CSS, включая черную (черную), белую (белую), лигу, бежевую, небесную (небо), ночную (ночную) и другие темы, которые вы можете почувствовать. это сам.

Переходы, анимация перехода

Мы можем использовать переходы, чтобы установить метод анимации различных слайдов, вводимых на страницу. Ниже приведены несколько анимаций перехода по умолчанию:

  • исчезать, исчезать
  • выдвигаться, выдвигаться
  • выпуклое выпуклое вращение
  • вогнутое вогнутое вращение
  • увеличить увеличить

Конкретная демонстрационная реализация выглядит следующим образом:

Язык кода:javascript
копировать
<div class="reveal">
	<div class="slides">
		<section>Slide 1</section>
		<section>
          <section data-transition="fade">
            Slide 2-1
          </section>
          <section data-transition="convex">
            Slide 2-2
          </section>
          <section data-transition="concave">
            Slide 2-3
          </section>
          <section data-transition="zoom">
            Slide 2-4
          </section>
        </section>
        <section>Slide 3</section>
	</div>
</div>
копироватькод

Экспорт PDF

Экспорт PDF-файл является дополнительной функцией. Если вы хотите узнать, как его использовать, вы можете обратиться к https://revealjs.com/pdf-export/. Далее мы реализуем динамический PPT. demo, Для всеобщего изучения и справки.

show.js создает динамическую демонстрацию PPT

Для демонстрации эффекта посетите адрес: https://user-gold-cdn.xitu.io/2020/7/13/173473da6ed62d8a?imageslim

Код выглядит следующим образом:

Язык кода:javascript
копировать
<body>
	<div class="reveal">
		<div class="slides">
			<section data-background-image="./img/z1.png" data-background-opacity=".4">
      <h1>Интересный разговор о фронтенде</h1>
      <p>Сюй Сяоси</p>
    </section>
	<section>
      <section data-transition="fade" data-background-color="orange">
        <h1>Интересный разговор о фронтенде Javascript</h1>
      </section>
      <section data-transition="convex" data-background-color="green">
        <h1>Интересный разговор о фронтенде Vue</h1> 
      </section>
      <section data-transition="concave" data-background-color="#61dafb">
        <h1>Интересный разговор о фронтенде React</h1> 
      </section>
      <section data-transition="zoom" data-background-color="#b32535">
        <h1>Интересный разговор о фронтенде Angular</h1>
      </section>
    </section>
    <section>
      <h1>NodeJS</h1>
      <pre><code data-trim data-noescape>
          const fs = require('fs')
          const Koa = require('koa')
          const app = new Koa()
          </code></pre>
    </section>
    <section>
      <h3>шаблон проектирования</h3>
      <p class="fragment">Шаблон наблюдателя</p>
      <p class="fragment">Заводской образец</p>
      <p class="fragment">шаблон итератора</p>
    </section>
    <section>
      <h4>Структуры данных и алгоритмы</h4>

    </section>
		</div>
	</div>

	<script src="dist/reveal.js"></script>
	<script src="plugin/notes/notes.js"></script>
	<script src="plugin/markdown/markdown.js"></script>
	<script src="plugin/highlight/highlight.js"></script>
	<script>
		// More info about initialization & config:
		// - https://revealjs.com/initialization/
		// - https://revealjs.com/config/
		Reveal.initialize({
			hash: true,

			// Learn about plugins: https://revealjs.com/plugins/
			plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
		});
	</script>
</body>
boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native｜Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose
©