Blogger Template Design from Scratch - Part 3

In part two of the Blogger Template Design from Scratch, widget tag were explained in depth. In this part, an important component of the blogger template design, the data tag will be explained along with looping and conditional tags.

Conditional - If/Else

This is similar to the if/else statement in other programming languages. This can be used to display some components or data based on a condition.

Syntax

<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 part is optional. If there is no else, the result will be the content inside the b:if tag when the condition results to true.

For the condition, you must place something that results in either true or false(like a boolean type). You can directly include a value from data which is itself either true or false, like data:post.allowComments. allowComments is true if comments are allowed for that post, false otherwise.

Example

  • <b:if cond='data:post.numComments > 1'> - True if the current post has more than one comment.
  • <b:if cond='data:blog.pageType == "item"'> - True if the current page is an item page (post page).

Or you can compare two values that might result in either true or false.

Example

<b:if cond='data:post.numComments > 1'>
    [Comments are available]
<b:else/>
    [Comments are not available]
</b:if>

Loops

The b:loop tag allows you to repeat a particular section multiple times. This is useful to display list/set of data elements like labels in a post, comments for a post and posts.

Syntax

<b:loop var='identifier' values='set-of-data'>
    [content that will be repeated]
</b:loop>

The values attribute is where the actual data list will be passed. Then each of the data item in the list will be looped through the content inside the loop. Inside the loop that data item will identified using the identifier provided to the var attribute.

Example

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

The above will loop through each post available and will display the title for the post.

Data tag

The data: is one of the most important element for the blog. This is where all the content of a blog comes from. Contents like title, url, posts(collection of post) and every bit of information displayed in the blog.

Example

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <data:title/>
</b:widget>

The contents of the data tag varies based on the widget in which it is present(Like scope of a variable in javascript inside function and outside of it). Inside a widget it has a different "title" for each widget and contents based on it's type(View the previous posts for the different widget types). When not inside a widget(like global scope), it has a different set of data available inside of it.

Example

<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false'>
    <b:includable id='main'>
        <h3><data:title/></h3>
    </b:includable>
</b:widget>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
        <h3><data:title/></h3>
    </b:includable>
</b:widget>

In the above example, both the widget has <data:title/> dispalyed in it. But the title that is displayed will be different for the both widgets(though the title is the one provided in the "title" attribute of the widget, but it is stored in the data tag). Try putting this code in your test blog and view the output.

The global blog data can be accessed from the "blog" part of the data which is globally available. The structure of accessing data here is similar to JavaScript Object. Consider blog as the object containing properties for the blog and it can be accessed using the "."(dot notation) as we do in JavaScript.

// Consider the following scenario in JavaScript
// Consider blog is a property of "window" and window is identical to data.
blog = {
    'title': 'The title for the blog',
    'pageType': 'The type of the current page. One of "item", "index", "archive"',
    'homepageUrl': 'The homepage of the blog',
    'pageName': 'The title of the current page'
};

alert(blog.title);

if (blog.pageType == 'item') {
    alert(blog.pageName);
} else {
    alert(blog.title);
}

In blogger we would write the above as,

<b:if cond='data:blog.pageType != "item"'>
    <data:blog.title/>
<b:else/>
    <data:blog.pageName/>
</b:if>

In blogger the blog part of the data is already filled with data for the particular blog.

The expr

The expr is used to compute expressions and assign values for attribute in tags. This can be used to assign values to attributes from the data:

Syntax

<tagName expr:attribute='expression'></tagName>

Example

<b:includable id="nextPrevLink">
    <div style="display: inline">
        <strong>
         <a expr:href="data:olderPageUrl" expr:title="data:olderPageTitle">Older Posts</a>
     </strong>
        <strong>
         <a expr:href="data:newerPageUrl" expr:title="data:newerPageTitle">New Posts</a>
     </strong>
    </div>
</b:includable>

The above example shows how expr can be used to set the values of href and title attribute of the a tag from the data tag. Using the same way we could compute conditionals to set values for attributes.