<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
code to get the Blog widget to show up. Let's start unpacking that magic a little bit.At the end of this post, I'll have a blog that includes only the title lines from my blog posts. They will be in-line because there will be no styling that causes them to break onto separate lines. It'll looks likes this:
Here's the template that produces the above blog:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html
b:version='2'
class='v2'
expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:skin>
<![CDATA[
/*
-----------------------------------------------
----------------------------------------------- */
]]>
</b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<b:if cond='data:numPosts != 0'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>
<b:includable id='post' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
What's notable in this version?As mentioned above, before the blog widget was included in a self-closing form:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
Now, the blog widget uses a opening and closing tag that allows a lot of coding goo to be inserted.
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<!-- a lot of coding goo will go here... -->
</b:widget>
</b:section>
The next thing to notice that the Blog widget now has two children elements, both of which are 'includables':
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<!-- includable code goes here -->
</b:includable>
<b:includable id='post' var='post'>
<!--includable code goes here -->
</b:includable>
</b:widget>
</b:section>
According to the Blogger Help, "Widget content is contained in 'includable' sections". Check out the Blogger Help to learn more.
If we look at the main includable, we see:
<b:includable id='main' var='top'>
<!-- test to see if there are any posts -->
<b:if cond='data:numPosts != 0'>
<!-- loop to process each post -->
<b:loop values='data:posts' var='post'>
<!-- inserts an instance of the 'post' includable using the current post -->
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>
As indicated in the code comments, there is first a test to see if there are any posts. Then, there is a loop to process the posts. Finally, within the loop, an individual post is inserted using the post includable. So, let's look at the post includable.
<b:includable id='post' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</b:includable>
A number of interesting things going on here:
- Most of this is logic to determine (a) whether the title gets presented as a link or not and (b) where the link (if used) points to.
- We start to see the use of data from the post. These are things like post.id, post.link, post.url and so on. To see all the data that's available to you, look at Blogger's Layouts Data Tags help.
- In some instances, the title is wrapped in an <a> link. An expr is used (expr:href='data:post.link' or expr:href='data:post.url') to give the correct href link text.
No comments:
Post a Comment