Includables are used extensively throughout any Blogger template. They help to organize the template code by breaking it into smaller, and more manageable, pieces. Let's look at how to use includables.
If you have looked at any Blogger template you would have noticed that all the widgets that are added are comprised of items called 'includables'. These help to break up the template code into smaller pieces that are put together like a puzzle.
Imagine if you had a widget, and within that widget were several lines of code that were repeated several times. It is easy to simply copy that piece of code throughout that widget. What happens if you decide to change that code later? You would have to find every location that code is used and make the changes.
Includables reduce the effort required to edit that code. You can simply create an includable, add the repeated code into the includable, and then include that includable in all places where you want the code to be placed. Now if you wanted to change the code, you simply change it in one location - the includable.
About Includables
Includables allow you to reuse common code throughout a widget. It also allows you to break up your template code by functionality. Let's look at a real template example. Many templates have code similar to the following:
<b:if cond='data:post.dateHeader'>
<p class='date-header'><data:post.dateHeader/></p>
</b:if>
<b:include data='post' name='post'/>
<b:include data='post' name='comments'/>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<b:loop values='data:posts' var='post'>
This code will loop through the posts and display the post information on your blog. You will notice that it uses a few includables: post and comments. Let's concentrate on the post includable, but keep in mind that the comments includable is created the same way.
The call to the post includable looks like:
This line is calling the includable called "post", indicated by "name='post'". It is also passing data into the includable, which is the post data. You can see this from "data='post'". The post data contains all the information, including content, labels, and date published.
Includable Definition
Now that we saw how the post includable is being called, let's look at the actual includable definition.
... code to display the posts is here (too long to display) ...
</b:includable>
This is how includables are defined in a widget. As you can see there are two parameters that can be associated with an includable:
| Parameter | Description |
|---|---|
| id | The name, or identifier, of the includable. |
| var | (optional) A variable that can contain data passed into the includable. |
The var parameter in the post includable will contain the post data contents since that is what was passed into it in the first code example. This now allows the post includable to display all the data in a post onto a web page in your blog.
When a visitor views one of your post pages, all the code that is between "<b:includable id='post' var='post'>" and "</b:includable>" will now be included in any location where the post include is called. Calling this include in another location in the widget will cause the HTML code to be inserted there as well when a page is requested. This is how includable code can be re-used.
One thing to keep in mind, however, is that you can only call includables that are defined in the same widget. This means you can't call the post includable from an archives widget. It is also important to note that each widget has an includable called "main". This includable is "executed" first so the widget display begins with the "main" includable.
While it may seem complex, or difficult to understand, if you plan on working with Blogger templates it is important to understand how includables work. It is best to fist start editing existing includables, and then create your own. With enough practice you will be able to create your own great, modularized, templates.
