Inline Template - js-lib-com/wood GitHub Wiki

It is allowed to include a component that on its turn implements a template, in which case we have three files: parent page where component is included, component itself and component template.

In our example, article page includes the child component with standard aggregation syntax wood:compo="compo/section". Page does not care that compo/section component uses a template.

Note that page includes the compo/section component that will be replaced by compo/article template with compo/section component inside.

  • page/article/article.htm
<!-- parent component -->
<body xmlns:wood="js-lib.com/wood">
	<h1>Page Title</h1>
	<!-- child reference element -->
	<section wood:compo="compo/section"></section>
</body>

Component has the component path compo/section and uses template fragment syntax to bind template editable, note wood:template="compo/article#section" operator.

  • compo/section/section.htm
<!-- child component for page/article component -->
<!-- content component for compo/article template -->
<section wood:template="compo/article#section" xmlns:wood="js-lib.com/wood">
	<h2>Section Title</h2>
	<p>Section content...</p>
</article>

Template has the template path compo/article and declares an editable named section. This editable is referenced by content component compo/section.

  • compo/article/article.htm
<!-- template component -->
<article xmlns:wood="js-lib.com/wood">
	<h2>Article Title</h2>
	<p>Article description.</p>
	<section wood:editable="section"></section>
</article>

Page resulted from build.

<body>
	<h1>Page Title</h1>
	<article>
		<h2>Article Title</h2>
		<p>Article description.</p>
		<section>
			<h2>Section Title</h2>
			<p>Section content...</p>
		</section>
	</article>
</body>

Inline Syntax

There is a simplified syntax that uses only two files: aggregating page and the component template. In this case template content is declared inline, into page file and built layout will replace inline template declaration from page.

Page layout includes template and defines its content inline. Template syntax is the same as standard template but it applies to a descendant element, not on layout root, see Template. This example template has a single editable element; for multiple editables see Multiple Editables.

  • page/article/article.htm
<!-- parent component -->
<body xmlns:wood="js-lib.com/wood">
	<h1>Page Title</h1>
	<!-- inline template -->
	<article wood:template="compo/article#section">
		<!-- inline content -->
		<h2>Section Title</h2>
		<p>Section content...</p>
	</article>
	<footer>copyright (c) 2022</footer>
</body>

Layout file for inline template uses the same syntax as with standard template: it has a root element and one or more editable elements.

  • compo/article/article.htm
<!-- template component -->
<article xmlns:wood="js-lib.com/wood">
	<h2>Article Title</h2>
	<p>Article description.</p>
	<!-- editable element -->
	<section wood:editable="section"></section>
</article>

Build tool gets the page component and detect there is an inline template because it discover wood:template operator on a descendant element, not on layout root. From wood:template operator extracts template path and loads it then inject inline content from page component into template. Finally replace inline template element from page component with resolved template.

Resulting built page is the same as in explicit syntax.

<body>
	<h1>Page Title</h1>
	<article>
		<h2>Article Title</h2>
		<p>Article description.</p>
		<section>
			<h2>Section Title</h2>
			<p>Section content...</p>
		</section>
	</article>
	<footer>copyright (c) 2022</footer>
</body>

Multiple Editables

For template with multiple editable elements is pretty much the same just replace template fragment syntax - wood:template="template/path#editable-name", with separated wood:template="template/path" operator for template path and one wood:content="editable-name" for each template editable.

  • page/article/article.htm
<!-- page component -->
<body xmlns:wood="js-lib.com/wood">
	<h1>Page Title</h1>
	<!-- inline template -->
	<article wood:template="compo/article">
		<!-- inline content for first editable -->
		<section wood:content="section1">
			<h2>Section1 Title</h2>
			<p>Section1 content...</p>
		</section>	
		<!-- inline content for second editable -->
		<section wood:content="section2">
			<h2>Section2 Title</h2>
			<p>Section2 content...</p>
		</section>	
	</article>
</body>

Template with two editable elements named section1, respective section2.

  • compo/article/article.htm
<!-- template component -->
<article xmlns:wood="js-lib.com/wood">
	<h2>Article Title</h2>
	<p>Article description.</p>
	<!-- first editable element -->
	<section wood:editable="section1"></section>
	<!-- second editable element -->
	<section wood:editable="section2"></section>
</article>

Resulting layout will include both editable elements.

<body>
	<h1>Page Title</h1>
	<article>
		<h2>Article Title</h2>
		<p>Article description.</p>
		<section>
			<h2>Section1 Title</h2>
			<p>Section1 content...</p>
		</section>
		<section>
			<h2>Section2 Title</h2>
			<p>Section2 content...</p>
		</section>
	</article>
</body>

Last updated 9/6/2022.

⚠️ **GitHub.com Fallback** ⚠️