แท็กวิดเจ็ตสำหรับการออกแบบ

เมื่อใดควรใช้ include

include จะมีประโยชน์สูงสุดถ้าคุณมีส่วนของโค้ดที่ต้องการใช้ซ้ำในตำแหน่งต่างๆ หรือให้รวมไว้เฉพาะบางกรณี

ดำเนินการโดยเขียนเนื้อหาภายใน b:includable จากนั้นใช้ b:include ในตำแหน่งที่ต้องการให้เนื้อหานั้นปรากฏ

รูปแบบ

 

<b:includable id='main' var='thiswidget'>
  [แทรกเนื้อหาที่ต้องการที่นี่]
</b:includable>

 

แอตทริบิวต์

• id (ต้องมี): ตัวระบุที่ไม่ซ้ำซึ่งประกอบด้วยตัวอักษรและตัวเลข แต่ละวิดเจ็ตต้องมีแท็ก includable หนึ่งแท็กที่มี id='main'
• var (มีหรือไม่ก็ได้) ตัวระบุที่ประกอบด้วยตัวอักษรและตัวเลข สำหรับอ้างอิงข้อมูลในส่วนนี้

ถ้าคุณสร้างแท็ก includable เพิ่มโดยใช้ ID อื่น แท็กเหล่านั้นจะไม่แสดงโดยอัตโนมัติ อย่างไรก็ตาม ถ้าคุณสร้างแท็ก includable โดยใช้ id='new' คุณจะอ้างอิงแท็กนี้ในแท็ก includable หลัก (main) ได้โดยใช้ <b:include name='new' /> โดยที่แท็กจะแสดงในลักษณะดังกล่าว

แอตทริบิวต์สำหรับแท็ก b:include มีดังนี้:

• name (ต้องมี): ตัวระบุที่ประกอบด้วยตัวอักษรและตัวเลข จะต้องตรงกับ ID ของ b:includable ที่มีอยู่แล้วในวิดเจ็ตเดียวกัน
• data (มีหรือไม่ก็ได้): นิพจน์หรือส่วนของข้อมูลที่จะส่งต่อไปยังส่วน includable ซึ่งจะกลายเป็นค่าของแอตทริบิวต์ var ในส่วน includable
• cond (มีหรือไม่ก็ได้) นิพจน์ที่กำหนดให้ดำเนินการแท็ก include เฉพาะเมื่อผลลัพธ์เป็นจริง ซึ่งเหมือนกับแอตทริบิวต์ cond ใน b:if

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่แสดงวิธีใช้ b:includable และ b:include

สิ่งสำคัญที่จะต้องทำความเข้าใจในตัวอย่างนี้คือ วิธีการรวมส่วน "post" ไว้ในส่วน "main" ส่วน main จะส่งต่อโพสต์ที่ตั้งชื่อว่า "p" และรวมส่วนที่อ้างอิงถึงส่วน main โดยใช้ var ซึ่งก็คือ "post" จากนั้นพิมพ์ชื่อโพสต์

โปรดทราบว่า แท็ก include จะทำงานเฉพาะเมื่อ index ต่ำกว่า 10 ดังนั้นตัวอย่างนี้จะแสดงสูงสุดเพียง 10 โพสต์ (index เริ่มที่ 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'>
  ชื่อเรื่อง: <data:post.title/>
</b:includable>

 

ตัวอย่าง

• <data:title/> จะพิมพ์ชื่อของวิดเจ็ต

• <data:photo.url/> - ขนาด: <data.photo.width /> x <data.photo.height /> จะพิมพ์แอตทริบิวต์ของส่วนประกอบรูปภาพ รูปภาพอาจมีส่วนประกอบต่างๆ เช่น URL ความสูง และความกว้าง การใช้เครื่องหมาย "." ระบุว่าเราต้องการ URL ของรูปภาพนี้ ไม่ใช่ URL ของสิ่งอื่น

ดูตัวอย่างเพิ่มเติม

ดูรายการแท็กข้อมูลการออกแบบทั้งหมดที่ได้รับการสนับสนุน

 

เมื่อใดควรใช้ b:loop

แท็ก b:loop ช่วยให้คุณแสดงส่วนหนึ่งของเนื้อหาซ้ำหลายครั้ง แท็กนี้มักนิยมใช้ในการพิมพ์โพสต์แต่ละโพสต์จากรายการโพสต์ของหน้าใดหน้าหนึ่ง หรือพิมพ์ความคิดเห็น หรือป้ายกำกับ ฯลฯ

รูปแบบ

รูปแบบทั่วไปในการใช้ลูปคือ

 

<b:loop var='identifier' values='set-of-data'>
  [ใส่เนื้อหาสำหรับแสดงซ้ำที่นี่]
</b:loop>

 

ส่วน 'identifier' (i) สามารถเป็นชื่ออะไรก็ได้ตามที่คุณเลือก และจะใช้แทนข้อมูลใหม่ในรายการ ในแต่ละครั้งที่วนลูป ชุดของข้อมูลที่คุณระบุเป็น values สามารถเป็นข้อมูลอะไรก็ได้ตามที่อธิบายในบทความแท็กข้อมูลโดยต้องเป็นรายการที่ประกอบด้วยข้อมูลย่อย

ตัวอย่างเช่น ในวิดเจ็ตบล็อกโพสต์ posts คือรายการ รหัสดังเช่นในตัวอย่างต่อไปนี้จะลูปผ่านทีละโพสต์พร้อมพิมพ์ชื่อของโพสต์โดยใส่แท็ก header ครอบไว้

 

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

 

สังเกตว่า "i" รับค่าของโพสต์ทีละโพสต์ คุณจึงสามารถเรียกชื่อเรื่องจากแต่ละโพสต์ได้

ช่วงตัวเลข

แท็ก loop ช่วยให้คุณดำเนินการแบบวนรอบได้ตามจำนวนครั้งในช่วงที่ระบุ เช่น ‘1 to 3', ‘-3 to -9' โดยที่ค่าของตัวแปรจะใช้ค่าของตัวเลขที่ระบุแบบรวมทั้งหมด (inclusive) ตัวอย่างต่อไปนี้จะสร้างรายการแบบไม่เรียงลำดับของเลข 1, 2 และ 3

 

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

 

แอตทริบิวต์ดัชนี

แท็ก loop ยังมีแอตทริวบิวต์ index ซึ่งจะระบุหรือไม่ก็ได้ โดยจะให้ค่าดัชนีของการวนรอบลูปสำหรับรอบปัจจุบันโดยมีค่าเริ่มจากศูนย์

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>ดัชนี: <data:index />, ตัวเลข: <data:number /></li>
  </b:loop>
</ul>

 

ตัวอย่างนี้จะสร้างรายการแบบไม่เรียงลำดับได้ดังนี้

• ดัชนี: 0, ตัวเลข: 9
• ดัชนี: 1, ตัวเลข: 8
• ดัชนี: 2, ตัวเลข: 7

เมื่อใดควรใช้ if, elseif หรือ else

คุณสามารถใช้แท็ก b:if, b:elseif และ b:else เพื่อแสดงเนื้อหาอย่างหนึ่งในกรณีหนึ่ง และแสดงเนื้อหาอย่างอื่นในกรณีอื่นๆ ตัวอย่างเช่น คุณอาจต้องการแสดงข้อความบางอย่างเฉพาะในหน้าแรก แต่แสดงข้อความอื่นเมื่อดูแต่ละโพสต์

รูปแบบ

 

<b:if cond='condition'>
  [เนื้อหาที่จะแสดงเมื่อเงื่อนไขเป็นจริง]
<b:elseif cond='another condition'/>
  [เนื้อหาที่จะแสดงถ้าไม่มีเงื่อนไข if หรือ elseif ก่อนหน้าเป็นจริงเลย และเงื่อนไข elseif เป็นจริง]
<b:else/>
  [เนื้อหาที่จะแสดงถ้าไม่มีเงื่อนไข if หรือ elseif ใดเป็นจริง]
</b:if>

 

แท็ก b:elseif และ b:else นั้นจะใส่หรือไม่ก็ได้ ถ้าไม่ใส่ไว้ ผลลัพธ์จะมี 2 แบบ คือ มีเนื้อหาแสดงในส่วน b:if หรือไม่มีเนื้อหาใดเลย แต่ทั้งนี้ จะต้องใส่แท็กปิด </b:if> ด้วย

สำหรับ "เงื่อนไข" คุณสามารถใส่รหัสใดก็ได้ที่ประเมินค่าได้เป็นจริงหรือเป็นเท็จ แท็กข้อมูลบางแท็กจะมีค่าเป็นจริง/เท็จโดยตัวมันเอง เช่น allowComments ในโพสต์ เมื่อใช้ร่วมกับข้อมูลอื่นๆ คุณสามารถเปรียบเทียบค่าของแท็กกับค่าเฉพาะเพื่อประเมินผลลัพธ์ว่าเป็นจริงหรือเท็จ ต่อไปนี้เป็นตัวอย่างบางส่วน

• <b:if cond='data:post.showBacklinks'>
  เป็นจริงถ้าโพสต์ปัจจุบันถูกตั้งค่าไว้ให้แสดงลิงก์กลับ
• <b:if cond='data:blog.pageType == "item"'>
  เป็นจริงถ้าหน้าปัจจุบันเป็นหน้าข้อมูล (หน้าโพสต์)
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  เป็นจริงถ้าหน้าปัจจุบันเป็นหน้าข้อมูล (หน้าโพสต์) และโพสต์ปัจจุบันถูกตั้งค่าให้แสดงลิงก์กลับ
• <b:if cond='data:displayname != "สมชาย"'>
  เป็นจริงถ้าชื่อที่แสดงไม่ใช่สมชาย
• <b:if cond='data:displayname == "สมชาย" or data:blog.pageType == "static_page"'>
  เป็นจริงถ้าชื่อที่แสดงคือสมชาย หรือหน้าปัจจุบันเป็นหน้าสถิติ (ไม่ใช่หน้าโพสต์)
• <b:if cond='data:post.numComments > 1'>
  เป็นจริงถ้าโพสต์ปัจจุบันมีความคิดเห็นมากกว่า 1 รายการ
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  เป็นจริงถ้าหน้าปัจจุบันเป็นโพสต์ใดโพสต์หนึ่ง หรือเป็นหน้าใดหน้าหนึ่ง

เมื่อใดควรใช้ Switch

คุณสามารถใช้แท็ก b:switch ในลักษณะคล้ายกับการใช้แท็ก b:if ที่มีแท็ก b:elseif หลายแท็ก ข้อดีของการใช้สาขาแบบ switch คือคุณไม่ต้องระบุชื่อตัวแปรซ้ำ คุณสามารถเข้าใจได้โดยง่ายว่าสาขาใดกำหนดกรณีใด และกรณีเริ่มต้นคืออะไร

รูปแบบ

<b:switch var=’[นิพจน์ข้อมูล]’>
<b:case value="[Value 1]" />
 [ผลลัพธ์ถ้าการประเมิน var ได้ผลเท่ากับ Value 2]
<b:case value="[Value 2]" />
 [ผลลัพธ์ถ้าการประเมิน var ได้ผลเท่ากับ Value 2]
[… ค่าอื่นๆ]
<b:default />
 [ผลลัพธ์ถ้าการประเมิน var ไม่ตรงกับ b:case ใดๆ ที่ระบุ]
</b:switch>

ตัวอย่าง

ตัวอย่างนี้แสดงให้เห็นวิธีการแสดงหัวข้อที่แตกต่างกันไปตามประเภทของหน้าที่แสดงผล

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>หน้า</h1>
<b:case value="item" />
  <h1>โพสต์</h1>
<b:default />
  <h2>บล็อกโพสต์</h2>
</b:switch>

เมื่อใดควรใช้ Expression

คุณสามารถใช้แอตทริบิวต์ expr เพื่อกำหนดค่าแอตทริบิวต์โดยยึดตามค่าในพจนานุกรมข้อมูล 

ตัวอย่าง

• <a expr:href='data:blog.homepageUrl'>หน้าแรก</a>
  ลิงก์หน้าแรกพร้อม URL หน้าแรกของบล็อก
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS ของโพสต์</a>
  ลิงก์ที่มี URL ของฟีด RSS ของโพสต์ของบล็อก ตัวดำเนินการ "+" ใช้เชื่อม 2 สตริงเข้าด้วยกัน
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">ความคิดเห็น</a>
  ลิงก์ที่มีคลาส "comment" เมื่ออนุญาตให้แสดงความคิดเห็นได้ และคลาส "no-comment" เมื่อไม่อนุญาตให้แสดงความคิดเห็น ตัวดำเนินการเทอร์นารี (?:) รับค่าบูลีนที่ให้มา แล้วเลือกค่าแรก (หลังเครื่องหมาย ?) ถ้าบูลีนเป็นจริง หรือเลือกค่าที่สอง (หลังเครื่องหมาย :) ถ้าบูลีนเป็นเท็จ

เมื่อใดควรใช้นิพจน์จากการประเมิน

คุณสามารถใช้แท็ก b:eval เพื่อประเมินนิพจน์ที่มีความซับซ้อนมากกว่าแท็กข้อมูลทั่วไป

รูปแบบ

<b:eval expr='[นิพจน์]' />

ตัวอย่าง

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  แสดงความสูงสัมพัทธ์จากการคำนวณโดยอาศัยความกว้างค่าใหม่
• <b:eval expr="data:post.labels[0].url" />
  แสดง url ของป้ายกำกับโพสต์แรก
• <b:eval expr='data:post.allowComments ? "ความคิดเห็น" : "ไม่อนุญาตให้แสดงความคิดเห็น" />
  แสดงข้อความ “ความคิดเห็น” เมื่ออนุญาตให้แสดงความคิดเห็นได้ และแสดงข้อความ “ไม่อนุญาตให้แสดงความคิดเห็น” ในกรณีตรงข้าม โปรดสังเกตว่านิพจน์นี้ใช้ตัวดำเนินการเทอร์นารี

เมื่อใดควรใช้นามแฝงตัวแปร

คุณสามารถใช้แท็ก b:with เพื่อเก็บค่าของนิพจน์ที่คำนวณได้ไว้ชั่วคราว เพื่อหลีกเลี่ยงการใช้นิพจน์ในบรรทัดซึ่งมีความซับซ้อน

รูปแบบ

<b:with var='myComputedValue' value=’[นิพจน์ข้อมูล]’ />

ตัวอย่าง

สำหรับแอตทริบิวต์ style ที่ซับซ้อนซึ่งขึ้นกับตัวแปรข้อมูล คุณสามารถคำนวณค่านั้นได้ก่อนการแสดงผล HTML ที่เหลือ เพื่อให้ HTML แบบซ้อนนั้นอ่านง่ายขึ้น

<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>หัวข้อของฉัน</h1>
   </div>
 </div>
</b:with>

โปรดทราบว่า ตัวแปรจะมีอยู่เฉพาะสำหรับโหนดย่อยของแท็ก b:with เท่านั้น

ในวิดเจ็ตนี้ คุณสามารถดูตัวอย่างการใช้งานแท็ก b:widget, b:includable (และ b:include), b:if (และ b:else) และ b:loop

 

<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"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr: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>