Pętla Szablony HTML

Szablony HTML pętli dla powtarzającej się zawartości

Szablon HTML pętli definiuje pojedynczą, powtarzającą się jednostkę i wypełnia ją dynamiczną zawartością z wpisów, produktów lub rekordów projektu. Wybierasz gotowy blok elementu, dostosowujesz go do publikowanych wpisów, a pętla rysuje ten znacznik dla każdego rekordu. Nic nie jest duplikowane ręcznie, więc pojedynczy blok decyduje o tym, jak będzie wyglądała cała siatka.

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

Częstym problemem związanym z pętlami jest mylenie szablonu z elementem. Szablon zawiera puste pola: często obszar obrazu, nagłówek i wiersz metadanych. Edycja nazwy produktu powoduje zmianę jednego rekordu; edycja znaczników powoduje natychmiastowe przesunięcie całej siatki.

To rozdzielenie pozostawia pętlę z trzema ruchomymi częściami:

1. Znacznikiem elementu, który ustala hierarchię i kolejność odczytu;
2. Pola dynamiczne, które wciągają wartości do tego znacznika;
3. Siatką zewnętrzną, która decyduje o tym, ile elementów znajduje się obok siebie.

Te trzy części decydują o tym, czy gotowy szablon jest użyteczny. Blok elementu z dwoma polami nie pomieści wpisów zawierających pięć pól.

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 podąża za typem zawartości i decyduje, co czytelnik zauważy w pierwszej kolejności.

Trzy znane przypadki pokazują, jak bardzo te zestawy się od siebie różnią:

1. Pętla wpisu wiąże datę, autora i fragment z nagłówkiem, więc fragment nigdy go nie przeważa;
2. Pętla zdarzeń rozpoczyna się datą i lokalizacją, więc blok czasu ma większą wagę niż obrazek;
3. Pętla katalogu zawiera kategorię, adres i dane kontaktowe, a obok nich znajduje się przycisk akcji.

Wszystkie trzy powtarzają jeden szkielet, ale waga w jego wnętrzu się zmienia, a dopasowanie szablonu do tej wagi to większość pracy związanej z zaznaczaniem. Dostosowanie układu wpisu do rekordów zdarzeń oznacza zmianę kolejności pól.

Utrzymanie porządku na różnych rozmiarach ekranu

Powtarzające się bloki dobrze się czytają na szerokim monitorze, ale stają się trudniejsze do odczytania po złożeniu kolumn. Ważne jest wtedy, czy rekord nadal trzyma się kupy: obraz nad własnym tytułem, cena obok własnej nazwy, akcja przypisana do własnego wpisu.

Przykładowa treść ukrywa to, ponieważ elementy demonstracyjne mają zazwyczaj tę samą wysokość. Problem pojawia 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ą w dużej skali.

W Nicepage element Grid umieszcza powtarzające się elementy w responsywnych komórkach; Przewodnik po responsywnym projektowaniu stron internetowych opisuje jego elementy sterujące.

Szablon HTML z pętlą zyskuje na popularności, gdy struktura, czytelność i kolejność danych są spójne dla dowolnej liczby rekordów i dowolnej szerokości ekranu.