Pętla Szablony HTML

Szablony HTML pętli dla powtarzalnych treści

Szablon HTML pętli definiuje pojedynczą powtarzaną jednostkę i wypełnia ją dynamiczną zawartością z wpisów, produktów lub rekordów projektów. Wybierasz gotowy blok elementu, dostosowujesz go do publikowanych wpisów, a pętla generuje ten kod dla każdego rekordu. Nic nie jest powielane ręcznie, dzięki czemu pojedynczy blok decyduje o układzie całej siatki.

Gdzie kończy się szablon, a zaczyna treść

Typowym błędem w przypadku pętli jest mylenie szablonu z samym elementem. Szablon zawiera puste miejsca: najczęściej obszar na zdjęcie, nagłówek i wiersz metadanych. Zmiana nazwy produktu modyfikuje jeden rekord; edycja kodu zmienia natychmiast całą siatkę.

Ten podział sprawia, że pętla składa się z trzech ruchomych elementów:

1. Kodu elementu, który ustala hierarchię i kolejność czytania;
2. Pól dynamicznych, które wstawiają wartości do tego kodu;
3. Zewnętrznej siatki, która decyduje, ile elementów znajduje się obok siebie.

Te trzy elementy decydują o użyteczności gotowego szablonu. Blok elementu z dwoma polami nie pomieści wpisów zawierających ich pięć.

Zestawy pól różnią się w zależności od pętli

Nie każda pętla zawiera obraz, tytuł i opis. Zestaw pól zależy od typu zawartości i określa, na co odbiorca zwraca uwagę w pierwszej kolejności.

Trzy popularne przypadki pokazują, jak bardzo te zestawy mogą się różnić:

1. Pętla wpisów łączy datę, autora i zajawkę z nagłówkiem, aby zajawka go nie przytłaczała;
2. Pętla wydarzeń zaczyna się od daty i lokalizacji, dzięki czemu blok czasowy ma większe znaczenie niż zdjęcie;
3. Pętla katalogu zawiera kategorię, adres i dane kontaktowe, z umieszczonym obok przyciskiem akcji.

Wszystkie trzy powielają jeden szkielet, jednak rozkład akcentów jest inny, a dopasowanie szablonu do tych proporcji stanowi główną część pracy nad wyborem. Przystosowanie układu wpisu do rekordów wydarzeń wymaga przestawienia pól.

Zachowanie właściwej kolejności na różnych ekranach

Powtarzające się bloki wyglądają czytelnie na szerokim monitorze, ale stają się trudniejsze w odbiorze, gdy kolumny zaczynają się zawijać. Istotne jest wtedy, czy rekord nadal stanowi spójną całość: obraz nad własnym tytułem, cena obok własnej nazwy, przycisk akcji przypisany do właściwej pozycji.

Przykładowa treść często to maskuje, ponieważ elementy demonstracyjne mają zazwyczaj taką samą wysokość. Trudności pojawiają się, gdy jeden tytuł projektu zajmuje trzy wiersze, a kolejny prawie nie ma opisu. Warto załadować najdłuższe i najkrótsze wpisy do wybranego szablonu przed publikacją na większą skalę.

W Nicepage Element Siatki umieszcza powtarzające się elementy w responsywnych komórkach; przewodnik po responsywnym projektowaniu stron opisuje jego opcje.

Szablon HTML pętli sprawdza się w praktyce, gdy struktura, czytelność i kolejność danych zachowują spójność przy dowolnej liczbie rekordów i każdej szerokości ekranu.