Node:Step 3, Next:, Previous:Step 2, Up:Tutorial


Step 3: Making links

Hyperlinks can be easily added using the XSLT stylesheet. However, linking to other pages is complicated by the fact that the target files might have a different name to the source files. This problem is solved by a filename mapping XPath function provided by Transbuild. To use it, you will first need to declare the function's namespace http://hoylen.com/ns/xmlns/2002/transbuild/function in the XSL stylesheet. And since you don't want this namespace declaration to appear in the generated XHTML, add it's prefix to the exclude-result-prefix XSLT attribute. 

<xsl:stylesheet version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:TBF="http://hoylen.com/ns/xmlns/2002/transbuild/function"
	exclude-result-prefixes="TBF"
	>
...

Transbuild provides an XPath function called href which converts a source tree name into its counterpart in the target tree. Its argument can be a name relative to the file being processed, or an absolute name. In this context, "absolute" means treating the source tree directory as the root directory (not the file system's root directory). It works with directory names as well as filenames, but most of the time we'll be using it with filenames. We will refer to the function as TBF:href so it won't be confused with other hrefs. Here's the modification we made to the XSLT script to add a link to the site's home page. 

<xsl:template match="article">
  <body>
    <div class="nav-top">
      <ul>
        <li><a href="{TBF:href('/index.xml')}">Home</a></li>
      </ul>
    </div>

    <h1><xsl:value-of select="title"/></h1>

    <div class="main">
      <xsl:apply-templates/>
    </div>
  </body>
</xsl:template>

The mapping function will give the correct filename based on the name translation described in the build script. In this case, the function will take index.xml and return index.html. If you changed the rule's name translation in the build script (for example, to have a target-suffix of .htm), the function will ensure everything still works.

The home link was placed in a unordered list. This is so the list of links will be accessible to non-CSS aware browsers. Later on, there will be more links in the list. Using CSS, the list will not look like a list on the Web page.

We'll also make the following changes to create a link to the CSS file. We know the file name of the CSS file is not going to be changed, but still use the TBF:href function because it has an additional function besides just name translation. 

<xsl:template match="/">
  <html xml:lang="en" lang="en">
    <xsl:comment>Do not edit: generated by Transbuild</xsl:comment>
    <head>
      <meta http-equiv="Content-Type"
            content="text/xhtml; charset=UTF-8"/>
      <title>Step 3: <xsl:value-of select="article/title"/></title>
      <style type="text/css">
        <xsl:text>@import url(</xsl:text>
        <xsl:value-of select="TBF:href('/site.css')"/>
        <xsl:text>);</xsl:text>
      </style>

    </head>
    <xsl:apply-templates/>
  </html>
</xsl:template>

The result produced by the TBF:href function is actually in the form of a relative path from the target file being generated. For example, it will produce a link to site.css in the ~target~/index.html file; a link to ../site.css in the ~target~/about/index.html file; and a link to ../../site.css in the ~target~/hardware/omp/index.html file. This is very handy, because the links will work when the generated files are browsed directly from the file system. If they were all hard-coded as /site.css, the files will have to be uploaded to a Web server before you could test them.

The pages produced by the build script tb-step03.xml now uses the CSS stylesheet, and they all have a link to the site's homepage. However, it is still not a usable Web site because there are no other navigation links - that is the subject of the next step.