Изменение страниц

Цвета и шрифты завели Ember далеко. Теперь мы хотим, чтобы сама главная страница выглядела иначе — тёплый приветственный баннер, а под ним новости. Это значит изменить представление страницы: её разметку и макет.

Это единственный шаг, которому нужен базовый Svelte. Не паникуйте: вы никогда не начинаете с пустой страницы — вы редактируете рабочую копию настоящего дизайна. Если Svelte для вас нов, руководство по Svelte покрывает всё, что использует представление.

Полный справочник: Изменение дизайна страниц.

Идея в одном предложении

Каждая страница — это логика (загрузка данных, вход, плагины — этим владеет движок) плюс представление (как это выглядит — вам менять). Вы можете взять под контроль внешний вид любого представления, не трогая его логику.

Шаг 1 — посмотрите, какие представления существуют

Перечислите все представления, которые вы можете взять под контроль, вместе с данными, которые получает каждое:

bunx @panomc/theme-core list-views

Вы увидите весь набор — home, login, register, profile и другие. Нам нужна главная страница, это HomeView.

Шаг 2 — извлеките HomeView

Чтобы стать владельцем представления, извлеките (eject) его. Это копирует стандартный HomeView движка в вашу собственную папку src/views/ и регистрирует его в theme.config.js:

bunx @panomc/theme-core eject-view HomeView

Теперь у вас есть рабочий src/views/HomeView.svelte — настоящая, функционирующая копия, которую вы можете свободно редактировать.

Шаг 3 — сначала прочитайте заголовок

Откройте src/views/HomeView.svelte. Он начинается с комментария-заголовка, перечисляющего каждый prop, который движок передаёт вашему представлению — считайте это материалами, с которыми вам предстоит работать. Выглядит это примерно так:

<!--
  @view HomeView
  Props:
    data.posts       array — posts of the current page
    data.postCount   number — total number of posts
    data.page        number — current page number
    data.totalPage   number — total page count for pagination
    themeSettings    object — theme settings from context
    onPageClick      function(data, page) — pagination handler
-->

Что бы ни перечислял заголовок — это то, что у вас есть. Хранилища (stores) приходят как объекты хранилищ (читайте их с префиксом $, как $_); действия приходят как функции, которые вы вызываете.

Шаг 4 — добавьте приветственный баннер Ember

Давайте добавим тёплый герой-блок над списком новостей. Найдите начало разметки и вставьте баннер:

<section class="ember-hero">
  <h1>Welcome to Ember SMP</h1>
  <p>Grab a torch. Your adventure starts at the campfire.</p>
</section>

Затем добавьте немного стиля в src/styles/style.scss (ниже импортов):

.ember-hero {
  padding: 3rem 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, #ff6a3d, #ffb347);
  border-radius: 14px;
  color: #fff;
}

Сохраните и обновите. Теперь вы должны увидеть светящийся оранжевый приветственный баннер над лентой новостей.

Пока захардкожено, позже — переводимо

Мы написали текст баннера прямо в разметке на данный момент. На следующей странице мы перенесём эти строки в файлы переводов, чтобы Ember приветствовала каждого посетителя на его языке.

Шаг 5 — сохраните слоты плагинов

Это единственное правило, которое нельзя нарушать. Представления содержат точки монтирования плагинов — слоты <ViewComponent> и маркеры <Hook> — и именно там установленные плагины появляются на странице. Когда вы перепроектируете, сохраняйте каждую из них. Перемещайте их, меняйте стиль вокруг них, но никогда не удаляйте.

Убрал слот — потерял плагин

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

Шаг 6 — проверьте свою работу

Движок поставляется со страховочной сетью, которая ловит отсутствующий слот плагина (и не только) прежде, чем вы сможете выпустить сломанную тему:

bun run check

Зелёный check означает, что ваше представление всё ещё соблюдает свой контракт. Если он жалуется на отсутствующую точку монтирования, верните её на место и запустите снова.

Добавление новых настроек для владельца сайта

Если ваша переработка добавляет опцию, которой владелец сайта должен управлять из панели (скажем, произвольный заголовок героя), она должна быть объявлена под settingsSchema в theme.config.js, иначе ввод не сохранится. Справочник Изменение дизайна страниц показывает точную форму.

Главная страница Ember теперь имеет свою собственную форму. Давайте заставим её слова говорить на каждом языке.

Далее: Переводы →