Getting back to our series on better blogging, on this one I make the bold contention (ducking tomatoes) that all (well most) weblog software packages create archives the wrong way. It is not that they cannot do it better, but for the most part, the out of the blox templates build archives the lazy way– just tossing old blog entries into one large, never ending scrolling sack.
What am I blabbing about?
Just about every blog software I have seen has nicely built systems for creating archives by date of previous writings. They organize them into links by month, day, etc. Some, like MovableType, allow user defined categories, so old entries can be grouped by any hierarchy.
But what happens, and what is wrong (in this dog’s opinion) is that the definition of an “archive” is just one long entry appended after another. If you write a lot, or create more than 40 articles in a category, it becomes almost a useless overweight to find old content that takes long to download (all pictures come with it too). It ends up being one of those big anvils that always skirts the Roadrunner and plops the Coyote (I was always more of a Wile E. Coyote fan myself, but that is another story).
But here is where it gets interesting blog heads- you do not have to accept it that way, you can roll up your sleeves, and modify your archive templates to do what makes more sense to me- publish a list of previous posts by title and abstract, with links to the full shebang.
In this edition, I aim to show you not only how to weave this magic in MovableType, but also in Blogger where I recently managed to achieve the same feat. I have to give credit to the Tweezer’s Edge, a blog where I noticed this first– if you can build a better archive, I think it makes you stand out from the crowd that is still limited to the default templates.
So let’s begin first with MovableType. You can use this approach for any of its archive templates. If you look at them they have something like:
<MTEntries> <$MTEntryTrackbackData$> <MTDateHeader> <h2 class="date"><$MTEntryDate format="%x"$></h2> </MTDateHeader> <div class="blogbody"> <a name="<$MTEntryID pad="1"$>"></a> <h3 class="title"><$MTEntryTitle$></h3> <$MTEntryBody$> : : bunch of stuff skipped here : </MTEntries>
This may require some understanding of MT Templates but not really. The important thing is that the tags <span style="color:#009"><MTEntries></span>... <span style="color:#009"></MTEntries></span> is what’s known as a “container”. This means it will cycle through all of the MT entries you ever created that match the context for the template.
Huh?
On your main index, it means it cycles through the 7 most recent entries (default setting). On an monthly archive page, it cycles through all the entries that were created in that month. On a category archive page, it cycles through… all the entries tagged with the category. It does this and formats it according to the stuff that is in between– all the items like <$MTEntryTitle$> are an MT template insert, so it would stick in the Entry Title for every pass through the cycle.
So the problem with the default MT archive templates is that they shove in all the content, plus the comments, trackback, etc, like it was first published. That is fine for the individual entry archive, which is the URL created just for each blog post.
All you need to do is to whip the template into shape and have it list things on the archives in a more compact format. So first wipe out everything inside the <span style="color:#009"><MTEntries></span>... <span style="color:#009"></MTEntries></span> tags and replace it with something like:
<MTEntries> <$MTEntryTrackbackData$> <p> <a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></strong> (<$MTEntryDate format="%B %e, %Y %I:%M %p"$>)<br /> <$MTEntryBody words="50"$>... <a href="<$MTEntryPermalink$>">more</a> -»<br /> link: <$MTEntryPermalink$><br /> <MTEntryIfAllowComments> | <a href="<$MTCGIPath$>nice-mt-comm.pl?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a> </MTEntryIfAllowComments> <MTEntryIfAllowPings> | <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack (<$MTEntryTrackbackCount$>)</a> </MTEntryIfAllowPings> </p> </MTEntries>
This will still cycle through all your archive entries, but for each one, it will display a title of the post (linked to its permanent URL), plus the first 50 words from the entry- that is what <$MTEntryBody words="50"$> does for us, plus another “more” link to the same entry, and the summary of its link URL, comment and trackback count. Of course, the formatting can vary, but the main part is just echoing a snippet of the entry (or not at all if you have gloriously descriptive titles).
This is an approximate format I have used on most sites, including the CDB (see the “Using MT archives” and a variant for the monthly archives) as well as the new LTA web site (see a topical category archive or a complete site archive).
The point is to take control of your archives rather than just dumping them into one giant pile.
“Okay, that is great for MovableType template geeks, but what about us regular folks on Blogger? Are we stuck with the big archvies?”
Heck no! I’ve got a template for you. Blogger is a whole different ball game- they have a simpler structure of templates. Actually, Blogger uses only one template to generate its three page types:
- Main Page
- Individual Post Entries
- Date Archives
The key to working with the three page types is recognizing the way to mark content to only appear on the page types above that you like using the Blogger “conditional” tags. For example, anything templated inside a set of <MainPage>...</MainPage> tags will only appear on the main page. Likewise there are the <ArchivePage>...</ArchivePage> and <MainOrArchivePage>...</MainOrArchivePage> tags to help separate template content.
And like the <MTEntries>...</MTEntries> container tags for MT, the equivalent <Blogger>...</Blogger> will cycle through all blog entries according to the type of page it is used on.
Like MovableType, the default out of the box Blogger template makes its date archives the “heave the whole thing into a pile” approach. But also like MovableType, as we did above, we can re-engineer the Blogger templates, and bend them to our whim (well some of our whims).
What follows is what I learned from some tinkering, but Blogger’s Help does provide a write up (that I used) “How can I list my archives by title?”.
A downside of Blogger templates is that the nicely designed style sheets they use are hard coded into the template, and there is not as much standardization of CSS divs and class names used on different templates. Therefore, the examples below may need to be dissected to meet the needs of your own Blogger template.
I experimented doing these changes on the (unfinished) Blogger BlogShop – but first here are the final products of my work on the templates to achieve better archives:
- Main Page
- Sample individual Item Page
- Sample of my modified monthly Archive Page
Number three uses some Blogger supplied logic to display only the titles and dates of items for August 2004, but uses “show”/”hide” links to toggle open the content. That is not necessary, just another experiment.
I provide at the end of this dissertation a copy of this template.
The first thing you should always do when you muck around with templates, is to copy your current working template to a text file on your computer and save it. If you make a tragic mistake, at least you have your self a backup. Do not skip this step!
The next thing is to identify all the content in your template used to mark up the Main page. It should be the content starting with the first <Blogger> tag and go just past the template code where it adds comments to your front page entries (it is in the template even if you turn comments off).
<Blogger>
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
:
:
</BlogItemCommentsEnabled>
<p style="padding-left:20px;">
<a href="<$BlogURL$>"><< Home</a>
</p>
</div>
<!-- End #comments -->
</div>
<!-- End .post -->
What you want to do is to copy this and replace it with:
<MainPage>
<Blogger>
;
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
:
:
</BlogItemCommentsEnabled>
<p style="padding-left:20px;">
<a href="<$BlogURL$>"><< Home</a>
</p>
</div>
<!-- End #comments -->
</div>
<!-- End .post -->
</Blogger>
</MainPage>
What we’ve done is to extract just the portion of the template used to display the entries on the MainPage. None of this will be used on an Archive or an Item Page. Are you still with me?
Next, you need to markup the content that will be used instead of this on an Item Page- you will likely find this already marked in your current template- the relevant top/bottom parts of mine look like:
<ItemPage>
<Blogger>
<BlogDateHeader>
<h2 class="date-header"><$BlogDateHeaderDate$></h2>
</BlogDateHeader>
<!-- Begin .post -->
:
:
<p class="comment-data">
<$BlogItemCreate$>
</p>
</BlogItemCommentsEnabled>
<p style="padding-left:20px;">
<a href="<$BlogURL$>"><< Home</a>
</p>
</div>
<!-- End #comments -->
</Blogger>
</ItemPage>
This is more or less similar to what is used on the front page, except for some additional template code for comments, and a link back at the bottom. Note for and Item Page, the Blogger container has only one item- the single entry.
Instead of the two portions above, and Archive Page will use this code:
<ArchivePage>
<h2 class="post-title"><$BlogPageTitle$> Archives</h2>
<div class="post">
<ul>
<Blogger>
<li>
<BlogItemTitle>
<strong><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a> (<$BlogItemDateTime$>)</strong><br />
</BlogItemTitle>
<!-- begin code for show/hide links
delete if you just want to list titles and links to items -->
<span class="posthidden" id="<$BlogItemNumber$>1"><$BlogItemBody$><br />
</span>
<hr /> <em><a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
[+/-] show/hide this post</a></em>
<!-- end code for show/hide links -->
<br /><br /></li>
</Blogger>
</ul>
</div>
</ArchivePage>
If you prefer a simpler archive with just the titles for all posts in the month and a link to the full entry, you can delete the code marked above (to use the show/hide links, you also need to do some extra coding for your style sheet and to add a JavaScript function — learn how from Blogger).
There was one interesting note- for a heading I am using
<h2 class="post-title"><$BlogPageTitle$> Archives</h2>
which I thought might not work since the Blogger Help states:
<$BlogPageTitle$> – Gives your published blog pages smart titles (“Blog Name” for the index page, “Blog Name: Date Info” for archive pages, and “Blog Name: Post Title” for Post Pages). This tag should only be used in a Template’s <head>, in between <title> and </title>.
WHy should the tag be limited to the <title>...</title>? But it seems to be working fine here in my Archives page to create a title that includes the Date of the archive- without it, and if I listened blindly to the documentation, I would only have a generic title like “archives”. Experimenting with this costs nothing.
The rest of the template can be copied as this produces the content for your side bar.
The last step is to republish, cross your fingers. If you are like me, it is going to take a few iterations to get it right, and again, the necessary changes may depend on which template you are starting with. Also, it goes a lot faster if you do this with a new or a young blog, as the rebuilding takes a whole for blogs with lots of entries. You may start by just rebuilding your Indexes until you feel you are close to done.
Again, the reference for achieving better archives with Blogger is “How can I list my archives by title?”
And you can look at the entire template I use for the BloggerShop site:
http://cogdogblog.com/alan/code/blogger-template-1.tx
My own approach on CogDogBlog for category archives in MovableType goes a step further and lists the 20 most recent entry abstracts (like above) on the default category archive, and links/lists the “rest” on another page– this was described in Splitting Up the MT Archives.
See for example the Recent Archives for the “web bad dog” category which provides a link then to the rest in the category.
That was a lot to chew on! But getting a handle and experimenting with your templates is one of the entries into truly mastering your own blog domain 😉
Excellent post. I have always been unhappy with the really long monthly archive output in MT. Your snippet works great.
steve
Thanks for the great post; I used it to remodel my Category archives.