Döngü HTML Şablonları

Yinelenen İçerikler İçin Döngü HTML Şablonları

Bir döngü HTML şablonu, yinelenen tek bir birim tanımlar ve bunu gönderilerden, ürünlerden veya proje kayıtlarından gelen dinamik içerikle doldurur. Hazır bir öge bloğu seçip bunu yayımladığınız kayıtlara uyarlarsınız ve döngü bu işaretlemeyi her kayıt için oluşturur. Hiçbir şey elle çoğaltılmaz; böylece tek bir blok, tüm ızgaranın nasıl görüneceğini belirler.

Şablonun Bittiği ve İçeriğin Başladığı Yer

Döngülerle ilgili yaygın kafa karışıklığı, şablonun ögenin kendisiyle karıştırılmasıdır. Şablon boş yuvalar barındırır: genellikle bir görsel alanı, bir başlık ve bir meta veri satırı. Bir ürün adını düzenlediğinizde tek bir kayıt değişir; işaretlemeyi düzenlediğinizde ise tüm ızgara aynı anda dönüşür.

Bu ayrım, döngüyü üç ana parçadan oluşturur:

1. Hiyerarşiyi ve okuma sırasını belirleyen öge işaretlemesi;
2. Değerleri bu işaretlemeye aktaran dinamik alanlar;
3. Kaç ögenin yan yana duracağına karar veren dış ızgara.

Bu üç parça, hazır bir şablonun kullanışlı olup olmadığını belirler. İki alana sahip bir öge bloğu, beş alan içeren kayıtları taşıyamaz.

Alan Kümeleri Döngüden Döngüye Farklılık Gösterir

Her döngüde bir görsel, bir başlık ve bir açıklama yer almaz. Alan kümesi içerik türüne göre şekillenir ve okuyucunun ilk neyi fark edeceğini belirler.

Üç tanıdık örnek, bu kümelerin ne kadar farklılaşabileceğini gösterir:

1. Bir gönderi döngüsü; tarih, yazar ve özeti başlığa bağlar, böylece özet asla başlığın önüne geçmez;
2. Bir etkinlik döngüsü tarih ve konumla başlar, bu sayede zaman bloğu görselden daha fazla ağırlık taşır;
3. Bir rehber döngüsü; kategori, adres ve iletişim bilgilerini içerir ve işlem butonu bunların hemen yanında yer alır.

Her üçü de aynı iskeleti tekrarlar; ancak içerideki ağırlık dağılımı değişir ve bir şablonu bu ağırlığa uydurmak seçim sürecinin büyük kısmını oluşturur. Bir gönderi düzenini etkinlik kayıtlarına uyarlamak, alanların yeniden düzenlenmesini gerektirir.

Farklı Ekran Boyutlarında Düzeni Korumak

Yinelenen bloklar geniş bir monitörde rahatça okunur, ancak sütunlar katlandığında takibi zorlaşabilir. Bu noktada önemli olan, kaydın bir arada kalıp kalmadığıdır: görselin kendi başlığının üzerinde olması, fiyatın kendi adının yanında durması, eylemin doğrudan kendi girdisine bağlı kalması.

Örnek içerikler bu durumu gizler; çünkü demo ögeleri genellikle aynı yüksekliktedir. Sorun, bir proje başlığının üç satıra uzayıp bir sonrakinde neredeyse hiç açıklama bulunmadığında ortaya çıkar. Geniş ölçekte yayına geçmeden önce en uzun ve en kısa kayıtlarınızı seçilen şablonda denemeye değer.

Nicepage'de Izgara Ögesi yinelenen ögeleri duyarlı hücrelere yerleştirir; Duyarlı Web Tasarımı kılavuzu bu denetimleri ayrıntılı olarak açıklar.

Bir döngü HTML şablonu; yapı, okunabilirlik ve veri sırası her türlü kayıt sayısında ve ekran genişliğinde korunduğu sürece değerini kanıtlar.