Slinga HTML-mallar

Loop-HTML-mallar för upprepat innehåll

En loop-HTML-mall definierar en enskild 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 efter de poster du publicerar, och loopen renderar den koden för varje post. Inget dupliceras manuellt, så att ett enda block avgör hur hela rutnätet tolkas.

Var mallen slutar och innehållet börjar

Det vanliga missförståndet med loopar är att förväxla mallen med själva objektet. En mall innehåller tomma platser: ofta en bildyta, en rubrik och en rad med metadata. Redigera ett produktnamn och en enskild post ändras; redigera koden, och hela rutnätet förändras på en gång.

Den uppdelningen ger loopen tre rörliga delar:

1. Objektets kod, som fastställer hierarki och läsordning;
2. De dynamiska fälten, som hämtar in värden till denna kod;
3. Det yttre rutnätet, som avgör hur många objekt som placeras bredvid varandra.

Dessa tre delar avgör om en färdig mall är användbar. Ett objektblock med två fält kan inte hantera poster som kräver fem.

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

Inte varje loop innehåller en bild, en titel och en beskrivning. Fältuppsättningen styrs av innehållstypen och bestämmer vad läsaren lägger märke till först.

Tre välbekanta exempel visar hur mycket dessa uppsättningar kan skilja sig åt:

1. En inläggsloop kopplar datum, författare och utdrag till rubriken, så att utdraget aldrig tar överhanden;
2. En evenemangsloop inleds med datum och plats, så att tidsblocket väger tyngre än bilden;
3. En katalogloop innehåller kategori, adress och kontaktuppgifter, med åtgärdsknappen placerad bredvid.

Alla tre upprepar ett gemensamt skelett, men vikten inuti förskjuts, och att matcha en mall mot den vikten utgör merparten av urvalsarbetet. Att anpassa en inläggslayout för evenemangsposter innebär att ordna om fälten.

Att bevara ordningen intakt över olika skärmstorlekar

Upprepade block är lätta att läsa på en bred bildskärm men blir svårare att följa när kolumnerna staplas om. Det som då avgör är om en post fortfarande hänger ihop: bilden ovanför sin egen titel, priset intill sitt eget namn och åtgärden kopplad till sin egen post.

Exempelinnehåll döljer ofta detta, eftersom demoobjekt vanligtvis har samma höjd. Problemen visar sig när en projekttitel sträcker sig över tre rader och nästa knappt har någon beskrivning alls. Det är klokt att läsa in dina längsta och kortaste poster i den valda mallen innan du publicerar i större skala.

I Nicepage placerar Rutnätselementet upprepade objekt i responsiva celler; guiden för responsiv webbdesign går igenom dess kontroller.

En loop-HTML-mall fyller sin funktion när struktur, läsbarhet och dataordning förblir stabila oavsett antal poster och oberoende av skärmbredd.