şablonumuza zeka kattıktan sonra şimdi en güçlü yapı taşlarından birine geldik: Döngüler (<b:loop>).
Eğer blogunuzun ana sayfasında yazıların alt alta sıralanmasını, yan menüde kategorilerin (etiketlerin) listelenmesini veya popüler yayınların otomatik olarak dönmesini istiyorsanız bu etiket köprüden önceki son çıkışınızdır.
Blogger XML Dersleri #5: Döngüler ve Esneklik – <b:loop> ile Listeleme
Blogger XML serimizin önceki derslerinde şablon iskeletini kurmayı, verileri çağırmayı ve koşullu ifadelerle sayfaları kontrol etmeyi öğrendik. Buraya kadar her şey harika! Ancak fark ettiyseniz, henüz blog yazılarımızı ana sayfada alt alta otomatik olarak listeleyemedik.
Bir blogda birden fazla veriyi (yazıları, etiketleri, yorumları) tek tek kod yazmak zorunda kalmadan, dinamik bir şekilde ekrana sırayla basmak için <b:loop> (Döngü) etiketini kullanırız.
Döngü (b:loop) Mantığı Nedir?
Döngüler, diğer programlama dillerindeki foreach mantığıyla çalışır. Elinizde bir veri havuzu (dizi/array) vardır; örneğin sunucudan gelen "Son Yayınlanan 10 Yazı". Döngü bu havuzun içine girer, ilk yazıyı alır, sizin belirlediğiniz HTML şablonuna göre ekrana basar. Sonra ikinci yazıya geçer, ta ki havuzdaki tüm elemanlar bitene kadar bu işlemi otomatik olarak tekrarlar.
Blogger'da en temel döngü kalıbı şu şekildedir:
<b:loop values='veri_havuzu' var='tekil_degisken'>
</b:loop>
values: Sunucudan çekilen toplu verinin (dizinin) adıdır. (Örn:data:postsblog yazılarının tamamını barındıran havuzdur).var: Döngünün o an işlediği tek bir elemana sizin verdiğiniz geçici isimdir. (Örn:postveyayazi). İçerideki veri etiketlerini çağırırken artık bu ismi kullanırsınız.
En Çok Kullanılan Döngü Alanları ve Kod Yapıları
Blogger şablonlarında döngüleri en çok yazı listeleme ve etiket listeleme alanlarında kullanırız. Gelin ikisini de saf (pure) kod örnekleriyle inceleyelim.
1. Ana Sayfa İçin Yazı Listeleme Döngüsü
Blogger'ın ana yazı bileşeni (type='Blog') içerisinde, yayınlanan tüm makaleleri ana sayfada veya arşivde listelemek için kullanılan standart döngü yapısı şudur:
<b:loop values='data:posts' var='post'>
<article class='post-card'>
<h2 class='post-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
<p class='post-summary'><data:post.snippet/></p>
<span class='post-date'><data:post.timestamp/></span>
</article>
</b:loop>
Dikkat edin: Küresel etiketlerde kullandığımız data:post.title yapısını döngü içinde kullanırken, var='post' dediğimiz için artık o tekil nesne üzerinden (data:post...) çağırabiliyoruz.
2. Kategorileri (Etiketleri) Listeleme Döngüsü
Blogunuzdaki tüm etiketleri yan menüde (sidebar) bir liste halinde alt alta sıralamak istiyorsanız, type='Label' widget'ı içinde şu döngüyü kurarsınız:
<ul class='label-list'>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:label.url'>
<data:label.name/> (<data:label.count/>)
</a>
</li>
</b:loop>
</ul>
Bu kod her çalıştığında kategorinin adını ve yanına parantez içinde o kategoriye ait kaç yazı olduğunu (data:label.count) otomatik olarak listeler.
İleri Düzey İpucu: Index ve Sınırlandırmalar
Döngüleri daha profesyonel tasarımlarda (örneğin ilk yazıya büyük, diğer yazılara küçük Bento Grid tasarımı vermek istediğinizde) kontrol etmek için index parametresini kullanabilirsiniz:
<b:loop values='data:posts' var='post' index='i'>
<b:if cond='data:i == 0'>
<div class='featured-post'><data:post.title/></div>
<b:else/>
<div class='normal-post'><data:post.title/></div>
</b:if>
</b:loop>
5. Dersin Özeti ve Ödev
Bu derste Blogger şablonlarının en dinamik ve işlevsel motoru olan <b:loop> yapısını çözdük. Verileri alt alta nasıl dizeceğimizi, döngü içi değişken mantığını ve hatta ilk yazıya nasıl farklı davranabileceğimizi (indeks mantığı) öğrendik.
Bu dersin ödevi: Kendi test şablonunuzda bir b:loop oluşturun ve içerisine Ders 4'te öğrendiğimiz b:if koşulunu ekleyerek, döngü dönerken sadece belirli bir şarta uyan (örneğin başlığı boş olmayan) yazıları listelemeyi deneyin.
Bir sonraki ve eğitim serimizin son dersi olan Ders 6: Meta Etiketleri ve SEO Optimizasyonu konusunda, XML yapımızın içine arama motorlarının ve sosyal medyanın (Open Graph, Twitter Cards) bayılacağı dinamik SEO metatag'lerini gömeceğiz!
Döngülerle ilgili takıldığınız yerleri yorumlarda paylaşın, kodları beraber optimize edelim! donguler,esneklik,listeleme
Hiç yorum yok:
Yorum Gönder