ExSite Manual: Templating Tips

Here are some suggestions for getting maximum benefit out of the ExSite templating system:

  1. Edit templates in plain-text mode

    The WYSIWYG editor is convenient for regular content updates, but it does not give the direct control over the HTML that you need for template detailing. Furthermore, many details of templates (including meta-tags, CSS and Javascript references, and missing content objects) are invisible in WYSIWYG mode. For these reasons, templating work is often most effectively done in plain-text mode.

  2. Don't forget your meta tags

    Include the following standard meta tags in your template header/preamble, so that ExSite can make use of them if requested:

    <title><!--$title--></title>
    <meta name="description" content="<!--$description-->">
    <meta name="keywords" content="<!--$keywords-->">
    

    The comment-like tags allow ExSite to substitute relevant page-specific data into the meta tags when the page is actually constructed. This is especially important if Search Engine Optimization is important to you.

  3. Template your local links

    You can simply hard-code your local links, eg.

    <a href="index.html">Home</a>
    

    But you'll gain a little more flexibility if you re-code them using the templating notation:

    <a href="{{index.html}}">Home</a>
    

    This notation allows you to change the settings of the target page (eg. static to dynamic, public to members-only, etc.) without having to update your template to modify the target URL appropriately.

  4. Consider using dummy content placeholders

    Say you want to use a 2-column layout on some pages, but only a 1-column layout on others. You could set this up using two different templates, one for each layout; or you could just use a single template, with two main content areas (we call them body and rightsidebar in this example):

    <table><tr><td valign="top">
      <!--content(body)-->
    </td><td valign="top">
      <!--content(rightsidebar)-->
    </td></tr></table>
    

    If a given page defines a rightsidebar object, the layout will appear to be two-column. If not, then the right column is empty and gets squashed by the main body, causing the layout to appear one-column.

    If you have a template that defaults to two-column layout by defining content for the rightsidebar, then to revert to a single-column layout, all you need to do is define a rightsidebar object in the page, but leave it empty/blank. Your local copy will be used, causing the default rightsidebar to disappear.

    Similar methods can be used for a variety of other optional layout objects, such as banners, footers, mastheads, and so on.

  5. Use a Menu plug-in for automatic menu construction

    Automatic menu building is very handy when you add and remove pages on a regular basis. The examples below refer to the SimpleMenu plug-in, but similar results can be achieved using alternative menu plug-ins.

    Insert a vertically-formatted (eg. side bar) menu:

    <!--&SimpleMenu(vertical)-->
    

    Insert a horizontally-formatted (eg. top bar) menu:

    <!--&SimpleMenu(horizontal)-->
    

    The default formatting is quite plain, but SimpleMenu allows you to dress up your menus with arbitrary HTML wrappers and spacers. To dress up your vertical menus, define the following content objects in your templates:

    SimpleMenuTop
    This HTML is placed in front of all menu items.
    SimpleMenuMid
    This HTML is placed between each primary menu item.
    SimpleMenuBot
    This HTML is placed after all menu items.

    You can also dress up your horizontal menus by using the same content object names, but with "H" appended (ie. SimpleMenuTopH, SimpleMenuMidH, SimpleMenuBotH).

    These HTML snippets can contain full CMS mark-up as well, which allows you to insert graphics into your menu layout.

  6. Set your template's "Static or Dynamic" setting appropriately

    "Dynamic" is slow for page rendering, but can sometimes be handy if you are tinkering with your templates or stylesheets on-line and don't want to have to republish everything after each minor change.

    "Static" is much faster, and is highly recommended for production templates.

  7. Develop your graphic designs off-line

    Use your favourite HTML editor, web design package, or hand-code your HTML and images, until you are happy with the results. This will generally be more efficient for repeated tinkering than the slower, high-latency network connections on the Web.

    When your design is ready, use the "Import Template" function to load it up into ExSite.

  8. Include CSS instructions for special plug-in content

    Many dynamic content plug-ins produce simple, generic HTML and rely on stylesheets to dress it up. You can implement these special CSS classes in your web design to spiff up your dynamically-generated content.

    You can also use the generic ExSite stylesheets as a short cut, since they predefine some styles that may be adequate for your purposes. For example:

    <link REL="stylesheet" TYPE="text/css" HREF="/_ExSite/css/ExSite.css">
    

    Some plug-ins have their own generic stylesheets that you can also utilize in a similar way, eg.:

    <link REL="stylesheet" TYPE="text/css" HREF="/_Modules/Zine/zine.css">
    

    Alternatively, you could import such files into your template, and modify them appropriately.