Category: Clocktower Clients

Posted on

* Movable Type Brain Dump

Tips and tricks I wish I had known when I started using Movable Type.

Understanding (Page-Level) Templates

Movable Type is a template-driven weblog management application. There are about a dozen page-level templates (Index Templates, Archive-Related Templates, and Miscellaneous Templates) that output pages of code (HTML or other code). There are also Template Modules that output chunks of code (HTML or other code). Template Modules are typically included in page-level templates so that standard elements (headers, footers, etc.) can be included in multiple places in page-level templates.

Movable Type does an OK job at explaining all of this, but not such a good job of providing examples. In the table below, I’ve included all of my current templates and sample output files for each. If I had this table when I was starting out (for a demo website, for example), it would have been easier to understand what each template does. As is the case with nearly all software, all of this is easier to demonstrate than describe.

Name Template File Output File
Index Templates
*Main Index index-main.html index.html
*Master Archive Index archives.html archives.html
RSD rsd.xml rsd.xml
*RSS 1.0 Index index.rdf index.rdf
RSS 2.0 Index index.xml index.xml
*Stylesheet styles-site.css styles-site.css
Archive-Related Templates
*Category Archive archives-category.html example
*Date-Based Archive archives-date.html example
*Individual Entry Archive archives-individual.html example
*RSS 1.0 Category-Specific archives-category.rdf example
*RSS 2.0 Category-Specific archives-category.xml example
Miscellaneous Templates
*Comment Listing Template comment-listing.html example
*Comment Preview Template comment-preview.html example
Comment Error Template comment-error.html no example
*Trackback Listing Template trackback-listing.html example
Uploaded Image Popup Template uploaded-image-popup.html no example

*Indicates that I’ve modified the default settings.

Understanding File/Directory Name Templates

The templates for configuring filenames and directory names (which is not what Movable Type calls them) are not located with the rest of the templates. Instead, they are in the “Weblog Config” section (click the “Weblog Config” button from the editing menu) under “Archiving.” Movable Type calls these “Archive File Templates,” but what they really do is control how filenames and directory names are created for various archives. Here’s how mine are configured:

Archive Type Template Archive File Template (On One Line)
Individual Individual Entry Archive <$MTEntryDate format=””$>
<MTIfEmpty var=”EntryKeywords”>
<$MTEntryID pad=”1″$>.html</MTIfEmpty>
<MTIfNotEmpty var=”EntryKeywords”>
<$MTEntryKeywords$></MTIfNotEmpty>
Monthly Date-Based Archive <$MTArchiveDate format=”%Y/%m/index.html”$>
Category Category Archive <$MTArchiveCategory dirify=”1″$>/index.html
Category RSS 1.0 Category-Specific <$MTArchiveCategory dirify=”1″$>/index.rdf
Category RSS 2.0 Category-Specific <$MTArchiveCategory dirify=”1″$>/index.xml

I have configured my filename/directory name templates to output non-numeric filenames when I include a (better) filename in the “Keywords” field. For example, I included “movable-type-brain-dump.html” in the Keyword field for this entry, so the URL is “https://www.giantpeople.com/427.html”. See Cruft-free URLs in Movable Type [dive into mark] for more information.

I don’t use the “Daily” and “Weekly” archive types, which are also available.

Understanding Template Modules (Chunks of Code)

Template Modules are chunks of code that are included in other templates. Template Modules can also be included in other template modules. For example, the following table shows which Template Modules are included in the page-based templates on my website.

my-meta
my-javascript
my-header
my-subscribe Template-specific stuff goes here … my-in-print
my-toptech … and here. my-toplaw
my-categories my-comments
(for archive + comment templates)		 my-blogroll
my-archives my-links
(for archive + TrackBack templates)		 my-subscribe
my-about my-post-a-comment
(for archive + comment + TrackBack templates)		 my-copyright

To be accurate, I have a module called “my-left-menu” that includes the Template Modules shown in the left column, and a module called “my-right-menu” that includes the Template Modules shown in the right column. Again, since these things are easier to demonstrate than describe, here are the contents of both.

my-left-menu:

<!-- begin my-left-menu -->
<div id="left-menu">
<$MTInclude module="my-subscribe"$>
<$MTInclude module="my-toptech"$>
<$MTInclude module="my-categories"$>
<$MTInclude module="my-archives"$>
<$MTInclude module="my-about"$>
</div id="left-menu">
<!-- end my-left-menu -->

my-right-menu:

<!-- begin my-right-menu -->
<div id="right-menu">
<$MTInclude module="my-in-print"$>
<$MTInclude module="my-toplaw"$>
<$MTInclude module="my-blogroll"$>
<$MTInclude module="my-recent-entries"$>
<$MTInclude module="my-copyright"$>
</div id="right-menu">
<!-- end my-right-menu -->

The center section changes depending on the template. As do parts of the header section, such as the title of each page. But for the most part, each page on the site includes the same elements (and, as a result, looks the same). So if I want to change my meta tags (for example), I simply change the “my-meta” Template Module, rebuild the site, and the changes appear on every page on my website.

Making Archive Pages Look Like Your Home Page

By default, Movable Type includes navigation elements on the home page only.

To fix this, I added the navigational elements (i.e. the left and right menus) from the Main Index Template to each of the Archive-Related Templates. I also display comments and Trackback entries (which I prefer to call “Links”) inline with the body of each entry (as opposed to hidden in popup windows, which is the default).

I prefer having the navigational elements on each page of my site. This gives my site a consistent look-and-feel. For example, the “Recent Entries” Template Module (more on this below) appears on each page of the site and shows the recent entries as of the date of the entry. So my very first post shows only one recent entry.

Making Comments and Trackback Pages Look Like Your Home Page (And Tripling Your Content In Google)

By default, Movable Type includes only a few elements in the Comments Listing Template and the Trackback Listing Template. An unintended side-effect of this is that there are a lot of less-than-useful (to be generous) entries in Google’s database. By making the Comments Listing Template and the Trackback Listing Template mirror the Main Index Template, I can now have more meaningful data associated with these URLs. Put another way, this can (theoretically) triple the content you have in Google. For example:

  • My Main Index Template includes the entry, comments, and Trackbacks.
  • My Comments Listing Template includes the entry and comments.
  • My Trackback Listing Template includes the entry and Trackbacks.

Using CSS Style Sheets To Create A Three-Column Layout

Movable Type comes with default templates and default CSS style sheets. My website is based on the default “Trendy” style sheet. It took me a while to get used to CSS, but now I can change the look-and-feel of my entire site by simply changing one file: the CSS style sheet (styles-site.css). Movable Style is a website that has ready-to-use style sheets for the default Movable Type templates. See also scriptygoddess’s description of the difference between “class” and “ID” in CSS style sheets.

I changed the names of the default styles because I found the names confusing. One of the default styles is called “blog,” but the entire site is a blog, not just one style. So I renamed “blog” to “content” and divided it into subparts with the style name “content-chunk.” Makes more sense to me. The downside is that I can’t use Movable Style’s style sheets out of the box; I’d have to customize them. But, then again, that’s what this article is about: how to customize Movable Type.

My weblog uses a three-column layout, and the columns each resize — while retaining their relative size — when you resize the browser window. There are many tutorials on the web that describe how to do this:

I prefer — and use — the method described by saila.com. It is, by far, the most elegant of the above solutions. Here are snippets of the relevant sections from my style sheet:

#content {
background:#FFFFFF;
left:20%;
margin:2px 2px 2px 2px;
min-width:360px;
position:absolute;
top:100px;
width:60%;
}

#left-menu {
background:#FFFFFF;
color:#333333;
left:0;
margin:0px 2px 2px 2px;
padding-left:2px;
position:absolute;
top:102px;
width:19%;
}

#right-menu {
background:#FFFFFF;
color:#333333;
left:80%;
margin:2px 2px 2px 2px;
padding-left:2px;
position:absolute;
top:102px;
width:19%;
}

Designing For All/Older Browsers

In all of your page-based templates, you should place the body elements first, then the left and right menu elements. This makes the website render properly in older or text-based browsers (i.e. it puts the body of the post before the menus). Also, many browsers (and some aggregators) do not properly render the <blockquote> tag, so I generally include quotes around blockquoted text to make it clear that it is quoted text.

Using Bookmarklets To Post Content

A Bookmarklet is a chunk of JavaScript code that allows you to quickly and easily post to your Movable Type weblog. Bookmarklets are an under-documented and under-appreciated feature of Movable Type. You can create a Bookmarklet by going to the Movable Type main menu and selecting “Set Up Bookmarklets.” Or you can just copy, edit, and bookmark this Bookmarklet.

Then, add the Bookmarklet as a bookmark to your Personal Toolbar in Mozilla (or the equivalent in whatever browser you use). In order to use the Bookmarklet to post content to your site, go to the URL of the page you want to post, select the text you want to include, and then click on the Bookmarklet bookmark.

Creating A Separate CGI Directory

I have installed Movable Type CGI in a directory (erikjheels.com/mt/mt-bin) that is separate from my other CGI scripts (erikjheels.com/cgi-bin/). This way, I can temporarily disable Movable Type by password-protecting the MT CGI directory without interfering with my other CGI scripts, such as my search engine.

References

* Fine Print Proudly powered by WordPress