How to make a blogger template : inside widget - includable

In previous post ,I told you about section and widget ,and how it arranged in the template body . In this post ,I will show you what is in a widget.



As we know ,a widget has an opening tag and a closing tag ,and structure like this :

<b:widget [...attributes...]>

</b:widget>

for example ,a header widget

<b:widget id="header" type='HeaderView' locked="yes"/> 

..............

</b:widget/>

a widget contain blocks of code 'includable' inside ,like this :

<b:widget [...attributes...]>

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

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

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

 ..........

</b:widget>

If you see blogger template file ,this is what you see ,is that right ?

In each widget ,there must be one 'includable' block with id="main" .This will usually contain most or all of the content that will display for this widget ,and other 'includable' will support the main 'includable' in processing data . For example ,you have a widget which showing the subsription form ,in this widget ,there's a main 'includable' will show the form and result , and other 'includable' will get the data form ,connect to the subscription database,processing them...etc.. . Or if a widget is a car ,so the 'main includable' will be motor ,other includable will be fuel tank,spark plug,valves ,crankshaft ...

An includable followed with these attributes :

• id: (Required) A unique identifier made up of letters and numbers.
• var: (Optional) An identifier made up of letters and numbers, for referencing data within this section.

When a widget go to work , the main includable will get data ,pass data to other 'includable' for processing and then get the result back to main includable for showing result through a call stament .
The call statement has form

 <b:include name='includable id' data='variable'/>

Beside the main 'includable' ,you can set the id of other 'includable' with any name you want .

If you familiar to 'function ' and 'procedure' in programing ,you can understand 'includable' and 'widget' easily . The main includable work as main program ,and other includable work as function or procedure .

Another example ,if you want to show post title :

<b:includable id='main'>
 
      <b:include name='show_post_title' data='i'/>
 
</b:includable>

<b:includable id='show_post_title' var='p'>
............ 

show post title of the post has id='p'

..........
</b:includable>

in the code above ,the main includable has a call stament for includable 'show_post_title' . The ID of the post which you want to show title is passed through variable 'i' in the main  . The includable 'show_post_title' get the value of 'i' and assign it as to variable 'p' , then show title of the post which has id='p' . The result is returned to the main includable and displayed as title of the post which has id='i' .

Includes are most useful if you have a section of code that you want to repeat multiple times in different places. You can just write the code once, put it inside a b:includable, then use b:include wherever you want it to appear. If you don't need to do that, then you can just stick with the single main includable and not worry about the rest. (Note that the main includable is included automically -- <b:include name='main'/> is unnecessary.)

Statements

Like any programing language ,Blogger allows us use some statement such as loop statement and condition statement in 'includable' .

Loops

The b:loop statement repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc. The general format for using loops is this:

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

The 'identifier' part can be any name you choose, and will be used to stand in for each new item in the list, for instance, in the blog posts widget, posts is a list,each time through the loop. A common convention is to simply call this "i" . 

If / Else

You can use the b:if and b:else tags to display content in some places but not others. The general format is this:

<b:if cond='condition'>
   [content to display if condition is true]
<b:else/>
   [content to display if condition is false]
</b:if>

The b:else tag is optional. Without it, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.