Saturday, 23 August 2014

7 Blogger Page Types: Analysis, Code Snippets, Data Matrix

If you're only using the pageType tag to identify the Page Type this guide is for you. The pageType tag only identifies four of the seven Page Types. This guide will show you how to identify all seven Blogger Page Types. I know it sounds confusing, just refer to the glossary. If that still doesn't help leave comments. I understand the terminology in this document could be confusing at first.

This data was collected in part using blogger2ools.

Contents

Glossary

Page Type
The type of a page. For example, Search Page Type. This term does not always end with Type. For example, terms like Search Page and Search Page Type mean the same thing and are used interchangeably in this document.
pageType tag
Note uppercase T and no space in between page and Type. Globally available layout date tag. The pageType tag returns a value of: item, static_page, archive or index.

Item Page Type


You must have Post Pages enabled. To quote the Blogger Dashboard, Post Pages give each of your posts their own unique web page. Post Pages are called item page types because the value of the pageType tag on Post Pages is "item".

A table showing the data matrix of Blogger's item page type.

The following code snippet works only for item page types:

<b:if cond='data:blog.pageType == "item"'>
<!--Item Page-->
</b:if>


Static Page Type


Last year Blogger added the ability to publish content as stand-alone pages. Static page types are identified as "static_page" by the pageType tag.

A table showing the data matrix of Blogger's static page type.

The following code snippet works only for static page types:

<b:if cond='data:blog.pageType == "static_page"'>
<!--Static Page-->
</b:if>


Archive Page Type


Ideally, any link you click from the Blog Archive widget would take you to an archive page type but that's not the way it works. The pageType tag will only return a value of archive for pages whose filename ends in "archive.html". (See also What is an archive filename on Blogger Help.) Most links generated by the Blog Archive widget follow this format. The remainder use query parameters. Any page formatted that way has a pageType value of index.

This affects Blog Archive widgets using the "Hierarchy" style because some of the links it generates are search queries. In general search queries (when the URL is your homepage followed by "search?" or "search/"), return a pageType value of index.

There's a similar problem with the navigation links generated by the Blog widget on archive pages. Instead of linking to other archive pages (pages that end in "archive.html"), they link to search queries. And once again, these search queries are the index page type. Thus, any customizations you have for archive page types are lost by the next page, and your visitors will have an inconsistent experience. This problem affects all three Blog Archive widget styles. Also, the search queries themselves are malformed half the time which leads to posts getting skipped or repeated.

I haven't solved that problem yet but I've been thinking of a workaround. First, only use the "Flat List" and "Dropdown Menu" styles when configuring the Blog Archive Widget. Second, omit navigation links from Archive page types. Third, add another Blog Archive widget (that only appears on archive page types), in place of the navigation links. And finally, modify the widget so it looks like it belongs there.

A table showing the data matrix of Blogger's archive page type.

The following code snippet works only for archive page types:

<b:if cond='data:blog.pageType == "archive"'>
<!--Archive Page-->
</b:if>


Home Page Type


(I usually write homepage as one word but to stay consistent with this document I'm writing it as two words.) The home page is the default URL of your blog. You can find it under Setting > Publishing in the Blogger dashboard. The blog.homepageUrl global tag returns the value of your blog's home page.

A table showing the data matrix of Blogger's home page type.

The following code snippet works only for home page types:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--Homepage-->
</b:if>


Search Page Type


The search page type displays the results of a search performed using Blogger's original built-in search form. (Not to be confused with the Search Box gadget.)

You should know that the built-in search is extremely limited: it only searches from a pool of the most recent posts, older posts are ignored and labels are ignored. In the future I might transition to the search box gadget but I'm still exploring my options.

The blog.searchQuery global tag returns the value of the search query.

A table showing the data matrix of Blogger's search page type.

The following code snippet works only for search page types:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery'>
<!--Search Page-->
</b:if>
</b:if>


Label Page Type


Label Pages are generated by the labels widget. You may only view one label at a time. There is no way to combine multiple labels for viewing, unfortunately. There is a minor bug with the labels widget which you can read more about on the Labels Widget section at blogger2ools. I've also posted a fix for it.

The blog.searchLabel global tag returns the value of the label name.

The RSS feed for a label is formatted as follows:
(home page URL)feeds/posts/default/-/(label name)

A table showing the data matrix of Blogger's label page type.

The following code snippet works only for label page types:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'>
<!--Label Page-->
</b:if>
</b:if>


Index Page Type


By order of elimination we are left with the index page type. As I stated back in the Archive Page Type section when a Blogger page is generated using query parameters the pageType tag returns a value of index. So basically anything that isn't one of the six previously mentioned page types we'll consider to be an index page.

A table showing the data matrix of Blogger's index page type.

The following code snippet works only for index page types:

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery == ""'>
<b:if cond='data:blog.searchLabel == ""'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!--Index Page-->
</b:if>
</b:if>
</b:if>
</b:if>


Putting It All Together


The following code snippet comes directly from our own template here at MY STADY. Use this snippet as a guide for when customizing multiple or even all seven Blogger Page Types. If you're SEO-obsessed this is probably what you're looking for. We use this snippet in the header and Blog Widget portion of our template code. For other sections it's not as important to customize seven different views.

<b:if cond='data:blog.pageType == "archive"'>
<!--Archive Page-->
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery'>
<!--Search Page-->
</b:if>
<b:if cond='data:blog.searchLabel'>
<!--Label Page-->
</b:if>
<b:if cond='data:blog.searchQuery == ""'>
<b:if cond='data:blog.searchLabel == ""'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!--Homepage-->
<b:else/>
<!--Index Page-->
</b:if>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<!--Item Page-->
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<!--Static Page-->
</b:if>


No comments:

Post a Comment