@sanvyx/template
v2.0.0
Published
Fills HTML template with data
Downloads
6
Readme
fillTemplate
Fills template with page data.
Arguments
page - object containing page data. Data can contain next fields: template, title, html, css, js.
page.template - absolute path to custom template file. Template could be any html file with <head> and <body> tags present.
page.title - should be a string. It injected in the template header as <title> tag.
page.body - should be a string. It injected in the template body.
page.css - can be either a string, an object, array of strings, array of objects.
- If it's a string it injected in the template header as href value of <link> tag.
- If it's an object it should contain path field, which is used as value of href and could contain optional field:
- to - define where to inject <style> tag. Possible values of the to field are head and body
- If it's array of strings or array of objects it injects multiple <link> tags.
page.js can be either a string, an object, array of strings or array of objects.
- If it's a string it injected in the template body as src value of <style> tag.
- If it's an object it should contain path field, which is used as value of src and could contain optional fields:
- to - define where to inject <style> tag. Possible values of the to field are head and body
- load - determins loading style. Possible values are defer and async
- If it's array of strings or array of objects it injects multiple <script> tags.
Returns
Returns template filled with page data.
/* default template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body></body>
</html>
*/
const page = {
title: 'My title',
css: './main.css',
js: [
{
path: './counter.js',
to: 'head',
load: 'async'
},
{
path: './main.js',
to: 'body',
load: 'defer'
}
],
html: '<h1>Hello World</h1>',
}
const result = fillTemplate(page);
/* result
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My title</title>
<link rel="stylesheet" href="./main.css">
<script src="./counter.js" async></script>
</head>
<body>
<h1>Hello World</h1>
<script src="./main.js" defer></script>
</body>
</html>
*/