Docs

Русский

English
Türkçe

Русский

English
Türkçe

Оформление

Начало работы ​

Тема Pano управляет тем, как выглядит ваш сайт — его цветами, шрифтами и макетом. Сложные части (вход, плагины, загрузка данных, сборка) уже сделаны за вас движком под названием @panomc/theme-core. Ваша тема просто располагается поверх него и меняет внешний вид.

Эта страница проведёт вас от нуля до работающей темы и поможет сделать первое изменение примерно за две минуты.

Быть экспертом не нужно

Вы можете пройти каждый шаг здесь, просто копируя и вставляя команды. Полезно немного знать HTML, CSS, JavaScript и Svelte, но ничего из этого не требуется, чтобы начать.

Всё это ново для вас? Эти бесплатные руководства отличны:

Что вам нужно ​

Перед началом убедитесь, что у вас есть эти три вещи:

Что нужноЧто это такое
BunИнструмент, который устанавливает и запускает фронтенды Pano. Установите с bun.sh.
Запущенный PanoВаш собственный сервер Pano или запущенный на вашем компьютере — сначала Pano должен быть установлен и запущен; если вы его ещё не настроили, см. Установку. Ваша тема общается с ним во время работы.
Редактор кодаЛюбой текстовый редактор для кода, например VS Code.

Создайте тему ​

Новую тему вы создаёте одной командой. Откройте терминал и выполните:

sh
bunx @panomc/theme-core new my-theme

Это создаст новую папку my-theme со всем, что нужно теме, внутри неё.

Теперь перейдите в эту папку и установите её части:

sh
cd my-theme
bun install

Если bun install кажется зависшим

Если он зависает на шаге «Resolving…», остановите его (нажмите Ctrl + C) и выполните вместо этого:

sh
bun install --backend=copyfile

Затем сгенерируйте файлы, которые движок предоставляет вам:

sh
bun run sync

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

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

TIP

Порт Pano по умолчанию — 80. Если запустить Pano с флагом --dev, он работает на порту 8088 — это обычная схема при разработке темы. Если ваш Pano работает в другом месте, используйте его адрес.

Ещё один шаг на стороне Pano: откройте файл конфигурации Pano, отключите настройку init-ui и перезапустите Pano. Это говорит Pano использовать вашу тему в разработке вместо запуска собственной встроенной. Где находится эта настройка — см. страницу Конфигурация сервера.

Наконец, запустите тему:

sh
bun run dev:ui

Почему dev:ui?

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

Теперь откройте сайт через адрес Pano: http://localhost:8088, если Pano запущен с --dev, или http://localhost (порт 80 по умолчанию — либо тот, что задан в конфигурации). Вы должны увидеть свой сайт с вашей новой темой.

WARNING

Не открывайте тему по адресу localhost:3000 — тема всегда работает за Pano. Если открыть собственный порт темы напрямую, он автоматически перенаправит вас на адрес Pano.

Ваше первое изменение за 2 минуты ​

Давайте изменим основной цвет вашей темы.

  1. В редакторе откройте файл src/styles/tokens.scss.
  2. Найдите строку для основного цвета (primary). Изначально она закомментирована, вот так:
    scss
    // $primary: #ff5722;
  3. Удалите // в начале, чтобы включить её, и измените цвет:
    scss
    $primary: #10b981;
  4. Сохраните файл, затем обновите браузер.

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

Что только что произошло

tokens.scss — это список значений дизайна вашей темы: цвета, шрифты, размеры. Любое значение в движке можно заменить отсюда. Измените токен — и он изменится везде, где используется.

Что дальше ​

Теперь у вас есть работающая тема, и вы знаете, как её менять. Куда идти дальше — в зависимости от того, что вы хотите сделать:

Copyright © 2026 Pano