-
Notifications
You must be signed in to change notification settings - Fork 27
Template Partials
In Transphporm, anything can be a partial. You can extract any element from any template and use it as a partial and place it inside any other element. This level of flexibility simply isn't possible with other template engines!
You can store a template partial in its own file. For example, sidebar.xml
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>Then pull it into layout.xml:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>And pull sidebar.xml into the nav element in layout.xml using the following TSS:
nav {content: template('sidebar.xml');Which will generate:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Alternatively, you can extract any element from any file and use it as a partial. For example consider two complete XML files.
For example, you might want two variants of the navigation. These can be stored in their own XML file, sidebar.xml:
<?xml version="1.0"?>
<template>
<ul class="standard">
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<ul class="admin">
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/admin">Adminstration</a></li>
<li><a href="/admin/logout">Log out</a></li>
</ul>
</template>
Here we have the admin navigation and the standard user navigation stored in a file as a partial. It's possible to pull in one of the two <ul> elements using a CSS selector as the second argument to the template function. To pull in the admin menu:
nav { content: template('sidebar.xml', 'ul.admin'); }Or the standard menu:
nav { content: template('sidebar.xml', 'ul.standard'); }This is particularly useful when using conditional logic:
nav:data[isAdmin=true] {content: template('sidebar.xml', 'ul.admin'); }
nav:data[isAdmin=false] {content: template('sidebar.xml', 'ul.standard'); }Which will include a different block from sidebar.xml depending on the value of $data->isAdmin.
Anything can be used as partial. You can use element {content: template(filename, targetElement); } to select any targetElement from any file and insert it into any matched element on the page. This is not possible in traditional template engine as anywhere you need to include a partial you must include code inside the template.
You could create an XML "include" capability using the {content: template(filename, targetElement); } syntax, as shown in the following example.
In your layout XML file:
<div>
<include href="foo.xml" />
</div>In your TSS file:
include {content: template(attr(href)); content-mode: replace; }