Wednesday, October 29, 2008
Last Friday we announced the new release that adds an Organize tab to the editing screen. The Organize tab and corresponding Include Scripts are kind of like Legos. You can assemble them in lots of different ways to create lots of different results. This is part one of a two-part post to provide step-by-step instructions for some neat things you can do with these new features.
Before going further, there are a few concepts you need to understand. Don't worry... these are easy!
First, the function of the Organize tab is to relate pages to one-another in parent/child relationships. A page can be listed under another page by making it a child of that page. Likewise, a page can list other pages underneath it by being a parent to those pages. Every page can have multiple parents and children. Children pages can be ordered in a specific sequence by dragging and dropping the list of child pages. See the support wiki for more details.
Second, include scripts are built-in pages that can be included in any page content using the [[include:PageName]] tag. Include scripts start with an underscore, and can have arguments following the script name included in the double brackets. For example, to display a linked list of pages that are children of the Menu page, you would type this into an EditMe page: [[include:_ListNav root=Menu]]. As you can see the name of this script is _ListNav and we're setting the "root" argument to "Menu" to list children of the Menu page. If there are no children of the Menu page, you won't see anything at all.
Third, and finally, you should re-apply your site's Skin if you created your site (or last applied your site's Skin) before October 27, 2008. If you have customized your skin and don't want to reapply, post a question to the Questions forum and we'll help you make the changes manually. If you don't do this, things will still basically work, but they won't always look right. See the note under the Skin Updates section of the release notes for an important note about reapplying the links in Acton and Newton skins.
The rest of this post contains tutorials that combine the use of parent/child relationships with script includes to add dynamic navigation and display features to your site.
Note: If you created your site after October 27th 2008, your site already has this feature built in. This section provides instructions for adding this feature to sites created before this feature was added.
One of the include scripts provided in this release is a powerful tree menu called _TreeNav. This script provides a linked list of child pages for a specified page. Clicking one of the links will show that page and expand the tree to show children of the clicked page. As you browse your site, the tree menu will find the current page (if it exists) in the page hierarchy and expand the appropriate levels to show it and its children.
There are a few steps you need to follow in order to add this feature to your site:
1. Add the following to your site's Menu page:
[[include:_TreeNav root=Menu]]]
This will display the tree menu in the Menu area as you navigate through your site. If your Menu page doesn't have any child pages specified yet, you won't see anything. See Editing the Menu if you're not sure how to edit your site's Menu page.
That's really it. The rest of these steps will help you populate the menu with some links.
2. Add some child pages to your Menu page. Do this by editing your site's Menu page and switching to the Organize tab. To add the Home page (a sensible thing to do) type Home in the box labeled "Add a child page" and click the Add button. You can add a few pages and then click the Save Child Pages button to make it stick. Note that you can also drag and drop the child pages to change their order.
3. To see the multi-level nature of this menu, you'll want to add children to some of the pages you've added as children to the Menu page. Click one of the >> links next to a page you've added as a child to the Menu page. This will let you add child pages to that page to create a hierarchy. You can create as many levels as you like. Don't forget to click Save Child Pages when you've changed the list of Child pages.
4. Optionally, you can add the Menu page as a parent to your site's Default page. This will cause every new page created on the site to be displayed in the tree menu by default. You can change where the new page goes afterward by editing it's parent and child relationships, but this step will ensure that every new page is linked to in the navigation. Just edit your site's "Default" page and add Menu as a parent page on the Organize tab. See Page Templates for more about the Default page.
When you view your site, you'll now see a menu indicating the hierarchy you've created. Click around to get a feel for how it works, and add a new test page to see if it shows up in the menu. The _TreeNav script include supports lots of options and is highly configurable. For example, you can limit the hierarchy it shows to a certain number of levels. See the documentation for details.
You can display a linked list of pages that are children of the current page by simply typing the following into the editor:
[[include:_ListNav]]
If you want to include a list of pages under some other page, you can use the root argument to specify which one:
[[include:_ListNav root=SomeOtherPage]]
Depending on how you choose to use child page relationships, this could display a list of related pages, external links, or cross references.
Say you want one of the links in your _TreeNav or _ListNav output to go to some other web site. You can do this by creating a page on your site and setting the Redirect page property to the full URL you want to send users to (e.g. http://www.editme.com/Home). Add this page as a child where appropriate, and you'll have an external link included in the navigation. You could also use this to include special EditMe URLs, like _Recent (Recent Changes) or _Index (Page Index).
The _ListRecent script include allows you to easily list pages that were recently added or modifed. Just drop the following in your menu. You'll probably want to preface it with a heading like, "Recent Changes". The limit parameter controls how many links will be displayed and can be changed to suit your tastes.
[[include:_ListRecent limit=5]]
Keep an eye on this blog next week for part two of this post, which will cover the date-based features and using category pages to create things like blogs and event lists on your site.
