||
Slidev - создание презентаций
Почему Slidev? - https://ru.sli.dev/
Нужен Node.js>=v.14.0, Yarn(по желанию)
Установить с сайта разработчика:
Установка Node.js в RosaFresh 12.3
$ sudo dnf install nodejs
для создания нового проекта slidev
Наилучшим способом начать, будет использование нашего официального стартового шаблона.
Через NPM:(создание проекта)
$ npm init slidev@latest
$ npm run dev
или все вместе:
$ npm install && npm run dev
Через Yarn:
Установка Yarn:
Установить Corepack
Предпочтительный способ управления Yarn - через Corepack, новый двоичный файл, поставляемый со всеми Node.js релизы, начиная с 16.10.
Он действует как посредник между вами и Yarn и позволяет вам использовать разные версии менеджера пакетов в нескольких проектах без необходимости больше проверять двоичный файл Yarn.
Node.js >= 16.10
Corepack по умолчанию включен во все Node.js устанавливается, но в настоящее время находится в процессе регистрации. Чтобы включить его, выполните следующую команду:
corepack enable
Node.js <16.10
Corepack не входит в комплект поставки Node.js в версиях до 16.10; чтобы решить эту проблему, запустите:
$ npm i -g corepack
для создания нового проекта slidev с Yarn:
$ yarn create slidev
$ yarn init slidev
Установить playwright-chromium
$ npm i -D playwright-chromium
Теперь экспортируйте свои слайды в PDF, используя следующую команду
Экспорт.Доступно с версии 0.21
По умолчанию Slidev экспортирует по одной странице на слайд с отключенной анимацией кликов .
Если вы хотите экспортировать слайды с несколькими шагами на несколько страниц, передайте эту –with-clicks опцию.
$ slidev export --with-clicks
$ slidev export
$ slidev export --with-clicks --timeout 0 - лучший вариант
PNG
При передаче параметра –format png Slidev будет экспортировать каждый слайд в изображения PNG вместо PDF.
$ slidev export --format png
yarn build; npm build
Вы также можете создать свой SPA(если коротко - сайт-одностраничник):
$ npm build
$ slidev build
Есть маленький нюанс:(если без этого не создается SPA)
Для воспроизведения Single-Page Application (SPA)
Шаги для воспроизведения поведения:
Создайте новый проект Slidev с npm init slidev
Подождите, пока проект не будет создан и все dep будут установлены.
Добавьте во 2-ю строку slides.md следующего: monaco: true
---
monaco: true # по умолчанию "dev"
---
Добавьте кодовый блок, в slides.md котором используется monaco.
Или, вместо добавления кодового блока, вы можете отредактировать пример, чтобы использовать monaco, изменив строку 129 как ```ts {monaco}
```ts {monaco}
Запуск:
$ npm run build в консоли
Сгенерированное приложение будет доступно в разделе dist/
.Вы можете протестировать сгенерированную сборку с помощью веб-сервера (Apache, NGINX, Caddy … и т.д.)
или
непосредственно в проекте, который вы можете запустить :
$ npx vite preview (запускать в директории dist/)
Создание сайта SPA(сайт-одностраничник) на Github
slidev build --base /test
где test - название репозитория на github,куда будете создавать.
Отпраляете в репозиторий,в моем случае test, из директории dist/
директорию assets/ и файл index.html.
Проверяете index.html в своем репозитории на github (test)
Должно получиться примерно так:
Дальше получаете ссылку на сайт