Slinga HTML-mallar

Loop HTML-mallar för upprepat innehåll

En loop HTML-mall definierar en enda upprepad enhet och fyller den med dynamiskt innehåll från inlägg, produkter eller projektposter. Du väljer ett färdigt objektblock, anpassar det till de poster du publicerar, och loopen ritar den markupen för varje post. Ingenting dupliceras för hand, så ett enda block avgör hur hela rutnätet läses.

Var mallen slutar och innehållet börjar

Den vanliga förvirringen med loopar är att man misstar mallen för objektet. En mall innehåller tomma platser: ofta ett bildområde, en rubrik och en rad metadata. Redigera ett produktnamn och en post ändras; redigera markupen och hela rutnätet flyttas på en gång.

Den uppdelningen lämnar loopen med tre rörliga delar:

1. Objektmarkupen, som fixar hierarki och läsordning;
2. De dynamiska fälten, som drar in värden i den markupen;
3. Det yttre rutnätet, som avgör hur många objekt som sitter sida vid sida.

Dessa tre delar avgör om en färdig mall är användbar. Ett objektblock med två fält kommer inte att innehålla poster som har fem.

Fältuppsättningar skiljer sig åt från en loop till en annan

Inte varje loop har en bild, en titel och en beskrivning. Fältuppsättningen följer innehållstypen och avgör vad en läsare lägger märke till först.

Tre välkända fall visar hur långt dessa uppsättningar glider isär:

1. En postloop kopplar datum, författare och utdrag till rubriken, så utdraget väger aldrig tyngre än det;
2. En händelseloop inleds med datum och plats, så tidsblocket har mer vikt än bilden;
3. En katalogloop innehåller kategori, adress och kontaktuppgifter, med åtgärdsknappen bredvid dem.

Alla tre upprepar ett skelett, men vikten inuti flyttas, och att matcha en mall till den vikten är det mesta av urvalsarbetet. Att anpassa en postlayout för händelseposter innebär att ordna om fält.

Att hålla ordningen intakt över skärmstorlekar

Upprepade block läses bra på en bred skärm men blir svårare att läsa när kolumnerna viks. Det som då spelar roll är om en post fortfarande håller ihop: bild ovanför sin egen titel, pris bredvid sitt eget namn, åtgärd kopplad till sin egen post.

Exempelinnehåll döljer detta, eftersom demoobjekt vanligtvis har samma höjd. Problem uppstår när en projekttitel är tre rader lång och nästa nästan inte har någon beskrivning. Det är värt att ladda dina längsta och kortaste poster i en vald mall innan du publicerar i stor skala.

I Nicepage placerar Grid Element upprepade objekt i responsiva celler; Responsive Web Design Guide täcker dess kontroller.

En loop HTML-mall förtjänar sin plats när struktur, läsbarhet och dataordning håller i sig över valfritt antal poster och valfri skärmbredd.