Template Partials - Level-2/Transphporm GitHub Wiki

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!

Partials in their own files

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>

Extracting partials from complete files

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.

Unprecedented flexibility with partials

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; }
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️