Monday, June 12

Geek

Fun With Templates

Minx is currently parasitic* on the MT database and user interface, but it has a template system all its own.

The pages are now fully templated, with no funny stuff going on, so I'll show you what it looks like:

Page Template
<html><head>
<title>Minx Dynamic Pages for Movable Type</title>
<link rel="stylesheet" href="http://ai.mu.nu/styles-site.css" type="text/css" />
<script language="JavaScript" src="http://blog2.mu.nu/cgi/showhide.js"></script>
</head>
<body>
<div id="container"><div id="center"><div class="content">
<center><b>[blog.name]</b></center><p>
[posts:here]
[magic.pager]
[magic.stats]
</div></div></div>
</body></html>
Very simple. You start with a standard HTML/XHTML page, and the Minx tags are marked with [square brackets]. If you have something in your template that's in square brackets that's not a Minx tag - intentionally or unintentionally - it just gets spat out unchanged. (The divs look a bit odd, but that's because I'm using an unmodified MT3 stylesheet for testing.)

We can see three types of tags here:
A simple tag, [blog.name], which just looks up the matching database field for the currently active blog and inserts it into the page at that point.

A here tag, which is used to simplify block processing. The [posts.here] and [comments.here] are the most common examples of this. Without any parameters** they loop through the posts or comments using the default settings for your blog and the default post/comment template, as appropriate.

The post and comment templates look like this:

Post Template
<h2>[post.newdate]</h2><p>
<b>[post.title]</b><p>
[post.text]  
<p class="posted">
Posted by: [post.authorlink] at
<a href="[post.url]">[post.time]</a>
| <a href="#" onClick="ShowHide('cc[post.id]'); return false;">Comments ([post.comments])</a>
| <a href="http://blog2.mu.nu/cgi/mcomment.cgi?post=[post.id]">Add Comment</a>
| Trackbacks (Suck)
</p>   
<div id="cc[post.id]" style="display:none">
[comments:here]
<p class="posted">
<a href="#" onClick="ShowHide('cc[post.id]'); return false;">Hide Comments</a>
| <a href="http://blog2.mu.nu/cgi/mcomment.cgi?post=[post.id]">Add Comment</a>
</p>   
</div>

Comment Template

<div id="c[comment.id]">[comment.text]</div>
<p class="posted">
Posted by: [comment.authorlink] at [comment.datetime] </p>
Again, we have regular HTML, with just a bunch of simple tags to insert the desired values.

Minx is intended to let you have full control of post and comment selection from the template, overriding the default settings, but those tags are more complex to process and don't work yet.

Finally, we have magic tags. We have two examples of this, the pager and the stats. Magic tags do magic stuff that isn't necessarily available using regular template substitution. The pager lets you go to the next/previous page of the blog (a fancier pager is coming); the stats show performance information (and a fancier version of that is coming too).

The central idea is to make as much of the feature set as possible available without making the templates scary. So you don't need to have a complex nested structure of post tags and comment tags. Just put [posts.here] in your page template (with maybe some optional parameters) and [comments:here] in your post template. Set the appropriate settings on your blog options screen and you're in business!

Next up: A user interface...

Update: Minx now pulls its templates dynamically from the MT database. If you create index templates called mxPage, mxPost, and mxComment, Minx will use them to override the default templates. (Which are loaded dynamically as well.)

You can also include templates using the [include template] tag. The template to be included must also begin with "mx", since Minx only looks at those, but you don't actually specify the "mx" when you use the tag. So, for example, you can create a blogroll template called mxBlogroll and include it with the tag [include blogroll]. (It's not case-sensitive.)

Update: Conditional processing with if and ifn. if and ifn can be used with any simple tag to test whether the value of that tag is "true" or not. A tag is true if it is a non-zero number or a non-empty string, otherwise it is false. Any text between [if tag] and [/if] is included if the value of the tag is true. And any text between [ifn tag] and [/ifn] is included only if the value of the tag is false.

You can't nest if tags, though you can nest an ifn inside an if and vice-versa. If you want to get more complicated than that, for now you'll need to use sub-templates with include.

* Or rather, symbiotic.
** And, um, parameters aren't working yet.

Posted by: Pixy Misa at 11:45 PM | No Comments | Add Comment | Trackbacks (Suck)
Post contains 662 words, total size 5 kb.

Comments are disabled. Post is locked.
49kb generated in CPU 0.0171, elapsed 0.4196 seconds.
54 queries taking 0.4125 seconds, 325 records returned.
Powered by Minx 1.1.6c-pink.