Структура темы

Когда вы создаёте тему из шаблона, вы получаете папку из 17 файлов. Это может показаться большим количеством, но большинство из них не требуют вашего внимания. Эта страница объясняет, для чего нужен каждый из них и какие вы на самом деле редактируете.

Основная идея

Представьте тему Pano как две части, работающие вместе:

• Движок (@panomc/theme-core) — он делает всё, что работает: вход, регистрацию, плагины, загрузку данных с вашего сервера и сборку сайта. Вы ничего из этого не пишете. Он приходит как пакет, и вы обновляете его, как любой другой пакет.
• Ваша тема — это только внешний вид: цвета, шрифты, макет и текст. Это та часть, которой вы владеете и которую редактируете.

vanilla-theme — это не шаблон

vanilla-theme — это встроенный вид по умолчанию, с которым поставляется Pano. Это не отправная точка для копирования или форка. Всегда начинайте новую тему с bunx @panomc/theme-core new и позвольте движку делать тяжёлую работу.

Файлы

Вот тема, созданная из шаблона, с примечанием к каждой части:

my-theme/
├─ manifest.json          ← ВАШ    имя, версия, автор, скриншоты
├─ theme.config.js        ← ВАШ    ваши переопределения представлений + доп. настройки
├─ core-meta.json         ← авто   уровень движка, который использует ваша тема
├─ package.json           ← авто   зависимости (svelte закреплён на движке)
├─ svelte.config.js       ← авто   однострочный вызов движка
├─ vite.config.js         ← авто   однострочный вызов движка
├─ lang-overrides/        ← ВАШ    только текст, который вы хотите изменить
├─ screenshots/           ← ВАШ    изображения-превью вашей темы
├─ static/                ← ВАШ    ваши изображения, шрифты и другие ресурсы
├─ src/
│  ├─ styles/tokens.scss  ← ВАШ    ваши цвета, шрифты, размеры
│  ├─ styles/style.scss   ← ВАШ    ваш дополнительный CSS
│  ├─ views/              ← ВАШ    ваши переопределения макета (когда нужны)
│  ├─ routes/             ← авто   создаётся `bun run sync` — никогда не редактируйте
│  ├─ lib/                ← авто   создаётся `bun run sync` — никогда не редактируйте
│  ├─ hooks.server.js     ← авто   сгенерирован
│  └─ hooks.client.js     ← авто   сгенерирован
└─ lang/                  ← авто   базовые текстовые файлы — никогда не редактируйте

Файлы, которые принадлежат вам

Это файлы, которые вы редактируете. Именно они делают вашу тему вашей темой.

Файл или папка	Для чего используется
manifest.json	Имя, версия и данные вашей темы (см. ниже).
theme.config.js	Регистрирует переопределения макета и дополнительные настройки.
src/styles/tokens.scss	Ваши значения дизайна — цвета, шрифты, радиусы, тени.
src/styles/style.scss	Любой дополнительный CSS, который вы хотите добавить.
src/views/	Собственный макет, когда одних цветов недостаточно.
lang-overrides/	Только слова и фразы, которые вы хотите изменить.
screenshots/	Изображения-превью, показываемые для вашей темы.
static/	Ваши изображения, шрифты и другие файлы.

Файлы, которые генерируются

Эти файлы создаются для вас движком. Никогда не редактируйте их вручную — следующий bun run sync или обновление движка перезапишет их, и ваши изменения исчезнут.

Файл или папка	Что это
src/routes/	Связка страниц, пересоздаётся из движка.
src/lib/	Вспомогательный код и мосты, пересоздаются из движка.
lang/	Базовый текст каждого языка (меняйте текст через lang-overrides/).
hooks.server.js, hooks.client.js	Крошечные установочные файлы, вызывающие движок.
core-meta.json, package.json, svelte.config.js, vite.config.js	Конфигурация, настроенная генератором шаблона для вас.

Помещайте каждое изменение в файл, который принадлежит вам

Если вы отредактируете сгенерированный файл, ваш труд пропадёт при следующем запуске bun run sync. Редактируйте только файлы, отмеченные как «ваши» выше.

Манифест

manifest.json описывает вашу тему для Pano. У него небольшой набор полей:

Поле	Что означает
id	Уникальное имя вашей темы. Оно не может быть vanilla-theme.
title	Понятное имя, которое видят люди.
version	Версия вашей темы, напр. 1.0.0.
author	Ваше имя.
panoVersion	Версия Pano, под которую сделана ваша тема.
screenshots	Список изображений-превью из вашей папки screenshots/.
premium	true, если тема платная, false, если бесплатная.

Что для вас значит «движок обновляется»

Поскольку движок — это пакет, его обновление — всего две команды:

bun update @panomc/theme-core
bunx @panomc/theme-core sync

Первая строка подтягивает новейший движок. Вторая пересоздаёт «авто»-файлы выше, чтобы они ему соответствовали.

Ваш вид остаётся

Всё из списка «ваших» — ваши цвета, ваш текст, ваши ресурсы — не затрагивается обновлением. Вы получаете новые возможности и исправления движка, а ваша тема продолжает выглядеть ровно так, как вы её сделали.