Notes on the Bluebird Template, Part 5

It's way past time that we got to the post part of the Bluebird template, and we'll do that today. The template's <BlogDateHeader> ... </BlogDateHeader> node, which we discussed two entries ago, is followed by a Post div

.Post { margin-bottom: 20px; font-size: 15px; padding-right: 15px; line-height: 22px; font-family: arial, helvetica; color: black; }
...
<div class="Post"> ... </div>

that contains the post title, the post itself, and a byline for the post.

The post title

Blogger assigns a multidigit ID to each of my posts; this ID serves as a fragment identifier for an anchor that precedes the post title.

<div class="Post">
<a name="<$BlogItemNumber$>"> </a><br />
...the post title...

FWIW, 7217738745400984168 is a typical <$BlogItemNumber$>. If there's a link somewhere to this anchor, I can't find it. Keep the anchor if you want, but I'd throw it out.

The anchor is followed by a somewhat-confusing block of code:

<BlogItemTitle>
<span class="PostTitle">
<BlogItemURL><a href="<$BlogItemURL$>"></BlogItemURL>
<$BlogItemTitle$>
<BlogItemURL></a></BlogItemURL>
</span><br />
</BlogItemTitle>

As you would guess, the post title is the replacement text for the <$BlogItemTitle$> reference. But what about the rest of it? The <BlogItemURL> ... </BlogItemURL> nodes and the link markup they contain are/were related to a "Link field" feature that Blogger has evidently abandoned. Moreover, the <BlogItemTitle> ... </BlogItemTitle> node seems to have a purely descriptive purpose, i.e., it doesn't do anything to the post title as far as I can tell.

The title is styled as follows:

.PostTitle { font-size: 16px; font-weight: bold; font-family: arial, helvetica; }

The post

...
</BlogItemTitle>
<$BlogItemBody$><br />

The post is the replacement text for a <$BlogItemBody$> reference that immediately follows the BlogItemTitle node. The post text is styled by the font-size, line-height, font-family, and color property declarations in the .Post { ... } style rule given earlier.

The post and its title are taken from their respective input fields at the "Create post" or "Edit post" page.

The post byline

Here is a typical reptile7's JavaScript blog post byline:



The byline is held by a PostFooter span:

.PostFooter { margin-bottom: 10px; margin-left: 0px; color: gray; font-size: 10px; }
...
<span class="PostFooter"> ... </span>

The byline begins with a
- posted by <$BlogItemAuthorNickname$>
string; the <$BlogItemAuthorNickname$> reference returns the author's Display Name as set in the Identity section of the Edit User Profile page.

Next we have the post's 'permalink':

@ <a href="<$BlogItemPermalinkURL$>" title="permanent link"><$BlogItemDateTime$></a>

<$BlogItemPermalinkURL$> returns the URL of the post's individual post page; as for the link text, <$BlogItemDateTime$> returns a value based on the selected option of the Timestamp Format selection list in the Formatting subsection of the Dashboard Settings zone.

(A timestamp is not meant to be a dynamic feature and should not be created via a client-side script. If you want to append a timestamp to a block of content, then you should look at your watch, say "It's 2:53 in the afternoon," and type 2:53 PM into a suitable element - at least that's what I would do.)

If we're at the main page or one of the archive pages and if comments on the post are allowed, then the post's permalink is followed by another link that points to a separate "Post a Comment" page and whose text indicates the number of published comments the post has.

<MainOrArchivePage><BlogItemCommentsEnabled>
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled></MainOrArchivePage>

• <MainOrArchivePage> </MainOrArchivePage> are "conditional tags" à la the <ItemPage> </ItemPage> construct we encountered in Part 2 of this series.

• The <BlogItemCommentsEnabled> ... </BlogItemCommentsEnabled> node is turned on or off if comments on the post are enabled or not, respectively:



• <$BlogItemCommentCreate$> returns the URL of the "Post a Comment" page. Bizarrely, <$BlogItemCommentFormOnclick$> returns a JavaScript statement that sets location.href to the <$BlogItemCommentCreate$> URL:

location.href = post-a-comment-pageURL;

According to Blogger's "Comments Tags" page, <$BlogItemCommentFormOnclick$> includes the code that opens the link in a popup window, if you have that option selected - an option that Blogger seems to have abandoned. In practice, the browser ignores the location.href assignment (no errors are thrown): in the Notes on invalid documents section of the HTML 4.01 Specification, the W3C stipulates, If a user agent encounters an attribute it does not recognize, it should ignore the entire attribute specification (i.e., the attribute and its value). You can alternatively give the link a target="_blank" attribute in order to open it in a new window.

• As for the <$BlogItemCommentCount$> in the link text, I trust you can figure that one out.

The PostFooter span concludes with a <$BlogItemControl$> reference, which is replaced by
(1) a image-link to an "Email Post to a Friend" page and
(2) a image-link to the "Edit post" page via which the post can be edited.

---

I am not inclined to discuss the Comments part of the Bluebird template; as noted in Part 1 of this series, my concern here is in applying the Bluebird template to the creation of normal Web pages vis-à-vis reproducing the template's blog-centric features. But then I thought, "Is it really that difficult to add a simple comments facility to an ordinary Web page?" As a matter of fact, it isn't - I'll show you what I came up with in the following entry.