Home | Index

r3 User Guide

Prev — Generating Files
Specializing Templates — Next

Working With Templates

Inheritance enables (potentially hundreds of) targets to share domains and eliminates duplication of effort for pages with minor variations.

Templates can be copied or moved to a specialized location and then customized. This enables you to control generated output. Template customization is accomplished using a set of XML-like tags. The most commonly used tags are <r3:include> for adding a sub-template, and <r3:trans> for identifying text to be translated. For more information about r3 markup, see the r3 Reference Guide.

You bracket terms or strings that you want to appear in a different language with the r3 markup <r3:trans> </r3:trans> in the source templates. During file generation, r3 notes these specially marked items and inserts the appropriate translation from the dictionary file.

Creating and Editing Templates

  1. We already created a template using the r3 target create command, in the section “Targets”. Use your favorite editor to edit your template (our example uses vim as the editor).

    $ vim $R3HOME/templates/generic_product/generic_intl/index.html/index.html.ros
    [Note] Note

    If you've exported the environment variable $VISUAL or $EDITOR, you can accomplish the same thing with the r3 template edit command.

    $ r3 template edit generic_product/generic_intl/index.html index.html.ros

    However you decide to open the file, you'll see it consists of a single comment:

    <!-- autogenerated default template: index.html.ros -->

  2. Delete the comment and enter the following HTML:

    <html>
<head></head>
<body>
<table width="100%" border="2">
<tr>
<th colspan="2">Container: <r3:trans>Container</r3:trans></th>
</tr>
<tr>
<td colspan="2"><r3:include path="header.ros" /></td>
</tr>
<tr>
<td width="30%"><r3:include path="navigation.ros" /></td>
<td width="70%"><r3:include path="content.ros" /></td>
</tr>
</table>
</body>
</html>

  3. Note the three <r3:include /> directives. Following our example's structure, index.html.ros corresponds to the "container" component. You need to create the other templates too. Let's do that now, using the r3 template create command.

    $ r3 template create generic_product/generic_intl/index.html header.ros
template navigation.ros is created at /tmp/r3/templates/generic_product/generic_intl/index.html/header.ros

$ r3 template create generic_product/generic_intl/index.html navigation.ros
template navigation.ros is created at /tmp/r3/templates/generic_product/generic_intl/index.html/navigation.ros

$ r3 template create generic_product/generic_intl/index.html content.ros
template content.ros is created at /tmp/r3/templates/generic_product/generic_intl/index.html/content.ros

$ r3 template create generic_product/generic_intl/index.html core_branding.ros
template content.ros is created at /tmp/r3/templates/generic_product/generic_intl/index.html/core_branding.ros

$ r3 template create generic_product/generic_intl/index.html site_branding.ros
template content.ros is created at /tmp/r3/templates/generic_product/generic_intl/index.html/site_branding.ros

    Now you can open these files to edit them. Let's start with header.ros:

    $ r3 template edit generic_product/generic_intl/index.html header.ros

    Remove the autogenerated comment, and edit the content to look like this:

    <table width="100%" border="2">
<tr>
<th colspan=2>Header: <r3:trans>Header</r3:trans></th>
<tr>
<td><r3:include path="core_branding.ros" /></td>
<td><r3:include path="site_branding.ros" /></td>
</tr>
</table>

  4. Likewise, edit the following files with these changes:

    • navigation.ros ($R3HOME/templates/generic_product/generic_intl/index.html/navigation.ros):

      Navigation: <r3:trans>Navigation</r3:trans>

    • content.ros ($R3HOME/templates/generic_product/generic_intl/index.html/content.ros):

      Content

    • core branding.ros $R3HOME/templates/generic_product/generic_intl/index.html/core_branding.ros:

      Core Branding: <r3:trans>Core Branding</r3:trans>

    • site_branding.ros $R3HOME/templates/generic_product/generic_intl/index.html/site_branding.ros:

      Site Branding: <r3:trans>Site Branding</r3:trans>

  5. Now generate all targets:

    $ r3 generate -a
generating cars/ca
generating cars/fr
generating cars/generic_intl
generating cars/jp
generating cars/us
generating cookery/ca
generating cookery/fr
generating cookery/generic_intl
generating cookery/jp
generating cookery/us
generating generic_product/ca
generating generic_product/fr
generating generic_product/generic_intl
generating generic_product/jp
generating generic_product/us
generating wine/ca
generating wine/fr
generating wine/generic_intl
generating wine/jp
generating wine/us

  6. Examine one of the generated files:

    $ cat $R3HOME/htdocs/cookery/us/index.html
<html>
<head></head>
<body>
<table width="100%" border="2">
<tr>
<th colspan="2">Container: Container</th>
</tr>
<tr>
<td colspan="2"><table width="100%" border="2">
<tr>
<th colspan=2>Header: Header</th>
<tr>
<td>Core Branding: Core Branding
</td>
<td>Site Branding: Site Branding
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30%">Navigation: Navigation
</td>
<td width="70%">Content
</td>
</tr>
</table>
</body>
</html>

    When displayed in your browser, the file looks like this:

    All of the targets currently look same because they all use the same templates, and no translation has been done yet.