Last update: 6/20/2012; 2:30:41 PM.

Editing World Outline templates

Intro permalink

There's a simple and powerful templating system built into the World Outline software.

Templates can be edited on your desktop, without any special access to the server.

This document shows, step-by-step, how to do that.

I've done a screencast that covers the demo in this tutorial.

It's all done with outlines permalink

This is a repeating theme in the worldoutline software. Almost everything is an outline.

Templates are no exception.

What's in a template? permalink

The easiest way to show you is to show you the templates that are used to render your outlines.

1. To do so, copy this URL to the clipboard.

2. Bring the OPML Editor to the front.

3. Choose Open URL from the File menu, and paste the URL.

The outline should open. Screen shot.

At the top level of the outline are types, and underneath each type is the template.

The first item under the type might be a rules section. These govern how the outline is rendered, separate from the HTML part of the template which is in the second line. There's a tutorial on Rules that you can read, and I'm sure we'll have a screencast for rules at some point down the line. If you used MORE in the 80s you'll find them quite familiar. It's the same feature, except instead of being in a big dialog, they're in an outline.

After the rules section comes the HTML. It's just HTML with macros which are delimited by angle-brackets and percent signs, like this: <%title%>. They work just like macros in any other dynamic rendering environment, like PHP or early UserLand web environments.

An aside, you can include the macros in your text. For example, if I include the example above I'll get the title of this document, "Editing World Outline templates."

Before the template is applied, the worldoutline software prepares a big table with values that can be used by templates. Those are the macros. Then the templates determine how those values are used to build a web page.

Many of the macros have a lot of weight behind them. For example, the systemStyles macro brings in the Bootstrap Toolkit, so all pages have all the features of that excellent web framework available to them. That makes the worldoutline by far the most powerful Bootstrap environment today. We also have pre-defined styles for outlines, and other standard elements. However because it's all CSS from top to bottom, it can be overridden by your own styles. Or, you can just leave out the systemStyles macro, then there's nothing to override. A lot of time went into the design of the templating system, to be sure that it would have the right combination of raw power, ease of use and flexibility for the designer. We want the worldoutline to be a great designer's toolkit.

The best way to learn about this stuff is to read, and puzzle and scratch your head, use a search engine to look on the worknotes site, for clues about how this stuff was developed, and ask questions when none of the other methods get you the answer. You can also download the source for worldOutline.root, if you're a programmer. It has all the answers you could ever want. But you don't have to do any of this. You can just copy the existing templates, and learn by experimenting.

Editing a template permalink

Suppose you want to make some changes to how blogpost types render.

1. In the OPML Editor, choose My Outlines from the World Outline sub-menu of the Outliner menu. Your Roots page should open in your browser.

2. At the bottom of the page, click the New Root button. Click on the Edit icon in the right colum to open it in the OPML Editor.

3. Click the Title button and change the title to Templates. Save.

4. Copy the blogpost template from the outline you opened in the previous section and paste it at the top level of the outline. Save. You've now overridden the default template for the blogpost type. Any changes you make to this template will appear in all your blogpost pages on this server. However, it will not effect the blogpost pages of any other users.

5. To prove this, put a little text in the footer of the template, save it and view a blogpost page. You should see the text show up there.

That's it permalink

Believe me, we tried a lot of ways of doing templates before arriving at this method.

blog comments powered by Disqus

Last udpate: 6/20/2012; 2:30:41 PM.