XSLT template guidelines
For now not so much as guidelines - as well as an (advanced) transform example. You are looking at the template of this very site.
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns="http://www.w3.org/1999/xhtml"
exclude-result-prefixes="xhtml"
version="1.0">
<xsl:output method="xhtml"
omit-xml-declaration="yes"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
indent="yes"
encoding="utf-8"/>
<!-- $topItmId is the default item named 'home'
It's submenu is shown for modules that have no related items (searchsite)
When itm_id = -1 no contents nodes are passed, so this cannot be used to show
a default content item!
-->
<xsl:variable name="topItmId">
<xsl:choose>
<xsl:when test="/root/@itmId = -1" >
<xsl:value-of select="/root/descendant::item[@name='home']/@id"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="/root/@itmId"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- We need to know whether there is a sidebar, to set the right classnames -->
<xsl:variable name="hasSidebar">
<xsl:choose>
<xsl:when test="//item[@id=/root/@itmId]/@hassidebar">
hassidebar
</xsl:when>
<xsl:otherwise>
nosidebar
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<!-- html ============================================================= -->
<xsl:template match="/root">
<html>
<xsl:comment>
sidebar: <xsl:value-of select="//item[@id=/root/@itmId]/@hassidebar"/>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Website: Trilobiet 2008
Powered by Trilobiet X-Ace
XML/XSLT driven Application Content Embedding
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</xsl:comment>
<head>
<!-- title must contain something otherwise it becomes a self closing tag
preventing the rest of the page from rendering in IE -->
<title>Trilobiet . <xsl:value-of select="/root/title/text()"/></title>
<meta name="Description" content="{/root/description/text()}" />
<meta name="Keywords" content="{/root/@title} Trilobiet Internet applicaties websites applications MVC Rotterdam Delfshaven Paul Osseweijer Richard Osseweyer " />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link type="text/css" rel="stylesheet" href="_resources/styles/reset.css"/>
<link type="text/css" media="screen" rel="stylesheet" href="_resources/styles/layout.css"/>
<link type="text/css" media="screen" rel="stylesheet" href="_resources/styles/head.css.cfm"/>
<link type="text/css" rel="stylesheet" href="_resources/styles/content.css"/>
<link type="text/css" rel="stylesheet" href="_resources/styles/styles.css"/>
<link type="text/css" media="print" rel="stylesheet" href="_resources/styles/print.css"/>
<script type="text/javascript" src="_resources/js/jquery-1.4.1.min.js"> </script>
<script type="text/javascript" src="_resources/js/jquery.defuscate.js"> </script>
<link rel="shortcut icon" href="_resources/img_struct/trilobiet.ico"/>
<script type="text/javascript">
// e-mail defuscator
$(document).ready(function(){
$('.email').defuscate();
});
</script>
</head>
<body class="{/root/@itmName}">
<xsl:comment>parent: <xsl:value-of select="$topItmId"/></xsl:comment>
<div id="layToolbar"><xsl:comment>for future use</xsl:comment></div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
top section containing logo
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="layTop" class="maincol">
<a href="index.cfm"><img src="_resources/img_struct/logo.png" alt="logo"/></a>
<h3 class="textOnly">Trilobiet Internetdiensten</h3>
<hr class="textOnly"/>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
main menu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="layHead">
<div class="maincol">
<h4 class="textOnly">menu</h4>
<ul id="menu-1">
<xsl:apply-templates select="/root/item" mode="topmenu" />
</ul>
<hr class="textOnly"/>
<div class="hdrpic"> </div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
content area
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="layMain">
<div id="breadcrumb">
<xsl:comment>kruimelpad</xsl:comment>
<xsl:apply-templates select="//item[@id=/root/@itmId]" mode="breadcrumb" />
</div>
<div id="menu-2">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
menu left containing submenu of current context
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<h4 class="textOnly">inhoud</h4>
<ul>
<!-- menu is built up for highest minus 1 ancestor (home, nieuws, forum, publicaties, contact etc.)
of current item (page requested: /root/@itmId) (highest ancestor is 'site'). -->
<xsl:apply-templates select="//item[@id=$topItmId]/ancestor-or-self::item[count(ancestor::item)=1]/item" />
</ul>
<hr class="textOnly"/>
</div>
<!-- ~~~~~~~~~~~~~~~~~ sidebar ~~~~~~~~~~~~~~~~~~ -->
<xsl:if test="//item[@id=/root/@itmId]/@hassidebar">
<div id="sidebar">
<hr class="textOnly"/>
<xsl:if test="//item/@sidebar">
<xsl:apply-templates select="//item[@sidebar and @publish=1]" mode="sidebar"/>
</xsl:if>
</div>
</xsl:if>
<div id="content" class="{$hasSidebar}">
<!-- current content -->
<xsl:apply-templates select="//item[@id=/root/@itmId]/contents"/>
<!-- display featured summaries on homepage (@homepage and @spotlight) -->
<xsl:if test="/root/@itmName='home'">
<xsl:apply-templates select="//item[@spotlight and @publish=1]" mode="spotlight"/>
<xsl:apply-templates select="//item[@homepage and @publish=1]" mode="homepage"/>
</xsl:if>
<br/><br/>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~ foot ~~~~~~~~~~~~~~~~~~ -->
<div id="layFoot">
<hr class="textOnly"/>
<div class="maincol">
<div class="col3">
<!-- menu -->
<h3>Inhoud</h3>
<ul>
<xsl:apply-templates select="/root/item" mode="topmenu" />
</ul>
</div>
<div class="col3">
<!-- address -->
<h3>Contact</h3>
<address onclick="document.location.href='index.cfm?itm_name=contact'">
Trilobiet Internetdiensten<br />
Duyststraat 117<br />
3023 EC Rotterdam<br />
Tel +010-2760070<br />
<span class="email">info(-apestaartje-)trilobiet.nl</span><br/>
</address>
<!-- validation buttons -->
<p style="margin-top:1em;">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue"
alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
</p>
</div>
<div class="col3">
<!-- search site -->
<h3>Zoeken</h3>
<div>
<form action="index.cfm?fuseaction=searchsite.search" method="post">
<div style="margin:0;padding:0">
<input type="text" name="searchterm" value="zoekterm" onfocus="this.value='';this.style.color='black'" style="color:#999"/>
<button type="submit">zoek</button>
</div>
</form>
<div style="text-align:right; margin-top: 2em;">
engine: Trilobiet x-Ace 4.3<br/>CM Systems<br/>
<img src="_resources/img_struct/xace.png" alt="x-Ace 4.3"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</xsl:template>
<!-- top menu bar ===================================================== -->
<xsl:template match="/root/item" mode="topmenu">
<xsl:for-each select="item[@menuitem and @publish=1]">
<li><a href="{@namehref}"><xsl:value-of select="@name" /></a></li>
</xsl:for-each>
<xsl:if test="/root/@loggedin = 1" >
<li><a href="index.cfm?fuseaction=cms.struct">cms</a></li>
</xsl:if>
</xsl:template>
<!-- sub menu left ==================================================== -->
<xsl:template match="item">
<xsl:if test="@menuitem and @publish=1">
<li>
<a href="{@namehref}"><xsl:value-of select="@caption"/></a>
<!-- go into template expandsubmenu if this item has children
and the requested item root/@itmid is a descendant of this item -->
<xsl:if test="./item[@menuitem] and descendant-or-self::item[@id=/root/@itmId]">
<ul><xsl:apply-templates select="item" mode="expandsubmenu"/></ul>
</xsl:if>
</li>
</xsl:if>
</xsl:template>
<!-- expand sub menu left ==================================================== -->
<xsl:template match="item" mode="expandsubmenu">
<xsl:if test="@menuitem and @publish=1">
<li>
<a href="{@namehref}"><xsl:value-of select="@caption"/></a>
<xsl:if test="./item[@menuitem]">
<ul><xsl:apply-templates select="item" mode="expandsubmenu" /></ul>
</xsl:if>
</li>
</xsl:if>
</xsl:template>
<!-- current item (and optional descendants) ========================== -->
<xsl:template match="item[@id=/root/@itmId]/contents">
<!-- cms buttons -->
<xsl:if test="/root/@loggedin = 1" >
<div class="cmsfunctions">
<a href="{/root/@index}?fuseaction=cms.edit&itm_id={../@id}">edit</a>
</div>
</xsl:if>
<!-- contents -->
<!--<h1><xsl:value-of select="../@caption"/></h1>-->
<div><xsl:value-of select="text()" disable-output-escaping="yes"/></div>
<!-- item's direct children -->
<xsl:if test="../item and ../@displayChildren != 0" >
<div class="children">
<xsl:for-each select="../item[@publish=1]">
<!-- summary -->
<xsl:if test="../@displayChildren = 1">
<a href="{@namehref}"><xsl:value-of select="@caption"/></a><br/>
</xsl:if>
<xsl:if test="../@displayChildren = 2 and string-length(./summary/text())">
<div class="summary">
<hr/>
<h3><xsl:value-of select="@caption"/></h3>
<xsl:value-of select="./summary/text()" disable-output-escaping="yes"/>
<a class="more" href="{@namehref}">meer weten!</a>
</div>
</xsl:if>
<!-- contents -->
<xsl:if test="../@displayChildren > 2 and string-length(./contents/text())" >
<div class="content">
<hr/>
<xsl:value-of select="./contents/text()" disable-output-escaping="yes"/>
</div>
</xsl:if>
</xsl:for-each>
 
</div>
</xsl:if>
</xsl:template>
<!-- featured spotlight items ======================================================= -->
<xsl:template match="//item[@spotlight and @publish=1]" mode="spotlight">
<div class="box spotlight" onclick="document.location.href=$('a.more',this).attr('href')">
<div class="date"><xsl:value-of select="@createDate"/></div>
<h3><xsl:value-of select="@caption"/></h3>
<div>
<xsl:value-of select="summary/text()" disable-output-escaping="yes"/>
</div>
<div style="font-weight:bold;padding-top:0">
<a class="more" href="{@namehref}">meer</a>
</div>
</div>
</xsl:template>
<!-- sidebar items ==================================================== -->
<xsl:template match="//item[@sidebar and @publish=1]" mode="sidebar">
<div class="box" onclick="document.location.href=$('a.more',this).attr('href')">
<h3><xsl:value-of select="@caption"/></h3>
<div class="boxbody">
<div style="padding-bottom:0">
<xsl:value-of select="summary/text()" disable-output-escaping="yes"/>
</div>
<div style="text-align:right;padding-top:0">
<a class="more" href="{@namehref}">meer</a>
</div>
</div>
<div class="boxfoot"> </div>
</div>
</xsl:template>
<!-- breadcrumb ======================================================= -->
<xsl:template match="//item[@id=/root/@itmId]" mode="breadcrumb">
<a href="index.cfm">trilobiet </a>
<xsl:for-each select="ancestor-or-self::item">
<xsl:if test="@id != 1"><!-- don't show top item (site) -->
<xsl:text>. </xsl:text>
<a href="{@namehref}"><xsl:value-of select="@caption"/></a>
<xsl:text> </xsl:text>
</xsl:if>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
