Slidev

Создание темы

Для начала мы рекомендуем использовать наш генератор для создания вашей первой темы.

$ npm init slidev-theme

Затем вы можете изменить и поиграться с ней. Вы также можете посмотреть официальные темы в качестве примеров.

Возможности

Тема может содержать:

  • Глобальные стили
  • Дефолтные конфигурации (шрифты, цветовые схемы, подсветки, и т.д.)
  • Кастомные шаблоны или замена существующих
  • Кастомные компоненты или замена существующих
  • Расширение конфигурации Windi CSS
  • Настройка таких инструментов, как Monaco или Prism

Соглашения

Темы публикуются в реестре npm, и они должны соответствовать приведённым ниже соглашениям:

  • Имя пакета должно начинаться с slidev-theme-, например: slidev-theme-awesome
  • Содержать slidev-theme и slidev в поле keywords вашего package.json

Настройка

Чтобы настроить тестовую песочницу для вашей темы, вы можете создать example.md со следующим frontmatter, чтобы сообщить Slidev, что вы используете текущий каталог в качестве темы.

---
theme: ./
---

При желании вы также можете добавить несколько скриптов в свой packages.json

// package.json
{
  "scripts": {
    "dev": "slidev example.md",
    "build": "slidev build example.md",
    "export": "slidev export example.md",
    "screenshot": "slidev export example.md --format png"
  }
}

Чтобы опубликовать свою тему, просто запустите npm publish, и всё. Процесс сборки не требуется (это означает, что вы можете напрямую публиковать файлы .vue и .ts, Slidev достаточно умён, чтобы понять их).

Пункты добавления темы следуют тем же соглашениям, что и локальная настройка, подробнее в документации по соглашениям об именовании.

Конфигурации по умолчанию

Доступно с версии v0.19

Тема может предоставлять дефолтные конфигурации через package.json.

// package.json
{
  "slidev": {
    "default": {
      "aspectRatio": "16/9",
      "canvasWidth": 980,
      "fonts": {
        "sans": "Robot",
        "mono": "Fira Code"
      }
    }
  }
}

Шрифты будут автоматически импортированы из Google Fonts.

Подробнее о шрифтах и frontmatter конфигурации.

Метаданные темы

Цветовая палитра

По умолчанию Slidev предполагает, что темы поддерживают как светлый, так и тёмный режим. Если вы хотите, чтобы ваша тема была представлена только в разработанной цветовой схеме, вам нужно будет явно указать её в package.json.

// package.json
{
  "name": "slidev-theme-my-cool-theme",
  "keywords": [
    "slidev-theme",
    "slidev"
  ],
  "slidev": {
    "colorSchema": "light" // или "dark", или "both"
  }
}

Чтобы получить доступ к тёмному режиму при стилизации вашей темы, вы можете обернуть CSS, зависящий от тёмного режима, внутри класса dark:

/* основные css стили */

html:not(.dark) {
  /* css для светлой темы */
}

html.dark {
  /* css для тёмной темы */
}

Slidev переключает класс dark в элементе html страницы для переключения цветовой схемы.

Подсветка

В теме также предусмотрены цвета для подсветки синтаксиса. Мы поддерживаем как Prism, так и Shiki. Подробнее в документации по подсветке синтаксиса.

Вы можете использовать как один из них, так и оба. Примеры конфигураций дефолтной темы смотрите в ./styles/prism.css / ./setup/shiki.ts.

Также не забудьте указать поддерживаемую подсветку в вашем package.json

// package.json
{
  "slidev": {
    "highlighter": "shiki" // или "prism", или "all"
  }
}

Версионирование Slidev

Если тема ссылается на определённую функцию Slidev, которая была недавно добавлена, то вы можете установить минимальную версию Slidev, необходимую для правильной работы вашей темы:

// package.json
{
  "engines": {
    "slidev": ">=0.19.3"
  }
}

Если пользователи будут использовать более старую версию Slidev, то будет выведена ошибка.