Tag Widget untuk Tata Letak

Saat Anda menggunakan tema Tata Letak untuk membuat bagian tubuh blog Anda, Anda dapat menggunakan widget untuk menambahkan elemen halaman seperti gambar dan blogroll.

Jenis tag

Bagian ini menjelaskan tentang HTML yang dapat Anda gunakan di dalam tag penutup.

Termasuk (b: termasuk)

Kapan harus menggunakan termasuk

Termasuk sangat berguna jika Anda memiliki bagian kode yang ingin Anda gunakan kembali di beberapa tempat yang berbeda, atau hanya termasuk dalam keadaan tertentu.

Untuk melakukan ini, tulis konten di dalam a b:includable, lalu gunakan di b:includemana pun Anda ingin itu muncul.

Format

<b:includable id='main' var='thiswidget'>
  [insert whatever content you want here]
</b:includable>

Atribut

id (wajib): Pengidentifikasi unik yang terdiri dari huruf dan angka. Setiap widget harus memiliki satu yang disertakan dengan id = 'main'.
var (opsional) Pengidentifikasi terdiri dari huruf dan angka, untuk referensi data dalam bagian ini.

Jika Anda membuat lebih banyak barang yang disertakan dengan ID yang berbeda, ID itu tidak akan ditampilkan secara otomatis. Namun, jika Anda membuat suatu barang yang dapat disertakan id='new', maka Anda dapat merujuknya di barang yang disertakan bersama Anda <b:include name='new' />dan itu akan ditampilkan dengan cara itu.

Atribut untuk tag b: include adalah sebagai berikut:

name (wajib): Identifier yang terdiri dari huruf dan angka. Itu harus cocok dengan ID yang ada b:includabledi widget yang sama.
data (opsional): Ekspresi atau sepotong data untuk diteruskan ke bagian yang dapat disertakan. Ini akan menjadi nilai dari atribut var di yang disertakan.
cond (opsional) Ekspresi yang menyebabkan include hanya mengeksekusi ketika hasilnya benar. Ini sama dengan atribut cond pada ab: if.

Contoh

Berikut adalah contoh yang menunjukkan cara menggunakan b:includabledan b:include.

Hal utama yang harus dipahami di sini adalah bagaimana bagian "utama" menyertakan bagian "pos" di dalamnya. Ia meneruskan tulisan yang disebut "p" dan bagian yang disertakan merujuknya sebagai "posting" nya, lalu mencetak judulnya.

Perhatikan bahwa menyertakan hanya berjalan sementara indeks kurang dari 10, jadi hanya maksimal 10 posting yang akan diberikan dalam contoh ini (indeks dimulai pada 0).

<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'>
  Title: <data:post.title/>
</b:includable>

Output Data (data :)

Contohnya

<data: title /> akan mencetak judul widget
<data: photo.url /> - Ukuran: <data.photo.width /> x <data.photo.height /> akan mencetak atribut komponen foto. Foto mungkin memiliki komponen seperti url, tinggi, dan lebar. Menggunakan "." notasi menunjukkan bahwa kita menginginkan URL untuk foto ini, bukan URL dari sesuatu yang lain.

Lihat lebih banyak contoh

Lihat daftar lengkap kami dari tag data tata letak yang didukung.

Loop (b: loop)

Kapan harus menggunakan b: loop

The b:looptag memungkinkan Anda mengulangi bagian dari konten beberapa kali. Ini paling umum digunakan untuk mencetak setiap posting dalam daftar posting untuk halaman tertentu, atau setiap komentar, atau setiap label, dll.

Format

Format umum untuk menggunakan loop adalah ini:

<b:loop var='identifier' values='set-of-data'>
  [repeated content goes here]
</b:loop>

Bagian 'pengidentifikasi' (i) dapat berupa nama apa pun yang Anda pilih, dan akan digunakan untuk menggantikan setiap item baru dalam daftar, setiap kali melalui loop. Set data yang Anda tentukan untuk nilai dapat berupa potongan data apa pun yang dijelaskan dalam artikel tag data sebagai daftar item.

Misalnya, di widget posting blog, postsada daftar. Kode seperti yang berikut ini akan berulang melalui setiap posting, mencetak judul untuk masing-masing, dengan tag header di sekitarnya.

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

Perhatikan bagaimana "i" mengambil nilai dari setiap posting pada gilirannya, sehingga Anda bisa mendapatkan judul dari masing-masing posting.

Rentang angka

Tag lingkaran memungkinkan Anda untuk beralih melintasi rentang angka inklusif, seperti '1 hingga 3', '-3 hingga -9', di mana nilai variabel mengambil nilai angka. Contoh berikut akan membuat daftar unordered 1, 2 dan 3.

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

Atribut Indeks

Tag lingkaran juga memiliki atribut indeks opsional, yang memberikan indeks berbasis nol dari iterasi saat ini melalui loop.

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>

Contoh ini akan membuat daftar unordered dari:

Indeks: 0, Nomor: 9
Indeks: 1, Nomor: 8
Indeks: 2, Nomor: 7

If, elseif & else (b: if)

Kapan digunakan jika, elseif, atau yang lain

Anda dapat menggunakan b:if, b:elseifdan b:elsetag untuk menampilkan konten tertentu dalam kasus tertentu, dan konten lainnya dalam kasus lain. Misalnya, Anda mungkin hanya ingin menampilkan teks tertentu di beranda, tetapi teks yang berbeda saat melihat setiap posting.

Format

<b:if cond='condition'>
  [content to display if condition is true]
<b:elseif cond='another condition'/>
  [konten untuk ditampilkan jika tidak ada sebelumnya jika atau jika kondisi lainnya benar, dan kondisi ini jika benar]
<b:else/>
  [content to display if no if or elseif conditions are met]
</b:if>

The b:elseifdan b:elsetag adalah opsional. Tanpa mereka, hasilnya akan berupa konten yang tercantum dalam b: jika bagian atau tidak sama sekali. Penutupan </b:if>diperlukan dalam setiap kasus.

Untuk "kondisi", Anda dapat memasukkan apa pun yang bernilai benar atau salah. Beberapa tag data hanyalah nilai benar / salah sendiri, misalnya allowCommentspada pos. Dengan potongan data lainnya, Anda dapat membandingkannya dengan nilai tertentu untuk mendapatkan benar atau salah. Berikut ini beberapa contohnya:

<b:if cond='data:post.showBacklinks'>
Benar jika posting saat ini diatur untuk menampilkan tautan balik.
<b:if cond='data:blog.pageType == "item"'>
Benar jika halaman saat ini adalah halaman item (halaman posting).
<b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
Benar jika halaman saat ini adalah halaman item (halaman posting) dan posting saat ini diatur untuk menampilkan tautan balik.
<b:if cond='data:displayname != "Fred"'>
Benar jika ini bukan nama tampilan Fred.
<b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
Benar jika Fred adalah nama tampilan, atau halaman saat ini adalah halaman statis (bukan halaman posting).
<b:if cond='data:post.numComments > 1'>
Benar jika posting saat ini memiliki lebih dari satu komentar.
<b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
Benar jika halaman saat ini adalah posting tertentu, atau halaman.

Switch (b: switch)

Kapan harus menggunakan Switch

Anda dapat menggunakan b:switchtag seperti halnya Anda menggunakan b:iftag yang memiliki beberapa b:elseiftag. Keuntungan dari cabang switch adalah bahwa Anda tidak perlu mengulangi nama variabel. Anda dapat dengan mudah membacanya untuk melihat apa yang menentukan setiap kasus, dan apa kasus defaultnya.

Format

<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [Output if evaluation of var is equal to Value 1]
<b:case value="[Value 2]" />
 [Output if evaluation of var is equal to Value 2]
[… any other values]
<b:default />
 [Output if evaluation of var is not equal to any other stated b:case]
</b:switch>

Contoh

Contoh ini menunjukkan bagaimana cara menghasilkan header yang berbeda, tergantung pada jenis halaman apa yang diberikan.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Page</h1>
<b:case value="item" />
  <h1>Post</h1>
<b:default />
  <h2>Blog Posts</h2>
</b:switch>

Ekspresi atribut (expr :)

Kapan menggunakan Ekspresi

Anda bisa menggunakan atribut expr untuk menetapkan nilai atribut berdasarkan nilai dalam kamus data.

Contohnya

<a expr:href='data:blog.homepageUrl'>Home</a>
Tautan beranda dengan url beranda blog.
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
Tautan dengan url posting feed posting blog. Operator '+' menggabungkan dua string.
<a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
Tautan dengan kelas "komentar" ketika komentar diizinkan, dan "tidak ada komentar" ketika tidak. Operator ternary (? :) mengambil nilai boolean yang diberikan dan mengambil nilai pertama (setelah?) Jika boolean benar, atau nilai kedua (setelah :) jika boolean salah.

Ekspresi yang Dievaluasi (b: eval)

Kapan menggunakan Ekspresi yang Dievaluasi

Anda dapat menggunakan b:evaltag untuk mengevaluasi ekspresi yang lebih rumit daripada tag data standar.

Format

<b:eval expr='[Expression]' />

Contohnya

min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
Keluarkan tinggi relatif yang dihitung, berdasarkan nilai lebar baru.
<b:eval expr="data:post.labels[0].url" />
Keluarkan url dari label posting pertama.
<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
Keluarkan "Komentar" ketika komentar diperbolehkan, dan "Komentar Dinonaktifkan" ketika tidak. Perhatikan bahwa ungkapan ini menggunakan operator ternary.

Alias variabel (b: dengan)

Kapan harus menggunakan alias variabel

Anda dapat menggunakan b:withtag untuk menyimpan nilai ekspresi yang dihitung untuk sementara dan menghindari ekspresi inline yang rumit.

Format

<b:with var='myComputedValue' value='[Data expression]' />

Contohnya

Untuk atribut gaya yang rumit berdasarkan pada variabel data, Anda dapat menghitungnya sebelum sisa output HTML, sehingga HTML yang bersarang lebih mudah dibaca.

<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>My Header</h1>
   </div>
 </div>
</b:with>

Perhatikan bahwa variabel hanya akan ada untuk node anak dari b:withtag.

Lihat sebuah contoh

Klik untuk melihat contoh bagaimana semua tag ini digunakan dalam HTML untuk widget PageList di blog Anda.

Contoh

Dalam widget ini, Anda dapat melihat contoh penggunaan dari b:widget, b:includable(dan b:include), b:if(dan b:else), dan b:looptag.

<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'>
        <select expr:id='data:widget.instanceId + "_select"'>
         
            <option selected = 'selected'> <data: link.title /> </option>
           
            <option > <data: link.title /> </option> 
          <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>expr:value='data:link.href'<b:else/>expr:value='data:link.href'</b:if>
        </b:loop>
        </select>
        <span class = 'panah daftar-panah'> & amp; # 9660; </span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class = 'selected'>expr:href='data:link.href'<a>
               <data:link.title/></a>
            </li>
          <b: else />
            <li>expr:href='data:link.href'<a>
               <data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b: sertakan name = 'quickedit' />
    </div>
  </b:includable>
</b:widget>

Apakah artikel ini berguna?

© 2019 Sugeng.ID