I'm just sharing a tool i developed that might be helpful to others.
It's a code-free, client-side templating tool, that will enable an HTML dev to display a collection of repeated items on a webpage with identical HTML, but different content.
"Template" meaning there's only one copy of the HTML, shared by all the items in the collection. To change the layout of all the items, you only have to edit the template.
Code-free meaning, you don't need to write or know Javascript. Everything is done in HTML, including the template, container, and data.
The content is separate from the HTML, so you can update the data without touching the HTML.
It's best for small projects with few items that don't change too often, where you can't or don't want to do server-side programming.
Feel free to ask questions here or on github.
https://github.com/johnaweiss/HTML-Micro-Templating
Here's a simple example.
It's a code-free, client-side templating tool, that will enable an HTML dev to display a collection of repeated items on a webpage with identical HTML, but different content.
"Template" meaning there's only one copy of the HTML, shared by all the items in the collection. To change the layout of all the items, you only have to edit the template.
Code-free meaning, you don't need to write or know Javascript. Everything is done in HTML, including the template, container, and data.
The content is separate from the HTML, so you can update the data without touching the HTML.
It's best for small projects with few items that don't change too often, where you can't or don't want to do server-side programming.
Feel free to ask questions here or on github.
https://github.com/johnaweiss/HTML-Micro-Templating
Here's a simple example.
- The container puts the collection on the webpage.
- The template contains double-bracketed placeholders, which get loaded with data.
- The data is stored in a hidden area of the webpage
Code:
<body>
<!-- CONTAINER -->
<span mt-records="EEs" mt-template="engineer" class="engineers"></span>
</body>
<!-- TEMPLATE -->
<template id="engineer">
<span>
<a target="_blank" href="http://[[LINK]]">
<img src="[[IMAGE]]" alt="">
<div class="caption">[[NAME]]</div>
</a>
</span>
</template>
<!-- DATA -->
<mt-records hidden id="EEs">
NAME
LINK
IMAGE
Benervive Guper
https://www.Guper.com
Guper.jpg
Phoey Ramstung
https://Ramstung.com
Ramstung.jpg
Sam Smith
https://samsmith.com
sam.jpg
</mt-records>