Poradnik

Jak stworzyc blok listy postow

Stworz dynamiczny blok listy postow z danymi kolekcji, wyszukiwaniem, nieskoczonym przewijaniem i okladkami. Pelny przeglad kodu.

Z
Zespol Cmssy
15 min read

Jak stworzyc blok listy postow

Zbuduj blok kolekcji ktory dynamicznie listuje strony CMS z wyszukiwaniem, paginacja i polami niestandardowymi.

Last updated: March 15, 2026

Co budujemy

Blok listy postow ktory dynamicznie pobiera i wyswietla strony z CMS. Funkcje:

  • Wstrzykiwanie danych server-side przez context.pages
  • Okladki z pol niestandardowych
  • Wyszukiwanie po stronie klienta z debounce
  • Nieskonczone przewijanie z paginacja
  • Filtrowanie po kategoriach
  • Tryb siatki i listy

Jak dzialaja bloki kolekcji

Bloki kolekcji to zwykle bloki uzywajace pola pageSelector w schemacie. Gdy platforma wykryje to pole, automatycznie:

  1. Pobiera podstrony wybranej strony nadrzednej (server-side)
  2. Wstrzykuje dane do context.pages
  3. Twoj blok renderuje liste z context.pages.items

Krok 1: Zdefiniuj schemat

Stworz config.ts z polami: heading, description, parentPage (pageSelector), postsPerPage (numeric), layout (select: grid/list), showSearch (boolean).

Kluczowe pole to parentPage z typem pageSelector - mowi platformie zeby pobierala podstrony i wstrzykiwala je do context.pages.

Krok 2: Odczytaj dane stron

Platforma wstrzykuje dane do kontekstu bloku. Kazdy PageItem ma: id, slug, fullSlug, publishedAt, displayName (wielojezyczne), seoDescription, customFields i pageType.

Krok 3: Odczytaj pola niestandardowe

Pola niestandardowe (okladka, autor, kategoria) sa w tablicy customFields. Uzyj helpera getCustomField(item, "cover_image") do ich wyciagania. Klucze pol sa w snake_case.

Krok 4: Zbuduj komponent

Stworz komponent React ktory renderuje siatke kart postow z okladkami, tytulem i opisem. Uzyj context.pages.items jako zrodla danych.

Krok 5: Dodaj wyszukiwanie po stronie klienta

Do wyszukiwania uzyj endpointu /api/graphql z query publicPagesByType. Przekaz workspaceId, parentSlug, search, limit i offset.

Krok 6: Dodaj nieskonczone przewijanie

Uzyj IntersectionObserver do ladowania kolejnych stron gdy uzytkownik przewinie na dol.

Kluczowe decyzje architektoniczne

SSR first, ulepszenia klienta

Poczatkowe ladowanie uzywa danych wstrzyknietych server-side. Brak spinnerow, brak przesuniecia layoutu. Funkcje klienta (wyszukiwanie, infinite scroll) ulepszaja doswiadczenie progresywnie.

Konfiguracja typu strony

Przed uzyciem bloku stworz typ strony Post z polami niestandardowymi: cover_image (Media), author (Relacja do User), category (Select).

Nastepne kroki