Modularna architektura bloków

Treść jako komponenty. Struktura, która skaluje się razem z Tobą.

b10cks opiera się na modularnej architekturze bloków, która odzwierciedla sposób, w jaki nowoczesne zespoły frontendowe myślą o UI. Buduj swój model treści z atomowych, wielokrotnego użytku, kompozycyjnych bloków — a potem składaj je w dowolne formy.

Zacznij za darmo

Problem niedopasowania

Twój frontend korzysta z komponentów. Dlaczego Twój CMS nie miałby?

Nowoczesny frontend opiera się na zasadach atomic design — atomy, molekuły, organizmy, szablony, strony. Komponenty składają się z mniejszych komponentów. Struktura jest wielokrotnego użytku, przewidywalna i łatwa w utrzymaniu.

Potem otwierasz swój CMS i widzisz płaską listę pól tekstowych.

b10cks wypełnia tę lukę. Twój model treści budujesz z bloków — dokładnie tak jak swoje komponenty UI — dzięki czemu struktura Twojego CMS-a odzwierciedla strukturę produktu. Koniec z warstwą tłumaczącą. Koniec z domysłami, do czego mapuje się dane pole.

Czym jest blok?

Podstawowa jednostka treści w b10cks.

Blok to nazwana, typowana, wielokrotnego użytku struktura treści. Pomyśl o nim jak o komponencie treści: ma nazwę, zestaw typowanych pól i jasno określony cel w Twoim modelu treści.

Przykłady:

  • HeroSection — title: Text, subtitle: Text, cta: Link, background: Image
  • FeatureCard — icon: Text, heading: Text, body: RichText
  • TestimonialBlock — quote: Text, author: Reference(TeamMember), company: Text
  • PricingTier — name: Text, price: Number, features: Array(Text), highlighted: Boolean

Zdefiniuj go raz. Używaj wszędzie.

Atomic design, natywnie wspierany

Atomy → Molekuły → Organizmy → Treść.

b10cks wspiera pełne zagnieżdżanie bloków. Blok może zawierać pola, odwołania do innych bloków albo tablice bloków — dzięki temu możesz budować hierarchie treści dokładnie dopasowane do Twojego systemu atomic design.

Bloki w edytorze wizualnym

To, co modelujesz, widzą redaktorzy.

Każdy typ bloku, który definiujesz na canvasie, mapuje się bezpośrednio na komponent w wizualnym edytorze treści. Redaktorzy widzą bloki jako nazwane, uporządkowane formularze — a nie ścianę identycznych pól tekstowych.

  • Typy bloków są oznaczone nazwą i ikoną
  • Zagnieżdżone bloki są wizualizowane jako zwijane sekcje
  • Przeciągnij, aby zmienić kolejność bloków w tablicach
  • Tworzenie bloków inline bez opuszczania kontekstu strony

Ty definiujesz strukturę. Redaktorzy ją wypełniają — intuicyjnie, bez szkolenia.

Schematy bloków jako kod

Dla zespołów, które wolą config-as-code.

Definiuj schematy bloków programowo, korzystając z formatu schematów b10cks — wersjonowanych w Twoim repozytorium obok kodu frontendowego.

Wypychaj zmiany schematów przez CI/CD tak jak każdą inną zmianę w kodzie. Canvas automatycznie je odzwierciedli.

Migracja i ewolucja

Modele treści się zmieniają. b10cks sprawia, że to bezpieczne.

Prawdziwe architektury treści ewoluują. Będziesz dodawać pola, zmieniać nazwy typów i przebudowywać hierarchie wraz ze wzrostem produktu. b10cks sprawia, że te zmiany są łatwe do opanowania:

  • Dodawanie pól — bezpieczne; istniejące wpisy domyślnie otrzymują wartość null lub wskazaną wartość domyślną
  • Zmiana nazw pól — śledzona historią migracji, więc odwołania się nie psują
  • Wycofywanie bloków — oznacz typ bloku jako przestarzały bez usuwania go; redaktorzy zobaczą ostrzeżenie, a istniejąca treść zostanie zachowana
  • Historia wersji — każda zmiana schematu jest zapisywana, z możliwością przywrócenia

Twórz treści tak, jak tworzysz UI.

Luka między Twoim systemem projektowym a CMS-em nie musi istnieć. Zacznij tworzyć z blokami b10cks — za darmo, open source i gotowe już dziś.