Подготовка

Пора обустроить нашу мастерскую. К концу этой страницы Ember станет настоящей папкой на вашем компьютере, подключённой к запущенному Pano, показываемой вживую в браузере — и вы внесёте своё самое первое изменение.

Шаг 0 — убедитесь, что Pano запущен

Тема — это только внешний вид, ей нужен живой Pano позади, чтобы что-либо показать. Поэтому прежде всего убедитесь, что ваш Pano установлен и запущен. Если нет, сначала выполните Установку и вернитесь сюда.

Для этого руководства мы будем считать, что вы запустили Pano в режиме разработки:

# в папке вашего Pano
java -jar Pano-v1.0.0.jar --dev

В режиме --dev Pano слушает порт 8088. (Без --dev порт по умолчанию — 80.) Держите его запущенным в отдельном терминале.

Шаг 1 — создайте каркас Ember

Откройте новый терминал. Создайте тему одной командой — всегда именно с этим именем пакета:

bunx @panomc/theme-core new ember

Это создаёт папку ember со всем, что нужно теме, внутри. Перейдите в неё и установите её части:

cd ember
bun install

bun install делает больше, чем просто загружает зависимости — он также генерирует файлы, которые движок предоставляет вам: маршруты страниц, мосты $lib, базовые файлы lang/ и заглушку лицензии. Отдельного ручного шага нет; всё сделано за вас.

Если bun install кажется зависшим на «Resolving…»

Остановите его с помощью Ctrl + C и выполните вместо этого:

bun install --backend=copyfile

Повторная генерация позже

Всякий раз, когда вы обновляете движок или хотите пересоздать эти авто-файлы, выполните bun run sync. Прямо сейчас он не нужен — bun install уже это сделал.

Хотите узнать, что представляют собой все эти файлы? На странице Структура темы есть полная карта. Пока коротко: файлы, помеченные YOURS, — те, что вы редактируете; auto-файлы пересоздаются за вас, поэтому никогда не редактируйте их вручную.

Шаг 2 — направьте Ember на ваш Pano

Ember должен знать, где находится ваш запущенный Pano. Откройте файл .env в корне темы и задайте адрес:

# .env
VITE_API_URL=http://localhost:8088/api

Мы используем 8088, потому что запустили Pano с --dev. Если ваш Pano работает в другом месте (например, на порту по умолчанию 80), используйте этот адрес.

Шаг 3 — скажите Pano использовать вашу тему

Pano поставляется с собственным встроенным UI инициализации. Во время разработки Ember мы хотим, чтобы Pano использовал нашу тему. Откройте конфигурацию Pano, отключите настройку init-ui и перезапустите Pano. Страница Конфигурация сервера показывает, где именно находится эта настройка.

Шаг 4 — запустите Ember и увидите её вживую

Вернувшись в папку ember, запустите dev-сервер:

bun run dev:ui

Почему dev:ui, а не dev?

dev:ui запускает dev-сервер плюс наблюдатель за стилями, который перекомпилирует ваш SCSS всякий раз, когда вы сохраняете. Обычный bun run dev запускает только сервер — изменения в разметке появятся, а правки стилей и токенов — нет. При разработке темы всегда используйте dev:ui.

Теперь откройте ваш сайт через адрес Pano:

• http://localhost:8088, если вы запустили Pano с --dev, или
• http://localhost (порт 80) в противном случае.

Теперь вы должны увидеть свой сайт, работающий со свежей темой Ember. Он всё ещё выглядит как стандартный — это ожидаемо. Мы вот-вот это изменим.

Всегда открывайте через Pano, никогда через localhost:3000

Тема всегда работает за Pano. Если открыть собственный порт темы (localhost:3000) напрямую, он просто перенаправит вас на адрес Pano. Добавьте в закладки URL Pano, а не темы.

Шаг 5 — ваше первое изменение

Давайте докажем, что цикл работает. В редакторе откройте src/styles/tokens.scss и найдите строку основного цвета — изначально она закомментирована:

// $primary: #ff5722;

Удалите // и задайте тёплый оранжевый Ember:

$primary: #ff6a3d;

Сохраните файл и обновите браузер. Теперь вы должны увидеть, как акцентный цвет сместился к тёплому оранжевому на кнопках, ссылках и выделениях.

Это и есть весь цикл разработки: редактируй, сохраняй, обновляй. Вы будете повторять его до конца этого руководства.

Теперь, когда Ember жива и подключена, давайте придадим ей настоящую идентичность.

Далее: Дизайн и стили →