Blog Design Solutions (2006)

B L O G D E S I G N S O L U T I O N S

And that’s the main template done. Easy wasn’t it? You can see this template by opening up main.tmpl in the MT-Templates folder that accompanies this chapter. Save the template and then rebuild it. When you go to your blog homepage you should now see your slick new design rather than the slightly tired looking default layout (see Figure 3-18).

Figure 3-18. Main template

Master archive index template

If you look at the list of templates you will see one called Master archive index, which is the main page for navigating through older posts. The default template will display a list of every post you’ve ever made on the site. This is fine for a new site, but after you’ve been posting for awhile, the list can get very long and unwieldy. Instead of displaying every post, I’ll display a list of months. Clicking one of these months will take you to a page containing links to every post made that month. To create this template, I can reuse most of the main index template by removing the intro and latest areas, as well as the content in the secondary content area. The main content area on the archive index page will look something like this:

106

M O VA B L E T Y P E

<div id="mainContent">
<h2>Monthly Archives</h2>
<ul id="monthlyArchiveList">
<li><a href="#">March 2005 (4)</a></li>
<li><a href="#">Feb 2005 (8)</a></li>
<li><a href="#">Jan 2005 (6)</a></li>
</ul>
</div><!-- close mainContent -->	3
Similar to the MTEntries container tag, you can use the MTArchiveList container tag to
display a list of all the default archive pages. In this case, I only want to display monthly
archives so I define it by using the archive_type attribute. You can then display a link to
the individual archive page using MTArchiveLink and display the number of posts in that
archive using MTArchiveCount.
<h2>Monthly Archives</h2>
<ul id="monthlyArchiveList">
<MTArchiveList archive_type="Monthly" lastn="5">
<li>
<a href=" <$MTArchiveLink$>"><$MTArchiveTitl$e>
(<$MTArchiveCount$>)</a>
</li>
</MTArchiveList>
</ul>
When you post an entry, Movable Type allows you to assign one or more categories to that
entry. As such, it would be really useful to display a list of entries by category as well as by
date. This can be done in a similar way by substituting archive_type="Monthly" with
archiveType="Category".
<h2>Category Archives</h2>
<ul id="categoryArchiveList">
<MTArchiveList archive_type="Category" lastn="5">
<li>
<a href=" <$MTArchiveLink$>"><$MTArchiveTitle$>
(<$MTArchiveCount$>)</a>
</li>
</MTArchiveList>
</ul>

107

B L O G D E S I G N S O L U T I O N S

You have to define the categories yourself from the categories menu, so add some categories now, and then assign categories to your test entries. If you have been following along, your new master archive index should now look like master-archive.tmpl. Replace the old archive template code with your new template code. Before you save and rebuild, you’ll notice a field called output file which is the name and location of the file this archive will output. By default, the file is called archive.html and is placed at the root of your blog. However I find that it makes more sense to have this file as the index file of the archive directory, so change the field to read archive/index.html. Now you can access your blog archive by clicking the archive link on the homepage. It should look something like Figure 3-19.

Figure 3-19. Master archive index template

Category and date-based archives

If you look at the main templates page, you’ll see that it is split into sections. The section called archives is the location for storing the templates for the different types of archives. The category and date-based templates will be very similar because I want them both to display a list of all the entries in that archive.

<ul id="archiveList"> <MTEntries>

<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>

108

M O VA B L E T Y P E

</MTEntries>

</ul>

With the date archive I want to add a little navigation widget at the top of the main content section to allow people to move forward and backward through each month. MTArchivePrevious is a container tag that displays the contents only if there is a previous archive. Any archive tags within this container tag will display info from the previous archive. Likewise, MTArchiveNext does the same thing for the next archive in the sequence.

<p	id="archiveNav">	3
<MTArchivePrevious>
<a	href="<$MTArchiveLink$>">« <$MTArchiveTitle$></a> |
</MTArchivePrevious>
<a	href="<$MTBlogURL$>">Main</a>
<MTArchiveNext>
|	<a href="<$MTArchiveLink$>"><$MTArchiveTitle$> »</a>
</MTArchiveNext>
</p>

Unfortunately, Movable Type doesn’t give you the ability to navigate through category-based archives in the same way. Luckily, there is a plug-in called “Supplemental Category Tags” that does the trick. As I mentioned previously, Six Apart has a plug-in directory that contains many useful plug-ins. The directory is located at www.sixapart.com/pronet/plugins/, and you can download this particular plug-in from www.sixapart.com/pronet/plugins/ plugin/supplemental_ca.html or http://bradchoate.com/weblog/2002/10/31/mtcatx.

Installing a Movable Type plug-in is very straightforward. First, you need to download and unpack the plug-in. This particular one comprises two main files: catx.pl and catx.pm. If you navigate to the Movable Type directory on your web server, you’ll see a directory called plugins. Place catx.pl in this directory. Still in the Movable Type home directory, you’ll see another directory called extlib. Create a new directory here called bradchoate (the author of this plug-in) and place catx.pm in it. It’s as simple as that.

This plug-in makes a couple of new template tags available, including MTCategoryPrevious and MTCategoryNext. You’ll notice that they look very similar to the tags used in the previous example, except that they relate to categories instead of archives. Using a similar method to the archive widget, it’s now possible to create a category navigation widget, allowing you to navigate between categories.

<p id="archiveNav"> <MTCategoryPrevious>

<a href="<$MTCategoryArchiveLink$>">« <$MTCategoryLabel$></a> | </MTCategoryPrevious>

<a href="<$MTBlogURL$>">Main</a> <MTCategoryNext>

| <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$> »</a> </MTCategoryNext>

</p>

109

B L O G D E S I G N S O L U T I O N S

If you save the Category template, rebuild the site and then navigate to a category archive, you should see a screen similar to Figure 3-20.

Figure 3-20. Category archive

Most of the main templates are out of the way. The individual archive template works in a similar way to the main index template, except that it shows only one entry instead of six. The default template uses quite a bit of logic, mostly revolving around comments. For my version of this template, I essentially just copied this information from the default template. Most of the default special templates relate to comments as well and are easy to customize. If you want to have a look at these templates, they can all be found in the MT-Templates folder you downloaded for this chapter. After these templates are updated by pasting in the new code, saving the changes and rebuilding the file, your custom blog will be finished.

110

M O VA B L E T Y P E

Summary

Hopefully, this chapter has given you a brief overview of how to create a custom blog design from scratch and then turn that design into a Movable Type–powered blog. The whole project took a couple of weekends, so it’s a little more involved than using a hosted solution. However if you enjoy messing around with design and code, it’s a lot more fun. Also you’ll end up with your own distinct-looking blog rather than a cookie-cutter design.

I tried to keep the templates as simple as possible and hope they will provide you with a

starting point for more customization and experimentation. Looking at other people’s 3 blogs should give you plenty of inspiration, as should looking at the plug-in directory.

Some of the plug-ins you’ll definitely want to look at include MT-Blacklist for comment spam control and Markdown for easier entry markup.

Quite a few bloggers publish a list of interesting links as well as their main posts. You can do this quite easily by setting up a very basic second blog and then using a plug-in such as Multiblog or Otherblog to bring those links into your main blog. If you’re looking for a project to test out your new Movable Type skills, this is a good place to start.

111

4 E X P R E S S I O N E N G I N E

by Simon Collison

B L O G D E S I G N S O L U T I O N S

What this chapter covers:

Obtaining and installing ExpressionEngine (EE)

Introducing ExpressionEngine and how it works

Designing and implementing a custom blog using ExpressionEngine

Way back in early 2004, the creators of an alternative blogging tool—a robust but limited young fellow called pMachine—introduced a new heavyweight with minimal fanfare but maximum power.

That new force was ExpressionEngine (EE). Easily out-punching its rivals; those smart enough to realize its potential swiftly embraced this feature-rich system. Regrettably, those at the top of the blogging pyramid were slow to switch over to EE, so it still feels like a “well-kept secret.”

If given an inch, I’d take a mile and spread my evangelical pitch across four volumes, extolling the almost unlimited virtues of EE over any other system. I’d explain that with a little manipulation, EE can be the only Content Management System (CMS) you’d ever need; how it can be bent and twisted to power complex magazine sites, music sites, and relational databases; and how it can even be configured to wake you up and make you tea in the morning. I will tell you that EE stands out as the most flexible, modular, and malleable publishing system available today. Whether creating a personal blog or building a ridiculously complex client website, EE can be manipulated to suit your needs. Use it as your base for any future projects and you’ll never have to say “No” ever again.

With the capability to post from mobile phones or email, unlimited levels of membership and associated privileges, photo galleries and plug-in forums, tick-of-a-button data modeling and much, much more, EE really is becoming the tool of choice for web developers who need the stability of a robust and secure publishing platform coupled with the ability to extend it beyond their wildest dreams.

As it stands, I’ve been given only half an inch, so with this chapter you’ll be concerning yourself with the basics of EE. You’ll learn some pretty cool stuff, though. After you gain an understanding of how EE works and how you can manipulate its simple tag system and templates to personalize your structure, you’ll learn how to mold the Cascading Style Sheets (CSS) to place your design stamp on the blog. You might only be building a blog— but what a blog it will be! They’ll come from miles around to marvel at your ticked-off links (what?), drool over your smart comments (eh?), and swear as you stop them from posting spam comments linking your blog to their online casinos and penile enhancement drugs. Figure 4-1 shows what your site will look like.

114

E X P R E S S I O N E N G I N E

4

Figure 4-1. How the finished design will look

Design brief

Your brief is to build a blog that sits well on any browser or platform, is accessible to all users, and has at its foundation a well-oiled publishing engine that is easily managed and maintained, and ensures that you won’t be facing a painful rebuild of any kind in the future.

If it comes as standard, I won’t go into it. Thus, there are no lengthy discussions about DOCTYPE, CSS column layout, or the dos and don’ts of <hn> tag use. Instead, you’ll take my Logical Blocks templates as a base, leaving much of the layout structure intact.

Your blog will be clean, neat, and solid. Information will be carefully spaced and placed into sensible hierarchies. Image use will be mostly subtle, making use of CSS background images that are easily replaced. The template you build will create a leaf theme, using green and yellow images alongside tweaked CSS to make your site look fresh and zesty. Yum!

115