Work With Templates

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

In this tutorial, you'll learn some tips to work with the XSLT templates that are installed with Tópico.

Quick Introduction to XSLT

In it' simplest form, XSLT markup appears as well formed HTML markup with some special template elements to process the source files. This approach provides a powerful mechanism to separate content from its presentation, making semantic markup easier to publish as HTML or other XML dialects.

In essence, XSLT allows information designers to layout XML content into a common context, which is the web page or publication. You can then have thousands of pages that all conform to the same output template, making for far better usability and maintainability of your web document collection.

To get the most out of Tópico, you will be required to learn just enough XSLT to adapt the sample templates to your own need.

Just like the stylesheet, Tópico templates contain everything needed by each publishing package. At this time, most of the existing packages are simple template/stylesheet variations on the same theme.

For most of the publishing packages, the basic page layout looks like this:

It is suggested that you get acquainted with the XSLT standard before modifying the sample templates.

General layout of the default Tópico collection templates

The nested blocks below illustrate how most of the default templates that are shipping with Tópico are organized. A short description of the different page elements follows.

backgroud

page

header

wrapper

content

left (optional)

 

center (main content)

 

right (optional)

 

footer

Background
The background might be used to add a background image or other effect to the rendered page. It also centers the page element with the automatic horizontal margin option (margin-left:auto; margin-right:auto;).

Page
The page element is used as the main page container, which is typically centered a with a fixed with. The default template and stylesheet are actually nemed after this configuration (centered_fixed_width.xsl and centered_fixed_width.css).

Header
The header typically contains the following items:

  • The main menu
  • The breadcrumb (which could be anywhere on the page, just move it in the template)
  • The navigation (previous, next) links
  • The login / user information on a dynamic web site.

Wrapper
The wrapper wraps the actual content element. It might be used to add different graphical effects. The wrapper element can also contain other layout elements, especially when working with multicolumn layouts.

Content
The content element wraps the actual topic content, the content you're editing through Tópico. The content can sometime be devided between a table row. Although it does not score hight on the semantic scale, the pragmatic one must sometime be considered also.

Footer
The footer typically contains the following items:

  • The copyright notice
  • Links to different information (legal, support, contact, ...)
  • The navigation (previous, next) links in cerain cases
  • The developer's link

A closer look at templates

To open the xsl template that is used for the publication, navigate to the Collection tab and then:

  1. Click on the small e button that is at the left of the Template dropdown list;
  2. From the pop up menu, select the template that's displayed in the drop down;
  3. If asked to select a program to open the file, select Notepad;
  4. The template is ready to be edited.

What's in a template?

The first thing you will find inside the <xsl:stylesheet> element is the import directive:

XSLT
  1. <xsl:import href="import.xsl"/>

This line imports common parameters into the main template.

Then you will find the main template, the one that creates the outer shell of the HTML file.

XSLT
<xsl:template match="/">
 <html>
  <head>
   <title>
    <xsl:value-of select="//xhtml:title"/>
   </title>
   <meta name="generator" content="{$generator}"/>
   <meta name="description" content="{$description}"/>
   <meta name="keywords" content="{$keywords}"/>
   ...
  </head>
  <body>
   <div id="background">
    <div id="page">
     <!--xxxxxxxxxxxxxxxxx -->
     <!-- header -->
     <div id="header">
     ...
     </div>
     <div id="wrapper">
      ...
     </div>
     <!--xxxxxxxxxxxxxxxxx -->
     <!-- footer -->
     <div id="footer">
      ...
     </div>
    </div>
   </div>
  </body>
 </html>
</xsl:template>

This main template than calls smaller templates for different page elements that are included in the publication.

XSLT
<xsl:if test="$breadcrumb">
 <xsl:call-template name="breadcrumb"/>
</xsl:if>

The above markup calls the breadcrumb template if the breadcrumb parameter exists.

The breadcrumb template then processes the parameter that was sent by Tópico. The breadcrumb parameter is sent as a node set. This template is found in import.xsl.

XSLT
<xsl:template name="breadcrumb">
 <xsl:for-each select="$breadcrumb">
  <xsl:copy-of select="."/>
 </xsl:for-each>
</xsl:template>

THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO

Back
56 / 194