Розробка кастомних Page Models у Wagtail: поля, панелі, маршрути

Типова ситуація: клієнт просить не просто сторінку «Про нас», а цілий каталог послуг з цінами, тарифами та фільтрацією. Готові блоки не підходять — потрібні свої поля, вкладки в адмінці та своя маршрутизація. Рішення — кастомні Page Models. Ми використовуємо цей підхід у кожному проекті на Wagtail вже понад 5 років і накопичили більше 30 успішних кейсів. Наприклад, один інтернет-магазин вимагав 7 різних типів сторінок з унікальними полями та зв'язками — вся розробка зайняла 4 дні, а редактори отримали зрозумілий інтерфейс з вкладками. В середньому складний проект вимагає 5–10 типів сторінок. Стандартні поля Wagtail (заголовок, slug, тіло) не покривають потреб: якщо втиснути тарифи, характеристики та відгуки в одне RichTextField, адмінка перетворюється на кошмар. На одному проекті редактори витрачали по 20 хвилин на редагування однієї сторінки — після впровадження кастомних моделей час скоротився до 2 хвилин. Зниження на 90%.

Як кастомні Page Models спрощують життя редактору?

Редактору потрібна зрозуміла адмінка. Для цього ми використовуємо TabbedInterface з об'єктами ObjectList. У прикладі нижче — модель ServicePage з трьома вкладками. Зверніть увагу на InlinePanel для пов'язаних записів та на pricing_panels для відображення цін.

from django.db import models from wagtail.models import Page, Orderable from wagtail.fields import RichTextField, StreamField from wagtail.admin.panels import FieldPanel, InlinePanel, MultiFieldPanel, TabbedInterface, ObjectList from wagtail.search import index from modelcluster.fields import ParentalKey class ServicePage(Page): intro = models.CharField(max_length=500, blank=True) body = RichTextField(blank=True) icon = models.ForeignKey( 'wagtailimages.Image', null=True, blank=True, on_delete=models.SET_NULL, related_name='+', ) price_from = models.DecimalField(max_digits=10, decimal_places=0, null=True, blank=True) search_fields = Page.search_fields + [ index.SearchField('intro'), index.SearchField('body'), index.FilterField('price_from'), ] content_panels = Page.content_panels + [ FieldPanel('intro'), FieldPanel('icon'), FieldPanel('body'), InlinePanel('features', label='Особливості'), ] promote_panels = [ MultiFieldPanel([ FieldPanel('slug'), FieldPanel('seo_title'), FieldPanel('search_description'), ], heading='SEO'), ] pricing_panels = [ FieldPanel('price_from'), InlinePanel('pricing_tiers', label='Тарифи'), ] edit_handler = TabbedInterface([ ObjectList(content_panels, heading='Вміст'), ObjectList(pricing_panels, heading='Ціни'), ObjectList(promote_panels, heading='SEO'), ]) parent_page_types = ['services.ServicesIndexPage'] subpage_types = [] class Meta: verbose_name = 'Service Page' class ServiceFeature(Orderable): page = ParentalKey(ServicePage, on_delete=models.CASCADE, related_name='features') title = models.CharField(max_length=255) text = models.TextField(blank=True) icon = models.CharField(max_length=50, blank=True) panels = [ FieldPanel('title'), FieldPanel('text'), FieldPanel('icon'), ] 

Чому RoutablePage краще окремих сторінок?

Якщо потрібно зібрати блог з категоріями та тегами, ви можете створити окремі Page Model для кожної сутності, а можете використовувати RoutablePage. Порівняйте: при наповненні 10 категоріями та 20 тегами окремі сторінки вимагатимуть 30 моделей. Одна BlogIndexPage з декораторами @path замінює їх усі, скорочуючи код у 2 рази та спрощуючи підтримку. Згідно з документацією Wagtail, RoutablePage дозволяє зв'язувати одну сторінку з декількома URL-представленнями.

from wagtail.contrib.routable_page.models import RoutablePage, path, re_path class BlogIndexPage(RoutablePage, Page): intro = RichTextField(blank=True) content_panels = Page.content_panels + [FieldPanel('intro')] subpage_types = ['blog.BlogPost'] @path('') def index_view(self, request): posts = BlogPost.objects.live().child_of(self).order_by('-first_published_at') from django.core.paginator import Paginator paginator = Paginator(posts, 12) return self.render(request, context_overrides={ 'posts': paginator.get_page(request.GET.get('page')), }) @path('category/<str:category_slug>/') def category_view(self, request, category_slug): category = get_object_or_404(BlogCategory, slug=category_slug) posts = BlogPost.objects.live().child_of(self).filter(categories=category) return self.render(request, context_overrides={ 'posts': posts, 'category': category, }, template='blog/blog_category.html') @path('tag/<str:tag>/') def tag_view(self, request, tag): posts = BlogPost.objects.live().child_of(self).filter(tags__slug=tag) return self.render(request, context_overrides={ 'posts': posts, 'tag': tag, }) @re_path(r'^archive/(\d{4})/$') def year_archive(self, request, year): posts = BlogPost.objects.live().child_of(self).filter(date__year=year) return self.render(request, context_overrides={ 'posts': posts, 'year': year, }) 

Як кастомізувати зображення?

Для відповідності SEO та accessibility ми розширюємо стандартну модель Image, додаючи поля alt_text та credit. Це дозволяє редактору заповнювати обов'язковий alt-текст та вказувати автора знімка.

# core/models.py from wagtail.images.models import AbstractImage, AbstractRendition, Image class CustomImage(AbstractImage): alt_text = models.CharField(max_length=255, blank=True) credit = models.CharField(max_length=255, blank=True) admin_form_fields = Image.admin_form_fields + [ 'alt_text', 'credit', ] @property def default_alt_text(self): return self.alt_text or self.title class CustomRendition(AbstractRendition): image = models.ForeignKey(CustomImage, on_delete=models.CASCADE, related_name='renditions') class Meta: unique_together = [('image', 'filter_spec', 'focal_point_key')] 

get_context — передача додаткових даних

Метод get_context дозволяє збагатити шаблон даними з інших таблиць, GET-параметрів або форм. Він викликається при рендерингу сторінки.

def get_context(self, request): context = super().get_context(request) context['related_posts'] = BlogPost.objects.live().exclude( pk=self.pk ).filter( categories__in=self.categories.all() ).distinct().order_by('-first_published_at')[:3] context['comment_form'] = CommentForm() context['current_tag'] = request.GET.get('tag') return context 

Порівняння підходів до побудови Page Models

У реальному проекті для інтернет-магазину з каталогом з 10 000 товарів ми розробили 7 типів сторінок: CatalogPage, ProductPage, BrandPage, PromotionPage, ReviewPage, FAQPage та ContactPage. Для ProductPage використовували StreamField з блоками опису, таблиці характеристик та каруселі зображень. CatalogPage побудували на RoutablePage з фільтрацією за категоріями, ціною та тегами. Розробка зайняла 4 дні, редактори навчилися за годину. Час публікації нового товару скоротився в 10 разів.

Процес роботи над кастомними Page Models

1. Аналіз — вивчаємо структуру контенту клієнта, визначаємо необхідні поля та зв'язки.
2. Проектування — малюємо ER-діаграму моделей, продумуємо інтерфейс редактора (вкладки, inline-панелі).
3. Реалізація — пишемо Django моделі, налаштовуємо edit_handler, search_fields та RoutablePage.
4. Тестування — перевіряємо ревізії, чернетки, publish workflow, продуктивність.
5. Деплой — викочуємо на продакшен, налаштовуємо індексацію пошуку.

Що входить в результат

• Вихідний код кастомних Page Models з документацією українською.
• Адмін-панель з вкладками, валідацією полів та автодоповненням.
• Налаштована індексація для пошуку по сайту.
• Підтримка ревізій та Workflow для узгодження публікації.
• Навчання редакторів (1 година онлайн) та письмова інструкція.

Терміни та гарантії

Розробка 5–7 Page Models з RoutablePage та InlinePanel — 3–6 днів. Вартість розраховується індивідуально в залежності від складності. Ми даємо гарантію 6 місяців на всі моделі: будь-які баги виправляємо безкоштовно. Такий підхід дозволяє заощадити до 40% бюджету порівняно зі створенням окремих сторінок.

Оцінимо ваш проект за один день — просто зв'яжіться. Наш досвід: понад 5 років роботи з Wagtail, понад 30 успішних проектів. Отримайте консультацію — розкажемо, як кастомні Page Models вирішать ваше завдання.