लेआउट के लिए विजेट टैग

जब आप अपने ब्लॉग का मुख्य हिस्सा बनाने के लिए Layouts थीम इस्तेमाल कर रहे हों, तब आप विजेट का इस्तेमाल करके तस्वीरों और ब्लॉगरोल जैसे पेज तत्व जोड़ सकते हैं.

टैग के प्रकार

इस सेक्शन में उस एचटीएमएल के बारे में बताया गया है जो आप क्लोज़िंग टैग के बीच में इस्तेमाल कर सकते हैं.

इन्क्लूड (b:include)

इन्क्लूड का कब इस्तेमाल करना है

अगर आपके पास कोड का कोई ऐसा सेक्शन है जिसे आप कई अलग-अलग जगहों पर फिर से इस्तेमाल करना चाहते हैं या कुछ ही हालात में शामिल करना चाहते हैं, तो इन्क्लूड सबसे ज़्यादा काम आते हैं.

ऐसा करने क लिए, सामग्री को b:includable के अंदर लिखें, इसके बाद आप जहां उसे दिखाना चाहते हैं वहां b:include का इस्तेमाल करें.

फ़ॉर्मैट

<b:includable id='main' var='thiswidget'>
  [जो सामग्री आप डालना चाहते हैं वह यहां डाल सकते हैं]
</b:includable>

विशेषताएं

id (ज़रूरी): अक्षरों और संख्याओं से बना सबसे अलग पहचानकर्ता. हर विजेट में id='main' वाला एक इन्क्लूडेबल शामिल होना चाहिए.
var (ज़रूरी नहीं) इस सेक्शन के डेटा के संदर्भ वाला, अक्षरों और संख्याओं से बना पहचानकर्ता.

अगर आप अलग-अलग आईडी के साथ ज़्यादा इन्क्लूडेबल बनाते हैं, तो उन्हें अपने आप नहीं दिखाया जाएगा. हालांकि, अगर आप id='new' वाला एक इन्क्लूडेबल बनाते हैं, तो आप <b:include name='new' /> इस्तेमाल करके इसका संदर्भ अपने मुख्य इन्क्लूडेबल के साथ दे सकते हैं और वह इस तरह दिखाई देगा.

b:include टैग की विशेषताएं ये हैं:

name (ज़रूरी): अक्षरों और संख्याओं से बना पहचानकर्ता. यह उसी विजेट में मौजूद किसी b:includable टैग के आईडी से मेल खाने वाला होना चाहिए.
डेटा (ज़रूरी नहीं): शामिल किए जा सकने वाले सेक्शन को पास करने के लिए एक्सप्रेशन या डेटा का हिस्सा. यह इन्क्लूडेबल की var विशेषता का मान बन जाएगा.
cond (ज़रूरी नहीं) एक एक्सप्रेशन जिसकी वजह से शामिल किया जा सकने वाला सेक्शन तब ही लागू होता है जब इसका नतीजा सही हो. यह b:if पर cond विशेषता जैसा ही है.

उदाहरण

यहां एक उदाहरण दिया गया है जिसमें b:includable और b:include को इस्तेमाल करने का तरीका दिखाया गया है.

यहां समझने की सबसे ज़रूरी बात यह है कि कैसे "मुख्य" सेक्शन में "पोस्ट" सेक्शन शामिल होता है. यह ऐसे पोस्ट को आगे बढ़ाता है जिसे यह "p" कहता है. इसमें शामिल सेक्शन इसका संदर्भ उसके वैर "post" की तरह देता है, फिर शीर्षक को प्रिंट करता है.

ध्यान रखें कि इन्क्लूड सिर्फ़ तब काम करता है जब इंडेक्स 10 से कम हो. यानी ज़्यादा से ज़्यादा 10 पोस्ट इस उदाहरण में रेंडर की जा सकेंगी (इंडेक्स 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>

डेटा आउटपुट (data:)

उदाहरण

<data:title/> किसी विजेट का शीर्षक प्रिंट करेगा
<data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> किसी फ़ोटो कॉम्पोनेंट की विशेषताएं प्रिंट करेगा. एक फ़ोटो में यूआरएल, ऊंचाई, और चौड़ाई जैसे कॉम्पोनेंट हो सकते हैं. "." निशान का इस्तेमाल यह बताता है कि हम इस फ़ोटो का यूआरएल चाहते हैं, न कि किसी और चीज़ का यूआरएल.

और उदाहरण देखें

हमारे उन लेआउट डेटा टैग की पूरी सूची देखें, जो साथ काम करते हैं.

लूप (b:loop)

b:loop का इस्तेमाल कब करें

b:loop टैग की मदद से आप सामग्री के किसी सेक्शन को कई बार दोहरा सकते हैं. इसका इस्तेमाल आम तौर पर किसी पेज के लिए पोस्ट की सूची में से हर एक पोस्ट, हर टिप्पणी या हर लेबल वगैरह को प्रिंट करने के लिए किया जाता है.

फ़ॉर्मैट

लूप इस्तेमाल करने का सामान्य फ़ॉर्मैट यह होता है:

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

'पहचानकर्ता' (i) वाला हिस्सा कोई भी नाम हो सकता है जो आपने चुना हो. इसका इस्तेमाल सूची में मौजूद हर नए आइटम के लिए होगा, जब भी यह लूप से गुज़रेगा. मानों के लिए आप जो डेटा सेट तय करते हैं, वह डेटा टैग लेख में बताया गया कोई भी डेटा हो सकता है. ऐसा इसलिए, क्योंकि यह लेख आइटम की सूची भी है.

उदाहरण के लिए, ब्लॉग पोस्ट विजेट में, पोस्ट एक सूची होती है. नीचे दिए गए कोड जैसे कोड हर पोस्ट में लूप होंगे. इनसे हर एक का शीर्षक प्रिंट होगा जिसके आस-पास हेडर टैग लगे होंगे.

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

ध्यान दें कि कैसे इसके बदले में हर पोस्ट के मान पर "i" लग जाता है, ताकि आप हर एक का शीर्षक पा सकें.

संख्या की सीमा

लूप टैग की मदद से आप सब जगह संख्याओं की एक शामिल सीमा इस्तेमाल करते हैं, जैसे ‘1 से 3', ‘-3 से -9', जहां वैरिएबल के मान की जगह संख्या का मान ले लेगा. नीचे दिया गया उदाहरण 1, 2, और 3 की एक बिना क्रम वाली सूची बनाएगा.

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

इंडेक्स विशेषता

लूप टैग में विकल्प के तौर पर एक इंडेक्स विशेषता भी होती है, जो लूप की मौजूदा इटरेशन का शून्य पर आधारित इंडेक्स देती है.

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

इस उदाहरण से इनकी एक बिना क्रम वाली सूची बन जाएगी:

इंडेक्स: 0, संख्या: 9
इंडेक्स: 1, संख्या: 8
इंडेक्स: 2, संख्या: 7

If, elseif और else (b:if)

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 टैग वैकल्पिक हैं. इनके बिना, या तो नतीजा b:if सेक्शन में लिस्ट की गई सामग्री होगी या कुछ नहीं होगा. हालांकि, हर मामले में क्लोज़िंग </b:if> होना ज़रूरी है.

"condition" के लिए आप कोई भी चीज़ डाल सकते हैं जिसका मान या तो सही हो या गलत. कुछ डेटा टैग खुद में सिर्फ़ सही/गलत मान होते है, उदाहरण के लिए किसी पोस्ट पर 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 != "Fred"'>
सही, अगर यह फ़्रेड का डिसप्ले नाम न हो.
<b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
सही, अगर फ़्रेड डिसप्ले नाम हो या मौजूदा पेज एक स्टैटिक पेज (पोस्ट पेज नहीं) हो.
<b:if cond='data:post.numComments > 1'>
सही, अगर मौजूदा पोस्ट में एक से ज़्यादा टिप्पणियां हों.
<b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
सही, अगर मौजूदा पेज कोई खास पोस्ट या पेज हो.

स्विच (b:स्विच)

स्विच का इस्तेमाल कब करना चाहिए

आप b:switch टैग का इस्तेमाल काफ़ी हद तक उस b:if टैग की तरह कर सकते हैं, जिसमें कई b:elseif टैग हों. स्विच ब्रांच का फ़ायदा यह है कि आपको वैरिएबल का नाम दोहराना नहीं पड़ेगा. आप उन्हें आसानी से पढ़कर देख सकते हैं कि हर मामले की मूल वजह क्या है, और डिफ़ॉल्ट केस क्या है.

फ़ॉर्मैट

<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>

उदाहरण

इस उदाहरण में दिखाया गया है कि अलग हेडर का आउटपुट कैसे लिया जा सकता है. यह इस बात पर निर्भर है कि किस तरह का पेज रेंडर किया जा रहा है.

<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>

विशेषता एक्सप्रेशन (expr:)

एक्सप्रेशन का इस्तेमाल कब करें

डेटा डिक्शनरी में मौजूद मानों के आधार पर विशेषता मान सेट करने के लिए आप expr विशेषता का इस्तेमाल कर सकते हैं.

उदाहरण

<a expr:href='data:blog.homepageUrl'>होम</a>
ब्लॉग के होमपेज यूआरएल वाला एक होम लिंक.
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'> पोस्ट आरएसएस</a>
ब्लॉग के पोस्ट आरएसएस फ़ीड यूआरएल वाला एक लिंक. ‘+' ऑपरेटर दो स्ट्रिंग को जोड़ता है.
<a expr:class='data:post.allowComments ? "comment" : "no-comment"> टिप्पणी</a>
टिप्पणियों की अनुमति दिए जाने पर "टिप्पणी" क्लास और उनके न होने पर "कोई टिप्पणी नहीं" क्लास वाला लिंक. तिगुना ऑपरेटर (?:) दिए गए बूलियन मान को लेता है और बूलियन सही होने पर पहला मान (? के बाद) चुनता है, या बूलियन गलत न होने पर दूसरा मान (: के बाद) चुनता है.

मूल्यांकित एक्सप्रेशन (b:eval)

मूल्यांकन वाले एक्सप्रेशन का इस्तेमाल कब करें

आप b:eval टैग का इस्तेमाल सामान्य डेटा टैग से ज़्यादा पेचीदा एक्सप्रेशन का मूल्यांकन करने के लिए कर सकते हैं.

फ़ॉर्मैट

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

उदाहरण

min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
चौड़ाई के नए मान के आधार पर एक संबंधित ऊंचाई का हिसाब लगाकर आउटपुट देता है.
<b:eval expr="data:post.labels[0].url" />
पहले पोस्ट लेबल के यूआरएल का आउटपुट देता है.
<b:eval expr='data:post.allowComments ? "टिप्पणी" : "टिप्पणियां बंद हैं" />
टिप्पणियों की अनुमति होने पर "टिप्पणियां" और उनकी अनुमति न होने पर “टिप्पणियां बंद हैं” आउटपुट देता है. ध्यान दें कि यह एक्सप्रेशन तिगुने ऑपरेटर का इस्तेमाल करता है.

वैरिएबल उपनाम (b:with)

वैरिएबल उपनाम का इस्तेमाल कब करें

b:with टैग का इस्तेमाल करके आप किसी कंप्यूट किए गए एक्सप्रेशन का मान सेव कर सकते हैं और पेचीदा इनलाइन एक्सप्रेशन से बच सकते हैं.

फ़ॉर्मैट

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

उदाहरण

डेटा वैरिएबल पर आधारित जटिल शैली विशेषता के लिए, आप बाकी के एचटीएमएल आउटपुट से पहले उसे कंप्यूट कर सकते हैं. इससे नेस्ट किए गए एचटीएमएल को पढ़ना आसान हो जाता है.

<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>

ध्यान रखें कि वैरिएबल सिर्फ़ b:with टैग के चाइल्ड नोड के लिए मौजूद होगा.

एक उदाहरण देखें

आपके ब्लॉग के PageList विजेट के एचटीएमएल में ये टैग किस तरह इस्तेमाल होते हैं, इसका उदाहरण देखने के लिए क्लिक करें.

उदाहरण

इस विजेट में, आप इन टैग के इस्तेमाल के उदाहरण देख सकते हैं, 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>