Перетворіть статичну верстку на живий сайт.
Почніть з HTML, який вам подобається. Поєднайте шаблони, повторно використовувані компоненти й контент через Wulver — і дайте дизайну життя за межами демонстраційної сторінки.
Пройти шлях перетворення ↓Шаблон — це початок історії.
Готова HTML-тема вже має візуальну мову: типографіку, відступи, картки, навігацію та ритм сторінки. Але демонстраційні заголовки, повторювані секції й прописані вручну посилання ще описують лише приклад. Справжньому сайту потрібно пов’язати ці елементи з реальним контентом.
Wulver надає робоче середовище для цієї адаптації. Імпортуйте тему, підготуйте Django-шаблони, відокремте спільні фрагменти й під’єднайте ділянки, що мають змінюватися, до потрібних даних. Ви визначаєте, що зберегти в початковій верстці та де сайт має стати динамічним.
Чотири кроки від верстки до системи.
Імпорт
Додайте HTML-тему та її ресурси до проєкту.
Структура
Відокремте спільну основу від окремих сторінок.
Підключення
Замініть демонстраційний контент змінними й модулями.
Перевірка
Перевірте готові сторінки з власним наповненням.
Перенесіть дизайн у своє робоче середовище.
Імпортер HTML-теми приймає ZIP-архів і формує карту знайдених HTML-файлів. Стилі, скрипти та зображення потрапляють до каталогу статичних ресурсів теми. Це вихідний матеріал для наступного етапу: підготовки шаблонів, які відображатимуть сайт.
Використовуйте підготовлену HTML-збірку, якщо вихідна тема залежить від процесу збирання. Сам імпорт файлів ще не підключає магазин, форму пошуку чи картку статті до даних застосунку. Саме ці зв’язки й створюються під час адаптації.
Одна спільна основа. Багато різних сторінок.
Шапка, підвал і підключення спільних ресурсів зазвичай повторюються в усій темі. Винесіть загальну структуру в базовий шаблон, залиште іменовані блоки для вмісту сторінок, а повторювані фрагменти оформіть як include. Редактор шаблонів має інструменти виділення include та блоків сторінки, а також перетворення посилань на ресурси на Django static-теги.
Користь стає відчутною, коли дизайн змінюється. Спільний фрагмент має одне місце для редагування, а кожна сторінка зберігає власну композицію. Результат залишається зрозумілим Django-кодом, який розробник може переглянути й розширити.
Дослідити шаблонізатор →Нехай дизайн виражає ідею. Нехай система працює з контентом.
Момент, коли приклад стає вашим сайтом.
Фіксований заголовок стає назвою сторінки. Демонстраційна стаття — обраною публікацією. Повторювана картка — частиною циклу. Верстка залишається знайомою, а контент надходить із контексту, підготовленого для конкретного шаблону.
<h1>About our project</h1><h1>{{ title }}</h1>Цей невеликий приклад використовує заголовок, який передається до шаблону сторінки Wulver. Більші секції працюють за тим самим принципом, але потребують відповідного контексту: полів статті для сторінки публікації, даних категорії для розділу або налаштованого модуля для добірки матеріалів.
Контент на своєму місці
Пов’яжіть заголовки, вступи, зображення й посилання з полями, які використовує сторінка.
Повторно використовувані добірки
Використовуйте модулі контенту там, де дизайн передбачає список публікацій або зображень.
Осмислена взаємодія
Під’єднайте форми та інтерактивні елементи до відповідної логіки застосунку.
Остаточна перевірка — реальна сторінка.
Призначте підготовлений шаблон відповідній сторінці або типу контенту, а потім перевірте його зі справжніми заголовками, зображеннями й текстом. Короткий демонстраційний заголовок рідко виявляє ті самі проблеми верстки, що довга назва публікації або порожнє поле зображення.
- Перевірте стилі, скрипти, шрифти й адреси зображень.
- Перегляньте вузькі екрани, довгі тексти та відсутній необов’язковий контент.
- Протестуйте навігацію, форми та переходи між сторінками.
- Перевірте переклади, метадані й остаточні публічні адреси.
Збережіть свободу обирати свій дизайн.
Wulver дає розробнику інструменти, щоб перетворити HTML-основу на структурований Django-сайт. Шаблон задає візуальну ідею, а адаптація пов’язує її з контентом і поведінкою, потрібними вашому проєкту. Почніть з однієї сторінки, зробіть зв’язки зрозумілими й розвивайте систему далі.
Для практичного знайомства перегляньте уроки 09–12 відеокурсу Wulver: теми, імпорт HTML, редактор шаблонів і компоненти.