PPT можно написать на JS!

внешний интерфейс JavaScript

Автор: Сюй Лунь

При написании презентаций с помощью PowerPoint или Keynote поддержка кода, математических формул и т. д. всегда была проблемой. И для фронтенд-студентов отсутствие навыков CSS также является болевой точкой. Для студентов, которые используют уценку для написания документов, это также повторяющаяся рабочая нагрузка по преобразованию документов в ppt, и их необходимо переупорядочивать.

Итак, нам нужен фреймворк PPT, основанный на веб-технологиях. Reveal.js давно известен в этой области, и в прошлом месяце вышла новая версия, и она довольно хороша. Первый шаг выберет ее.

Run refect.js.

Сначала клонируйте копию последнего кода manifest.js:

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

Копируем копию index.html, например, study.html:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>reveal.js</title>

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/black.css">

		<!-- Theme used for syntax highlighted code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.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 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>
</html>

Запустите npm install в каталоге manifest.js, а затем запустите npm start, чтобы запустить сервер для просмотра веб-страницы ppt выше. По умолчанию используется порт 8000. Если он занят, вы можете изменить его, указав параметр порта, например, изменим его на 30800:

npm start -- --port=30800

Затем вы можете увидеть наш ppt, посетив браузер 127.0.0.1:30800/study.html:

reveal.js step by step

Вышеупомянутая страница на самом деле довольно проста для понимания, без необходимости реагировать или vue framework, и не нужно настраивать webpack. Основная содержательная часть на самом деле очень проста, то есть каждая страница презентации соответствует разделу.

		<div class="reveal">
			<div class="slides">
				<section>Slide 1</section>
				<section>Slide 2</section>
			</div>
		</div>

Опорная установка

Первая замечательная особенность раскрывать.js — это возможность писать презентации напрямую, используя уценку. Плагин RevealMarkdown уже загружен в наш HTML-шаблон по умолчанию выше. Итак, все, что нам нужно сделать, это написать уценку в шаблоне ниже.

                <section data-markdown>
                    <textarea data-markdown>                     
                    </textarea>
                </section>

Давайте посмотрим пример:

                <section data-markdown>
                    <textarea data-markdown>
推荐系统的主要算法包括：
- 矩阵分解
- 线性模型
- 树模型
- 深度学习模型                        
                    </textarea>
                </section>

В результате слайд-шоу выглядит следующим образом:

изменить тему

Если вы считаете, что белое на черном слишком некрасиво, мы можем сменить тему.

Тема - это css, указанный в этом заявлении:

<link rel="stylesheet" href="dist/theme/black.css">

Перейдите на другие темы css ниже dist/theme/ или просто сверните одну самостоятельно.

Например, измените его на:

<link rel="stylesheet" href="dist/theme/beige.css">

Эффект становится таким:

Поддержка математических формул

Поддержка математических формул js библиотек и плагинов по умолчанию не включена в шаблон по умолчанию, нам нужно ее увеличить.

Давайте сначала представим js библиотеки математических формул:

<script src="plugin/math/math.js"></script>

Затем Reveal.initialize увеличивает конфигурацию математических формул во время инициализации и вводит библиотеку mathjax на cdn:

      Reveal.initialize({
        hash: true,
        math: {
          mathjax:
            "https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js",
          config: "TeX-AMS_HTML-full",
          // pass other options into `MathJax.Hub.Config()`
          TeX: { Macros: { RR: "{\\bf R}" } },
        },

Наконец, добавьте плагин RevealMath в plugins:

        plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath],
      });

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

    <script src="plugin/math/math.js"></script>
    <script>
      Reveal.initialize({
        hash: true,
        math: {
          mathjax:
            "https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js",
          config: "TeX-AMS_HTML-full",
          // pass other options into `MathJax.Hub.Config()`
          TeX: { Macros: { RR: "{\\bf R}" } },
        },

        plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath],
      });
    </script>

После введения плагина мы можем писать формулы в слайд-шоу.

Можно написать прямо в разделе:

        <section>
            \[\begin{aligned}
            \ MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}| \
            \end{aligned} \]
        </section>

Также может быть встроена в Markdown:

        <section data-markdown>
          <textarea data-markdown>
                        $MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}|$                      
          </textarea>
        </section>

Результат таков:

Выделение кода

Подсветка кода поддерживается по умолчанию, мы можем использовать ``` в уценке:

Отображаемые результаты следующие:

Вы также можете напрямую использовать теги pre и code в html для отображения:

        <section>
            
<pre>
                <code class="language-javascript">
                    model.compile({
                        optimizer: tf.train.sgd(0.000001),
                        loss: 'meanSquaredError'
                    });
                
                    return model.fitDataset(flattenedDataset, {
                        epochs: 10,
                        callbacks: {
                            onEpochEnd: async (epoch, logs) => {
                                console.log(epoch + ':' + logs.loss);
                            }
                        }
                    });
                </code>
            </pre>
</section>

Отображаемый эффект выглядит следующим образом:

Тему подсветки кода также можно заменить, если CSS ниже Plugin/Highlight, например:

<link rel="stylesheet" href="plugin/highlight/zenburn.css" />

Кстати, давайте изменим тему manifest.js:

    <link rel="stylesheet" href="dist/theme/moon.css" />

Эффект становится следующим:

Подытожим приведенный выше код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <title>reveal.js学习</title>

    <link rel="stylesheet" href="dist/reset.css" />
    <link rel="stylesheet" href="dist/reveal.css" />
    <link rel="stylesheet" href="dist/theme/moon.css" />

    <!-- Theme used for syntax highlighted code -->
    <link rel="stylesheet" href="plugin/highlight/monokai.css" />
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section>Slide 1</section>
        <section>
            \[\begin{aligned}
            \ MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}| \
            \end{aligned} \]
        </section>
        <section data-markdown>
          <textarea data-markdown>
推荐系统的主要算法包括：
- 矩阵分解
- 线性模型
- 树模型
- 深度学习模型                        
                    </textarea
          >
        </section>
        <section data-markdown>
          <textarea data-markdown>
                        $MAE(X,h)=\frac{1}{m} \sum_{i=1}^m|h(x^i)-y^{(i)}|$                      
          </textarea>
        </section>
        <section>
            
<pre>
                <code class="language-javascript">
                    model.compile({
                        optimizer: tf.train.sgd(0.000001),
                        loss: 'meanSquaredError'
                    });
                
                    return model.fitDataset(flattenedDataset, {
                        epochs: 10,
                        callbacks: {
                            onEpochEnd: async (epoch, logs) => {
                                console.log(epoch + ':' + logs.loss);
                            }
                        }
                    });
                </code>
            </pre>
</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 src="plugin/math/math.js"></script>
    <script>
      // More info about initialization & config:
      // - https://revealjs.com/initialization/
      // - https://revealjs.com/config/
      Reveal.initialize({
        hash: true,
        math: {
          mathjax:
            "https://cdn.jsdelivr.net/gh/mathjax/mathjax@2.7.8/MathJax.js",
          config: "TeX-AMS_HTML-full",
          // pass other options into `MathJax.Hub.Config()`
          TeX: { Macros: { RR: "{\\bf R}" } },
        },

        // Learn about plugins: https://revealjs.com/plugins/
        plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath],
      });
    </script>
  </body>
</html>

Фоновое изображение

Раздел поддерживает атрибут data-background-image для указания фонового изображения.

пример:

        <section data-background-image="https://cdn.jsdelivr.net/www.jsdelivr.com/000a3f2b6a7baa6ae0f786a251fd105e4b230d8e/img/landing/network-map@2x.png">
        </section>

HTML and CSS

По сравнению с уценкой, HTML и CSS также являются хорошими средствами написания презентаций, и есть более контролируемые методы. И это также может быть лучше совмещено с функциями раскрыть.js.

В разделе вы можете написать HTML-теги, поскольку вы будете на обычной веб-странице:

        <section>
            <h3 style="{color: #ffec3d;}">推荐系统的冷启动</h3>
            <ul>
                <li>利用热门数据</li>
                <li>利用用户注册信息</li>
                <li>利用第三方数据</li>
                <li>利用物品内容属性</li>
            </ul>
        </section>

Мы также можем написать атрибут стиля в заголовке, чтобы использовать его в разделе.

Например, шрифт по умолчанию слишком велик, мы можем его настроить:

    <style>
        ul {
            font-size: 18px;
        }
    </style>

исчезать и исчезать

В сочетании с тегами html вы можете указать эффект постепенного появления и исчезновения. Этого можно добиться, добавив в тег фрагмента атрибут класса.

Давайте посмотрим на пример постепенного появления:

        <section>
            <h3>推荐系统的冷启动</h3>
            <ul>
                <li class="fragment">利用热门数据</li>
                <li class="fragment">利用用户注册信息</li>
                <li class="fragment">利用第三方数据</li>
                <li class="fragment">利用物品内容属性</li>
            </ul>
        </section>

Помимо затухания, мы также можем сделать элемент красным:

        <section>
            <h3>推荐系统的冷启动</h3>
            <ul>
                <li class="fragment highlight-red">利用热门数据</li>
                <li>利用用户注册信息</li>
                <li>利用第三方数据</li>
                <li>利用物品内容属性</li>
            </ul>
        </section>

Эффект следующий:

экспортировать в pdf

После того, как презентация готова, помимо просмотра в браузере мы также можем экспортировать ее в формат pdf. Метод заключается в добавлении суффикса «?print-pdf» после URI, например:http://0.0.0.0:30800/study.html?print-pdf

Затем мы можем использовать функцию сохранения в формате pdf, чтобы сохранить его.

Сделайте еще один шаг вперед

В дополнение к основным функциям, описанным выше, manifest.js поддерживает автовоспроизведение, самодельные плагины, поддержку обработки событий и другие функции, полезные для разработчиков при написании слайдов. Я считаю, что это может привнести новые и интересные вещи в ваши слайды и превратить отчеты и обмен в развлечение. Наслаждайся этим!

Категории