Blogger XML Dersleri #3: Can Damarı – Data (Veri) Etiketleri ve Çağırma Yöntemleri

 serinin en heyecanlı yerine geldik! Artık şablonun yerleşim planını (skeletini) biliyoruz. Şimdi o iskelete can verme, yani Blogger sunucularındaki verileri (yazı başlığı, tarihi, blog adı) kodlarımızla çağırıp ekrana basma zamanı.

Blogger XML Dersleri #3: Can Damarı – Data (Veri) Etiketleri ve Çağırma Yöntemleri

Blogger XML serimizin ilk iki dersinde temiz bir şablon iskeleti kurmayı, b:section ve b:widget mimarisini öğrendik. Ancak şu an şablonumuzun içi boş bir kutudan ibaret.

Bu dersimizde, Blogger sunucularında saklanan dinamik verileri (Blogunuzun adı, yazı başlıkları, içerikler, yorum sayıları vb.) çekip ziyaretçiye göstermemizi sağlayan Data (Veri) Etiketlerini ve bunların kullanım yöntemlerini öğreneceğiz.

Data Etiketi Nedir?

Blogger'da verileri ekrana yazdırmak için <data:... /> etiketini kullanırız. Bu etiketler, arka plandaki veri tabanı ile sitenizin tasarımı arasında bir köprü görevi görür.

Blogger'da veri etiketleri iki ana gruba ayrılır: Küresel (Global) Veriler ve Yerel (Bileşene Özel) Veriler.

1. Küresel (Global) Veri Etiketleri

Küresel etiketler, şablonun her yerinde (head içinde, body içinde, herhangi bir section veya widget'ın dışında ya da içinde) sorunsuz çalışan, blogun genel bilgilerini barındıran etiketlerdir.

İşte en sık kullanacağınız küresel veri etiketleri:

  • <data:blog.title/>: Blogunuzun adını (başlığını) ekrana basar.

  • <data:blog.pageTitle/>: Tarayıcı sekmesinde görünecek olan sayfa başlığını dinamik olarak getirir (Ana sayfada blog adı, yazı sayfasında yazı adı + blog adı şeklinde).

  • Içerik Türü ve URL Kontrolleri:

    • <data:blog.homepageUrl/>: Blogunuzun ana sayfa adresini verir.

    • Içerik Linki: <data:blog.url/> o an açık olan sayfanın tam URL'sini çeker.

    • <data:blog.pageType/>: O an hangi sayfa türünde (index, item, archive, error_page) olunduğunu söyler (Gelecek dersteki koşul ifadelerinde çok işimize yarayacak).

 2. Yerel (Bileşene Özel) Veri Etiketleri

Bu etiketler sadece ait oldukları <b:widget> etiketinin içinde çalışırlar. Örneğin, bir yazının başlığını veya içeriğini çeken etiketleri gidip temanın en üstüne veya bir arama kutusu widget'ının içine yazamazsınız; yazarsanız şablon hata verir veya boş döner.

En çok kullanılan yerel veri etiketleri (Özellikle type='Blog' yani yazı widget'ı içinde):

  • <data:post.title/>: Açık olan blog yazısının başlığını basar.

  • <data:post.body/>: Yazının tüm metin, resim ve HTML içeriğini (asıl yazıyı) ekrana getirir.

  • <data:post.url/>: O yazının kalıcı bağlantı (permalink) adresini verir.

  • <data:post.timestamp/>: Yazının yayınlanma saatini/tarihini çeker.

  • <data:post.commentInfo.string/>: "5 yorum" veya "Yorum yok" gibi metinsel yorum bilgisini döndürür.

Data Etiketlerini Çağırma Yöntemleri

Blogger XML'de veriyi ekrana basmanın veya bir HTML niteliğine (attribute) atamanın iki farklı yolu vardır. Bu ayrımı bilmek saf (pure) kod yazarken hayat kurtarır.

Yöntem A: Doğrudan Ekrana Yazdırma (Standart Kullanım)

Veriyi düz metin olarak HTML etiketlerinin arasına basmak istiyorsak doğrudan etiketi kapatarak kullanırız:

<h1><data:blog.title/></h1>

<p>Şu an buradasınız: <data:blog.url/></p>

Yöntem B: expr: Öneki ile Nitelik İçinde Kullanma

Bir veriyi standart bir HTML niteliğinin (örneğin bir linkin href değeri veya bir resmin src değeri) içine gömmek istiyorsak, düz yazım hata verir. Bunun yerine niteliğin başına expr: yazarız ve tırnak işaretleri içindeki veriyi doğrudan çağırırız:

<a href="<data:blog.homepageUrl/>">Ana Sayfa</a>

<a expr:href='data:blog.homepageUrl'>Ana Sayfa</a>

Fark ettiniz mi? expr: kullandığımızda veri etiketinin başındaki ve sonundaki < > işaretlerini ve / sembolünü kaldırıp doğrudan ismini yazdık.

 Uygulama: Saf Kodla İlk Dinamik Header ve Yazı Alanı

Şimdi öğrendiklerimizi birleştirelim ve şablonumuzun <body> kısmına hem dinamik bir logo/başlık alanı hem de yazıların listeleneceği alanı saf kodlarla yazalım:

<body>


  <header class='site-header'>

    <h1>

      <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>

    </h1>

  </header>


  <b:section id='main-content' showaddelement='no'>

    <b:widget id='Blog1' locked='yes' title='Blog Yazıları' type='Blog' visible='yes'>

      <b:includable id='main'>

        

        <div class='blog-posts'>

          <h2 class='post-title'><data:post.title/></h2>

          <div class='post-meta'>Yayınlanma: <data:post.timestamp/></div>

          <div class='post-body'><data:post.body/></div>

        </div>


      </b:includable>

    </b:widget>

  </b:section>


</body>

3. Dersin Özeti ve Ödev

Bu derste Blogger’ın veri tabanına ilk sorgularımızı attık! Küresel ve yerel verilerin farkını, veriyi ekrana basarken expr: önekinin sihirli dokunuşunu öğrendik.

Bu dersin ödevi: Test blogunuzda yukarıdaki expr:href mantığını kullanarak kendi sosyal medya butonlarınıza veya ana sayfa linklerinize dinamik yönlendirmeler tanımlamayı deneyin.

Bir sonraki dersimizde, SEO optimizasyonu ve site hızı için en kritik konulardan birine, yani kodları sadece istediğimiz sayfalarda (örneğin sadece ana sayfada veya sadece yazı sayfasında) çalıştırmamızı sağlayan Ders 4: Koşullu İfadeler (Blogger If-Else Yapısı) konusuna geçiyoruz.

Aklınıza takılan veri etiketlerini yorumlarda sormaktan çekinmeyin! data,etiketleri,cagirma,ders





















Hiç yorum yok:

Yorum Gönder