Вопрос или проблема
У меня есть несколько презентаций на reveal.js, и я хочу разместить их в интернете, чтобы иметь доступ к ним отовсюду, а не только с моего ноутбука. Я также веду блог на статическом движке Hugo, который отображает html-страницы. Hugo имеет концепцию “страниц”: в настоящее время одна страница содержит записи блога, другая немного информации обо мне, а третья перечисляет все теги блога. Было бы легко добавить страницу под названием “презентации”.
Мои презентации включают текст, математику с MathJax и различные интерактивные диаграммы, встроенные в виде iframe. Было бы очень удобно включить все в один html-файл с материалами reveal.js из CDN, таких как
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.min.css" rel="stylesheet">
У меня также есть несколько локальных файлов, таких как моя собственная тема. Я не знаю, включают ли вышеуказанные файлы плагины (для математики, меню, подсветки) или их тоже нужно включить.
Я понимаю, что вопросы, подобные этому, задавались и раньше, но большинство из них кажется довольно старыми, или касаются github, который я бы предпочел избежать, так как каждый раз, когда я пытаюсь его использовать, я попадаю в огромную путаницу. В любом случае, мне не нужна система контроля версий или совместное использование, просто онлайн-присутствие.
В любом случае, я буду признателен за любые советы!
Ответ или решение
Как добавить презентации Reveal.js на существующий сайт
Если вы хотите разместить ваши презентации, разработанные с помощью Reveal.js, на сайте, который создаётся с использованием статического генератора Hugo, это довольно простая задача. В этой статье вы найдете пошаговую инструкцию о том, как создать новую страницу для ваших презентаций и интегрировать на неё Reveal.js, включая MathJax для математической разметки и другие необходимые плагины.
Шаг 1: Создание новой страницы в Hugo
-
Создание новой страницы для презентаций: Чтобы добавить страницу для ваших презентаций, перейдите в папку вашего сайта Hugo и выполните команду:
hugo new presentations.mdЭта команда создаст новый файл
presentations.mdв соответствующей папкеcontent. -
Редактирование страницы: Откройте созданный файл и добавьте необходимую информацию, включая название и описания ваших презентаций.
Шаг 2: Встраивание Reveal.js
Чтобы внедрить ваши презентации в новую страницу, вам нужно добавить HTML-код Reveal.js. Вот пример структуры вашего HTML:
---
title: "Моя презентация"
date: 2023-10-01
---
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/theme/black.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<style>
/* Стили для вашей темы, если есть */
@import url('/css/your-custom-theme.css');
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Слайд 1</section>
<section>Слайд 2 с математикой: $$E=mc^2$$</section>
<section>
<iframe src="https://example.com/some-diagram" width="600" height="400"></iframe>
</section>
</div>
</div>
<script>
Reveal.initialize({
plugins: [ RevealMarkdown, RevealHighlight, RevealMath ]
});
</script>
</body>
</html>Шаг 3: Добавление стилей и функциональности
-
Темы и плагины: Если у вас есть собственная тема для презентаций, убедитесь, что вы добавили соответствующий CSS-файл, как показано выше. Reveal.js также поддерживает множество плагинов. В приведённом примере мы включили
RevealMarkdown,RevealHighlightиRevealMath, которые обеспечивают разметку для Markdown, синтаксическую подсветку и поддержку MathJax соответственно. -
Локальные файлы: Если у вас есть локальные файлы, которые нужно добавить, размещайте их в папке
staticвашего Hugo проекта. После этого ссылаетесь на них в HTML-коде через путь/имя_файла.
Шаг 4: Генерация и развертывание сайта
После того, как вы завершили все изменения, вы можете сгенерировать ваш сайт, выполнив следующую команду:
hugoПосле этого разверните результат в папке public. Теперь ваша презентация должна быть доступна по URL вашего сайта.
Заключение
С помощью вышеперечисленных шагов вы сможете легко интегрировать ваши презентации Reveal.js на ваш сайт, созданный с помощью Hugo. Это позволит вам обеспечить доступ к вашим материалам из любой точки мира, не прибегая к сложным системам управления version control и хостингам вроде GitHub. Удачи в работе над вашими презентациями!