Blogunuzun gövde bölümünü oluşturmak için Layouts temasını kullanıyorsanız, resim ve blogroll gibi sayfa öğeleri eklemek üzere widget'ları kullanabilirsiniz.
Etiket türleri
Bu bölümde, kapanış etiketlerinin içinde kullanabileceğiniz HTML öğeleri açıklanmaktadır.
Include öğeleri (b:include)Include öğeleri ne zaman kullanılır?
Koddan oluşan bir bölümünüz varsa ve bu bölümü birkaç farklı yerde ya da yalnızca belirli durumlarda kullanmak istiyorsanız include öğeleri işinize yarayacaktır.
Bunu yapmak için içeriği bir b:includable içine yazın ve sonra bu içeriğin görünmesini istediğiniz yerlerde b:include öğesini kullanın.
Biçim
<b:includable id='main' var='thiswidget'>
[istediğiniz içeriği buraya ekleyin]
</b:includable>
Özellikler
- id (gerekli): Harf ve sayılardan oluşan benzersiz bir tanımlayıcı. Her widget'ta id='main' şeklinde bir includable olmalıdır.
- var (isteğe bağlı): Söz konusu bölüm içindeki verilere başvurulması amacıyla kullanılan, harf ve sayılardan oluşan bir tanımlayıcı.
Farklı ID'leri olan includable öğeleri oluşturduğunuzda, bu öğeler otomatik olarak görüntülenmez. Ancak, id='new' ile bir includable oluşturduğunuzda, bu öğeye main includable öğenizde <b:include name='new' /> ile başvurulmasını sağlayabilirsiniz. Bu durumda yeni includable, istediğiniz şekilde gösterilecektir.
b:include etiketinin özellikleri aşağıda verilmiştir:
- name (gerekli): Harf ve sayılardan oluşan bir tanımlayıcı. Bu özelliğin, aynı widget'ta yer alan mevcut bir
b:includableöğesinin ID'siyle eşleşmesi gerekir. - data (isteğe bağlı): Includable bölümüne iletilecek bir ifade veya veri parçası. Bu, includable içindeki var özelliğinin değeri olacaktır.
- cond (isteğe bağlı) Include öğesinin yalnızca sonuç doğru olduğunda yürütülmesini sağlayan bir ifade. Bu, b:if öğesindeki cond özelliğiyle aynıdır.
Örnek
b:includable ile b:include öğesinin nasıl kullanılacağını gösteren bir örneği aşağıda bulabilirsiniz.
Unutmamanız gereken en önemli nokta, "main" bölümünün "post" bölümünü kendi içinde nasıl tuttuğudur. "main" bölümü, "p" adını verdiği bir post'u iletir. Included bölümü ise buna kendisine ait var "post" değeri olarak başvurur ve ardından başlığı ekrana getirir.
Include öğesinin yalnızca index değerinin 10'dan az olduğu durumlarda çalıştığını göz önünde bulundurun. Yani, bu örnekte en çok 10 post işlenecektir (index 0'dan başlamaktadır).
<b:includable id='main'>
<b:loop var='p' index='index' values='posts'>
<b:include name='post' data='p' cond='index < 10'/>
</b:loop>
</b:includable>
<b:includable id='post' var='post'>
Başlık: <data:post.title/>
</b:includable>
Örnekler
-
<data:title/> widget'ın başlığını ekrana getirir
-
<data:photo.url/> - Boyut: <data.photo.width /> x <data.photo.height /> bir fotoğraf bileşeninin özelliklerini ekrana getirir. Bir fotoğrafta url, height (yükseklik) ve width (genişlik) gibi bileşenler olabilir. "." notasyonu kullanıldığında, başka bir şeyin değil bu fotoğrafın URL'sini istediğimizi belirtmiş oluruz.
Diğer örneklere göz atın
Desteklenen Layouts veri etiketlerinin yer aldığı tam listemizi inceleyin.
b:loop ne zaman kullanılır?
b:loop etiketi, bir içerik bölümünü birden çok kez tekrarlamanıza olanak tanır. Bu, genellikle belirli bir sayfayla ilişkili yayın listesindeki her bir yayın, yorum veya etiketin vs. ekrana getirilmesi için kullanılır.
Biçim
Döngülerin kullanım biçimi genel olarak şu şekildedir:
<b:loop var='identifier' values='set-of-data'>
[tekrarlanan içerik buraya yerleştirilir]
</b:loop>
'identifier' (i) bölümü, seçtiğiniz herhangi bir ad olabilir. Bu bölüm, döngünün çalıştığı her seferde, listedeki her yeni öğe için kullanılacaktır. Değerler için belirlediğiniz veri kümesi, veri etiketleri makalesinde açıklanan, öğe listesi şeklindeki herhangi bir veri parçası olabilir.
Örneğin, blog yayınları widget'ında posts bir listedir. Aşağıdakine benzeyen bir kod, her bir yayını döngüye alır ve her bir yayının başlığını, çevresindeki başlık etiketleriyle birlikte ekrana getirir.
<b:loop var='i' values='data:posts'>
<h2><data:i.title/></h2>
</b:loop>
"i" öğesinin, sıradaki her bir yayının değerini nasıl aldığına dikkat edin. Bunun sayesinde her yayının başlığını almanız mümkün olur.
Sayı Aralığı
Loop etiketi, "1 to 3" veya "-3 to -9" gibi, baştaki ve sondaki sayıların dahil edildiği bir sayı aralığını tekrarlamanıza olanak sağlar. Burada, değişkenin değeri sayı değerini alır. Aşağıdaki örnek, 1, 2 ve 3'ten oluşan, sıralanmamış bir liste oluşturur.
<b:loop var='i' values='1 to 3'>
<li><data:i /></li>
</b:loop>
Index Özelliği
Loop etiketlerinde isteğe bağlı bir index özelliği de vardır. Bu özellik, döngüdeki geçerli tekrarlamanın sıfır tabanlı bir dizinini verir.
<ul>
<b:loop var='number' index='index' values='9 to 7'>
<li>Dizin: <data:index />, Sayı: <data:number /></li>
</b:loop>
</ul>
Bu örnek, şu şekilde sıralanmamış bir liste oluşturur:
- Dizin: 0, Sayı: 9
- Dizin: 1, Sayı: 8
- Dizin: 2, Sayı: 7
If, elseif veya else ne zaman kullanılır?
Belirli bir içeriği bazı durumlarda, başka bir içeriği de başka durumlarda görüntülemek için b:if, b:elseif ve b:else etiketlerini kullanabilirsiniz. Örneğin, ana sayfada yalnızca belirli bir metin gösterilirken, yayınlara tek tek bakıldığında farklı bir metnin görünmesini istiyor olabilirsiniz.
Biçim
<b:if cond='condition'> [koşul doğru olduğunda görüntülenecek içerik] <b:elseif cond='another condition'/> [}önceki if veya elseif koşullarından hiçbiri doğru değilse ve bu elseif koşulu doğruysa görüntülenecek içerik] <b:else/> [hiçbir if veya elseif koşulu yerine getirilmediyse görüntülenecek içerik] </b:if>
b:elseif ve b:else etiketleri isteğe bağlıdır. Bunlar olmadığında sonuç, b:if bölümünde listelenen içerik olacaktır veya hiçbir şey olmayacaktır. Yine de, kapanış etiketi olan </b:if> her durumda gereklidir.
"condition" yerine doğru ya da yanlış olarak değerlendirilen herhangi bir şeyi koyabilirsiniz. Bazı veri etiketlerinin kendileri true/false değerleri taşırlar (ör. bir yayındaki allowComments). Başka veri parçalarını kullanarak bunları belirli değerlerle karşılaştırabilir ve doğru veya yanlış sonuç almalarını sağlayabilirsiniz. Aşağıda birkaç örnek verilmiştir:
<b:if cond='data:post.showBacklinks'>
Geçerli yayın geri bağlantıları gösterecek şekilde ayarlandıysa doğru değerini alır.<b:if cond='data:blog.pageType == "item"'>
Geçerli sayfa bir öğe sayfasıysa (yayın sayfası) doğru değerini alır.<b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
Geçerli sayfa bir öğe sayfasıysa (yayın sayfası) ve geçerli yayın geri bağlantıları gösterecek şekilde ayarlandıysa doğru değerini alır.<b:if cond='data:displayname != "Berke"'>
Bu, Berke'nin görünen adı değilse doğru değerini alır.<b:if cond='data:displayname == "Berke" or data:blog.pageType == "static_page"'>
Görünen ad Berke ise veya geçerli sayfa bir statik bir sayfaysa (yayın sayfası değil) doğru değerini alır.<b:if cond='data:post.numComments > 1'>
Geçerli yayında birden fazla yorum varsa doğru değerini alır.<b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
Geçerli sayfa belirli bir yayın veya sayfaysa doğru değerini alır.
Switch ne zaman kullanılır?
b:switch etiketini, birkaç tane b:elseif etiketi olan bir b:if etiketini kullandığınız şekilde kullanabilirsiniz. Switch dalını kullanmanın avantajı, değişken adını tekrarlamak zorunda olmayışınızdır. Her bir case'i neyin tanımladığını ve varsayılan case'in ne olduğunu görmek için bu etiketleri kolayca okuyabilirsiniz.
Biçim
<b:switch var='[Veri ifadesi]'>
<b:case value="[Değer 1]" />
[var değerlendirmesi, Değer 1'e eşit olduğunda üretilecek çıkış]
<b:case value="[Değer 2]" />
[var değerlendirmesi, Değer 2'ye eşit olduğunda üretilecek çıkış]
[… diğer değerler]
<b:default />
[var değerlendirmesi, belirtilen başka bir b: case'e eşit olmadığında üretilecek çıkış]
</b:switch>
Örnek
Bu örnek, oluşturulmakta olan sayfanın türüne bağlı olarak, farklı bir üstbilgi çıkışının nasıl üretileceğini göstermektedir.
<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
<h1>Sayfa</h1>
<b:case value="item" />
<h1>Yayın</h1>
<b:default />
<h2>Blog Yayınları</h2>
</b:switch>
İfadeler ne zaman kullanılır?
expr özelliğini, veri sözlüğündeki değerleri temel alarak özellik değerlerini belirlemek için kullanabilirsiniz.
Örnekler
<a expr:href='data:blog.homepageUrl'>Ana Sayfa</a>
Blogun ana sayfa URL'sini içeren bir ana sayfa bağlantısı.<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Yayınlar RSS</a>
Blog yayınının RSS feed URL'sini içeren bir bağlantı. "+" operatörü iki dizeyi birbirine bağlamaktadır.<a expr:class='data:post.allowComments ? "comment" : "no-comment">Yorum</a>
Yorumlara izin verildiğinde "comment" sınıfını, izin verilmediğinde ise "no-comment" sınıfını içeren bir bağlantı. Üçlü operatör (?:) belirtilen Boole değerini alır ve Boole doğru ise ilk değeri (? işaretinden sonra gelen) seçer; Boole yanlış ise ikinci değeri (: işaretinden sonra gelen) seçer.
Değerlendirilen İfade ne zaman kullanılır?
Standart bir veri etiketinden daha karmaşık bir ifadeyi değerlendirmek için b:eval etiketini kullanabilirsiniz.
Biçim
<b:eval expr='[İfade]' />
Örnekler
- min-height:
<b:eval expr="data:newWidth * data:height / data:width" />px;
Yeni bir genişlik değerini temel alarak hesaplanmış, göreli bir yükseklik çıkışı üretir. <b:eval expr="data:post.labels[0].url" />
İlk yayın etiketinin URL'sinin çıkışını üretir.<b:eval expr='data:post.allowComments ? "Yorum" : "Yorumlar Devre Dışı" />
Yorumlara izin verildiğinde "Yorum" çıkışını, izin verilmediğindeyse "Yorumlar Devre Dışı" çıkışını üretir. Bu ifadenin üçlü operatörden yararlandığına dikkat edin.
Değişken takma adı ne zaman kullanılır?
b:with etiketini, hesaplanan bir ifadenin değerini geçici olarak depolamak ve karmaşık satır içi ifadelerden kaçınmak için kullanabilirsiniz.
Biçim
<b:with var='myComputedValue' value='[Veri ifadesi]' />
Örnekler
Veri değişkenlerini temel alan karmaşık bir stil özelliği söz konusu olduğunda, bu özelliği, HTML çıkışının geri kalanından önce hesaplayabilir, böylece iç içe geçmiş HTML'nin daha kolay okunmasını sağlayabilirsiniz.
<b:with var='style'
value='"background-image: url(\"" + data:sourceUrl "\"); "
+ " width: " + data:width + "px; " '>
<div id='header-outer'>
<div id='header-inner' expr:style='data:style'>
<h1>Üstbilgim</h1>
</div>
</div>
</b:with>Değişkenin yalnızca,
b:with etiketinin alt düğümlerinde mevcut olacağına dikkat edin.Örnek incelemesi
Blogunuzdaki bir PageList widget'ının HTML kodunda bu etiketlerin hepsinin nasıl kullanıldığını öğrenmek için tıklayarak örneğe bakın.
ÖrnekBu widget'ta, b:widget, b:includable (ve b:include), b:if (ve b:else) ile b:loop etiketlerine ilişkin kullanım örneklerini inceleyebilirsiniz.
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'> <b:includable id='main'> <b:if cond='data:title != ""'><h2><data:title/></h2></b:if><div class='widget-content'><b:if cond='data:mobile'><selectexpr:id='data:widget.instanceId + "_select"'><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'><optionexpr:value='data:link.href'selected='selected'><data:link.title/></option><b:else/><optionexpr:value='data:link.href'><data:link.title/></option></b:if> </b:loop></select> <span class='pagelist-arrow'>&#9660;</span><b:else/><ul><b:loop values='data:links' var='link'> <b:if cond='data:link.isCurrentPage'><li class='selected'> <aexpr:href='data:link.href'><data:link.title/></a> </li> <b:else/> <li> <aexpr:href='data:link.href'><data:link.title/></a> </li></b:if> </b:loop></ul></b:if><b:include name='quickedit'/> </div></b:includable> </b:widget>