లేఅవుట్ కోసం విడ్జెట్ ట్యాగ్‌లు

మీరు ఒక కోడ్ విభాగాన్ని వివిధ స్థలాల్లో పలుమార్లు తిరిగి ఉపయోగించాలన్నా లేదా కొన్ని సందర్భాలలో మాత్రమే చేర్చాలన్నా ఇన్‌క్లూడ్‌లు అధికంగా ఉపయోగపడతాయి.

ఇది చేయడానికి ఒక b:includableలో కంటెంట్‌ను రాయండి, తరువాత ఆ b:include మీకు ఎక్కడ కనిపించాలో అక్కడ దాన్ని ఉపయోగించండి.

<b:includable id='main' var='thiswidget'>
  [మీకు కావలసిన కంటెంట్ ఇక్కడ ఇన్‌సర్ట్ చేయండి]
</b:includable>

ఇన్‌క్లూడ్ ట్యాగ్ ఇతర లక్షణాలు ఈ విధంగా ఉంటాయి:

• నేమ్ (అవసరం): అక్షరాలు, సంఖ్యలతో ఒక ఐడెంటిఫయర్ నిర్వచించబడుతుంది. అదే విడ్జెట్‌లో ఇప్పటికే ఉన్న b:includable IDతో అది తప్పనిసరిగా మ్యాచ్ కావాలి.
• డేటా (ఆప్షనల్): ఇన్‌క్లూడబుల్ విభాగానికి చేరవేయగలిగే ఒక ఎక్స్‌ప్రెషన్ లేదా డేటా భాగం. ఇన్‌క్లూడబుల్‌లో ఇది వేరియబుల్ లక్షణం యొక్క విలువ అవుతుంది.
• cond (ఆప్షనల్) దాని ఫలితం "ట్రూ" అయితేనే ఇన్‌క్లూడ్‌ను అమలుపరిచేలా చేసే ఎక్స్‌ప్రెషన్. ఒక b:ifలో cond లక్షణానికి కూడా ఇదే వర్తిస్తుంది.

b:includable మరియు b:includeలను.ఎలా ఉపయోగించాలి అన్న దానికి ఇది ఒక ఉదాహరణ.

"ప్రధాన" విభాగం లోపల "పోస్ట్" విభాగం ఎలా భాగమై ఉంటుంది అనేది ఇక్కడ అర్ధం చేసుకోవాల్సిన ప్రధానమైన విషయం. "p" అని పిలవబడే ఒక పోస్ట్‌తో కలిసి ఉంటుంది, ఇన్‌క్లూడెడ్ విభాగం దానిని వేరియబుల్ "పోస్ట్"గా సూచిస్తుంది, ఆపై శీర్షికను ప్రింట్ చేస్తుంది.

ఇండెక్స్ 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>

ఇది లూప్‌ల కోసం ఉపయోగించే సాధారణ ఫార్మాట్:

 

<b:loop var='identifier' values='set-of-data'>
  [పునరావృతమయ్యే కంటెంట్ ఇక్కడ ఉంటుంది ]
</b:loop>

 

'ఐడెంటిఫయర్' (i) ఈ భాగం మీరు ఎంచుకొనే ఏ పేరు అయినా కావచ్చు, లిస్ట్‌లోని ప్రతి కొత్త ఐటెమ్‌కు బదులుగా కనిపించడానికి లూప్ అంతటా ఇది వాడబడుతుంది. విలువలకు మీరు నిర్దేశించే డేటా సమితి అనేది, data tags articleలో ఐటెమ్‌ల లిస్ట్‌లోని భాగంగా చెప్పబడిన ఏదైనా డేటా భాగం కావచ్చు.

ఉదాహరణకు, ఈ బ్లాగ్ ‌పోస్ట్‌ల విడ్జెట్‌లో, posts అనేది ఒక లిస్ట్. దిగువ ఉన్న కోడ్ ప్రతి పోస్ట్‌ను లూప్ చేసి, ప్రతి పోస్ట్‌కు శీర్షికను హెడర్ ట్యాగ్‌లతో పాటు ప్రింట్ చేస్తుంది.

 

<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

<b:if cond='condition'>
  [షరతు "ట్రూ" అయితే డిస్‌ప్లే చేయాల్సిన కంటెంట్]
<b:elseif cond='another condition'/>
  [మునుపటివి లేదా వేరే షరతులు ఏవీ "ట్రూ" కాకపోయినా, మరియు ఈ వేరే షరతు "ట్రూ" అయినా డిస్‌ప్లే చేయాల్సిన కంటెంట్]
<b:else/>
  [షరతు ఏదీ పూర్తి కాకపోయినా లేదా వేరే షరతులు పూర్తి అయినా అయితే డిస్‌ప్లే చేయాల్సిన కంటెంట్]
</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 != "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'>
  ప్రస్తుత పేజీ ఒక నిర్దిష్ట పోస్ట్ లేక పేజీ అయితే ట్రూ.

డేటా వేరియబుల్‌పై ఆధారపడిన ఒక సంక్లిష్టమైన స్టైల్ లక్షణాన్ని 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>My Header</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>