Создайте свою первую тему
Добро пожаловать в руководство по темам Pano. Это кулинарная книга: вместо того чтобы объяснять каждую возможность в отрыве от практики, мы вместе создаём одну настоящую тему — от пустой папки до опубликованной темы на Marketplace.
К концу вы проделаете каждый шаг сами хотя бы раз — и будете точно знать, куда смотреть, когда захотите копнуть глубже.
Справочник против руководства
Раздел Разработка темы — это справочник, он объясняет каждую тему в полном объёме. Это руководство — пошаговая сборка. Когда вам понадобится больше глубины по какому-то шагу, мы даём прямую ссылку на соответствующую страницу справочника. Ничто здесь ему не противоречит; мы просто проходим единственный, конкретный путь сквозь него.
Тема, которую мы создаём: Ember
Знакомьтесь с нашим примером. Ember — это тема для дружелюбного survival-сервера Minecraft. Её характер:
- Тёплая оранжевая палитра — представьте костры и лаву в сумерках.
- Округлое, уютное ощущение.
- Главная страница, которая приветствует игроков и показывает последние новости.
- Собственный слоган, переведённый на каждый язык, на котором говорит сервер.
Её идентичность, которую мы будем использовать на протяжении всего пути:
| Поле | Значение |
|---|---|
id | ember |
title | Ember |
| Настроение | тёплый, уютный survival-сервер |
| Акцентный цвет | тёплый оранжевый (#ff6a3d) |
id — навсегда
Мы выбрали ember в качестве id темы намеренно и никогда не изменим его после публикации — новый id для Pano считается совершенно новой темой. Он также никогда не может быть vanilla-theme. Подробнее об этом в разделе Сборка и упаковка.
Что вам нужно
Три вещи, как и для любой темы Pano:
| Что нужно | Что это такое |
|---|---|
| Bun | Устанавливает и запускает фронтенды Pano. Скачайте с bun.sh. |
| Запущенный Pano | Ваша тема во время работы общается с живым Pano. Если у вас его ещё нет, сначала выполните Установку — Pano должен быть запущен, прежде чем ваша тема сможет что-либо показать. |
| Редактор кода | Любой, какой вам нравится, например VS Code. |
Быть экспертом не нужно. Немного HTML, CSS и Svelte помогут, но каждый шаг здесь можно просто копировать и вставлять. Если хотите мягкое введение — руководство по Svelte и MDN отличны и бесплатны.
План пути
Вот всё путешествие целиком. Каждый шаг — одна страница, и каждая страница заканчивается ссылкой на следующую.
- Подготовка — установите инструменты, создайте каркас Ember, подключите его к Pano и увидите вживую в браузере.
- Дизайн и стили — придайте Ember её тёплый оранжевый вид с помощью токенов, цветов и шрифтов.
- Изменение страниц — возьмите под контроль главную страницу: извлеките её представление, отредактируйте разметку и сохраните слоты плагинов.
- Переводы — переведите собственный текст Ember на каждый язык, на котором говорит ваш сервер.
- Выпуск — отполируйте манифест, соберите, проверьте, упакуйте, установите на свой Pano и опубликуйте на GitHub и Marketplace (с необязательным премиум-путём).
Готовы? Давайте обустроим нашу мастерскую.
Далее: Подготовка →