Strony i bloki
Witryna to drzewo stron,a strona to lista bloków.
To cały model myślenia i castomUI celowo go nie komplikuje. Okno Strony (Pages) trzyma drzewo. Otwierasz stronę, a jej bloki ustawiają się obok podglądu na żywo — każdy to komponent z formularzem, a nie sterta znaczników, przy której trzeba chodzić na palcach.
Drzewo stron z flagami,
które mają znaczenie.
Strony zagnieżdżają się jedna pod drugą i zmieniają kolejność przeciąganiem, więc drzewo, które widzisz, to faktyczna struktura witryny. Każda strona ma miniaturę zrzutu ekranu i rząd flag czytelnych w mgnieniu oka: strona główna, 404, szkic, ukryta, ukryta w mapie strony, połączona ze zbiorem danych oraz język, w którym jest napisana.
Szczegóły strony to nazwa, adres URL, strona nadrzędna, strona bazowa, język, szablon, w którym osadzona jest strona, style i instrukcje dla wyszukiwarek: index lub noindex, follow lub nofollow oraz adres kanoniczny.
Ustawienia strony to przełączniki, po które sięgasz najczęściej. Oznacz stronę jako szkic, a nie da się jej opublikować, dopóki tego nie cofniesz. Włącz albo pomiń nagłówek i stopkę z szablonu. Wyłącz ją z mapy strony albo ukryj całkowicie.
Każda strona ma też opis i krótki cel tej strony — dwa zdania pisane dla AI, nie dla odwiedzających, żeby wszystko, co wygenerujesz później, wiedziało, po co ta strona istnieje.
- ⌂StartStrona główna · PL · szablon „Główny”
- 1UsługiTrzy podstrony, ułożone przeciąganiem.
- 2Produkty / {rekord}Połączona ze zbiorem danych — jedna strona na każdy rekord w widoku.
- ·Oferta zimowaSzkic. Ukryta w mapie strony. Jeszcze nie do opublikowania.
- 3ContactEN · sklonowana i przetłumaczona z „Kontakt”.
- !Nie znalezionoStrona 404 · bez nagłówka, bez stopki.
Wymyślony przykładowy projektFlagi czytane, nie zgadywane
Tworzenie stron
Ręcznie, z AI,
przez kopię albo ze zbioru danych.
Nowa strona, ręcznie
Wybierz szablon, stronę nadrzędną i język, nadaj nazwę — i strona pojawia się w drzewie, gotowa na bloki. Okno Nowa strona (New page) proponuje też, żeby zamiast tego wygenerować ją z AI na podstawie instrukcji.
Klonowanie strony
Skopiuj stronę razem z blokami, kiedy następna ma zacząć się tam, gdzie skończyła poprzednia. Przydaje się przy stronach usług, które mają ten sam układ i różnią się każdym zdaniem.
Klonowanie z tłumaczeniem
Skopiuj stronę do języka docelowego w jednym kroku, w całości albo płytko, wybranym modelem — DeepL, kiedy liczy się szybkość, model językowy, kiedy liczy się ton.
Strony ze zbioru danych
Połącz stronę z widokiem zbioru danych, a stanie się stroną-szablonem: jedna strona na rekord, więc sto produktów potrzebuje jednego projektu, a nie stu jego kopii.
Cała mapa strony
Wygeneruj strukturę stron z AI na podstawie instrukcji i źródłowego adresu URL i zdecyduj, czy istniejące strony zostają, znikają z widoku, czy idą do usunięcia.
Zrzuty ekranu
Zrób zrzut strony, a potem rysuj po nim, żeby pokazać, co ma się zmienić. Szybciej niż akapit zaczynający się od „ta rzecz po lewej, trochę niżej”.
Najpierw rozłóż stronę.
Słowa przyjdą później.
Bloki:
treść, komponent po komponencie.
Otwórz stronę, a lista bloków pokaże, z czego jest zbudowana, od góry do dołu. Każdy wiersz przesuniesz w górę lub w dół, ukryjesz i pokażesz, sklonujesz, edytujesz albo usuniesz. Kliknij blok, a zostanie pokazany i podświetlony w podglądzie — nie ma więc wątpliwości, który „tekst ze zdjęciem” zaraz zmieniasz. Plakietki oznaczają bloki z kotwicą i bloki należące do przełącznika (switcher) — zestawu wymiennych bloków zajmujących jedno miejsce — a obok widać język każdego bloku.
Każdy blok jest instancją komponentu, a jego formularz ustawień powstaje ze struktury danych tego komponentu. Pole nagłówka, wybór obrazu, lista kart, kolor: co komponent zadeklaruje, to formularz udostępni. Nikt nie musi otwierać kodu, żeby zmienić zdanie, i nikt nie zepsuje układu, zmieniając je.
Szczegóły bloku to nazwa, język, nazwa stylu CSS, sterownik (driver), kotwica i przełącznik. Dla tych, którzy wolą, surowe ustawienia w JSON są jedną zakładkę dalej i przechodzą walidację przed zapisem.
Blok nie jest na zawsze związany ze swoim komponentem. Zmień komponent pod spodem, sklonuj komponent tylko dla tego bloku, kiedy jedna instancja ma się różnić, albo go wygeneruj ponownie. Przenieś lub sklonuj blok na inną stronę albo do szablonu, żeby pojawiał się wszędzie. Przetłumacz blok, głęboko lub płytko, z klonowaniem albo bez.
AI tam, gdzie jest blok.
Zmiana bloku z AI działa w trybie prostym — mówisz, co ma być inaczej — albo zaawansowanym, w którym zaznaczasz, jakie części projektu trafiają do kontekstu: informacje o projekcie, style, strona, jej pozostałe bloki.
Generowanie treści strony z AI przyjmuje instrukcje, opcjonalny źródłowy adres URL do pobrania treści i wybór, skąd pochodzą komponenty: z tego projektu, z ocenionych komponentów, z połączonych projektów albo ze wszystkich ocenionych. Istniejące bloki zostają, znikają z widoku albo idą do usunięcia — decyzja należy do Ciebie. Odtworzenie z zupełnie nowymi komponentami zaczyna stronę od zera, kiedy problemem jest sama struktura.
A Wygeneruj całą treść przepuszcza przez AI po kolei każdy blok oznaczony na stronie jako gotowy, więc strona pełna wypełniaczy staje się stroną pełną szkiców, zanim skończysz czytać pierwszy.
- 1Instrukcje„Cennik małego biura rachunkowego. Trzy pakiety, FAQ, jedno wezwanie do działania.”
- 2Źródłowy URLStary cennik, pobrany dla faktów.
- 3Komponenty zTylko z tego projektu — zostaje firmowy wygląd.
- ?Istniejące blokiUkryć, nie usuwać. Łatwiej porównać.
- 4WynikNowe bloki na liście, każdy jako edytowalny formularz. Strona wciąż jest szkicem.
Wymyślony promptPrzejrzyj, zanim zdejmiesz szkic
Wokół stron
Menu, META
i cała instalacja pod spodem.
Menu
Tyle menu, ile potrzebuje projekt, osobno dla każdego języka; ukrywasz je, klonujesz albo usuwasz. Elementy zagnieżdżasz przeciąganiem i linkujesz do strony lub dowolnego adresu URL, z tytułem, oknem docelowym, stylem CSS, obrazem lub ikoną i widocznością. Dodaj elementy (Add elements) buduje menu z kotwic strony za jednym razem — nawigacja strony typu one-page gotowa. Sklonuj menu i przetłumacz je razem z resztą języka.
SEO, META i OpenGraph
Każda strona ma tytuł, opis i słowa kluczowe, a obok przycisk Generuj META z AI, oraz własne wartości OpenGraph nadpisujące domyślne ustawienia projektu. Zakładka META wymienia wszystkie strony z edytowalnymi w miejscu polami URL, tytułu, opisu, słów kluczowych i canonical — więcej w SEO i migracji.
Przekierowania
Lista przekierowań 301 lub 302 w ustawieniach projektu, żeby przebudowana strona nie gubiła po cichu adresów, które znają już ludzie i wyszukiwarki.
Zmienne globalne
Typowane wartości definiowane raz i używane w dowolnym miejscu projektu — numer telefonu, godziny otwarcia, cena — więc zmiana jednej nie oznacza przeszukiwania czterdziestu bloków.
Dlaczego formularz,
a nie kod.
Stronę zbudowaną z formularzy można oddać komuś, kto nie powinien dotykać HTML — klientowi, koledze z zespołu, osobie, która naprawdę wie, w jakich godzinach jest otwarte — bez listy miejsc, których lepiej nie ruszać. Komponent odpowiada za znaczniki, blok za treść. Spotykają się dopiero w podglądzie.
To także sprawia, że witryna pozostaje spójna, kiedy rośnie. Czterdzieści stron z dwunastu komponentów wygląda jak jedna strona. Czterdzieści stron z czterdziestu wklejonych fragmentów wygląda jak czterdzieści popołudni.
Małe ostrzeżenie: flaga szkicu istnieje, bo „tylko jeszcze raz rzucę okiem przed publikacją” mówi się z wielkim przekonaniem i bardzo rzadko się to robi. Oznacz stronę jako szkic. Przycisk publikacji zapamięta za Ciebie.
Każde okno,
jedna strona.
Otwórz edytor i ułóż okna tak, jak wymaga tego praca.
Otwórz castomUI Zobacz cennik