Pokaż spis treści

Komponent treści

Hero: hero

Sekcja otwierająca stronę, używana do ustawienia pierwszego komunikatu, najważniejszej akcji i kontekstu wizualnego. Dokumentacja tej podstrony opisuje, co operator ustawia w panelu, jak dane trafiają do renderera HeroBlock.astro i dlaczego komponent jest osobnym typem bloku.

Rola komponentu

Sekcja otwierająca stronę, używana do ustawienia pierwszego komunikatu, najważniejszej akcji i kontekstu wizualnego.

Operator buduje nagłówek z wielu linii, dodaje CTA, opcjonalnie wgrywa grafikę i ustawia wysokość sekcji. Renderer dobiera układ tekstu, tła i grafiki, a przyciski kierują do realnych slugów albo zewnętrznych adresów.

Pola edytora

  • headings z wariantami eyebrow, title i subtitle
  • description
  • buttons z wariantem primary, secondary albo link w samym silniku
  • trustItems
  • backgroundImage, backgroundGradient, backgroundBlobs, backgroundGrid, backgroundNoise
  • image i imageAlt
  • textVerticalPosition, imageVerticalPosition, heightVh
  • opcje WebP, kompresji i jakości obrazu

Od danych bloku do renderera

flowchart LR
  A["Paleta buildera"] --> B["blockType: hero"]
  B --> C["Formularz pól komponentu"]
  C --> D["data_json"]
  D --> E["content_blocks"]
  E --> F["HeroBlock.astro"]
  F --> G["Sekcja publiczna"]

Decyzje administracyjne i inżynierskie

Hero ma dużo pól, bo jest pierwszym ekranem strony i musi obsłużyć zarówno portal produktu, prostą stronę firmową, jak i dokumentację. Wspólne tokeny motywu utrzymują wygląd bez tworzenia osobnego komponentu dla każdej marki.

Wspólne pola techniczne, takie jak sectionWidth, sectionMarginTop, sectionMarginBottom, sectionPaddingTop i sectionPaddingBottom, sprawiają, że każdy komponent można dopasować do rytmu strony bez dopisywania klas albo stylów inline.

Powiązanie z builderem

Ten komponent jest dostępny w palecie tylko wtedy, gdy jego typ pozostaje aktywny w ustawieniu enabledBlockTypes. Import YAML również sprawdza ten typ przez rejestr bloków.