Your own template

Before this we have used the templates that is installed with the server. Now you are showing how to make and your your own.

What is a template

A template is a scaffold that takes care of the basic of the html document so you can focus on the central code of your application. You do not need to use them, but if you do it will save you a lot of work.

<!doctype html>
<html lang="en-GB">
<head>
  <title>Hello world</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
</head>
<body>
<h1>Hello world</h1>
</body>
</html>

Example of a hello world html document as basic as it get. You normally would load css and javascript libraries here. Usually a specific version. If you have to change one, you would need to change all your doucments.

<!doctype html>
<html lang="en-GB">
<head>
  <title>[{page.name}]</title>
  <meta charset="utf-8">
</head>
<body>
<!-- Start of body imported from page -->
[%body%]
<!-- End of body imported from page -->
</body>
</html>

Made our document to a template. The only thing you see here is that we add a [%body%] tag, a [{page.name}] livetext and some comments. The important part here is the [%body%] tag. This is where the page (the html document you locate with a url) copied into. The comment is to make it easy to find the html copied in when using view page source in a browser. The livetext [{page.name}] is just to make it possible to change the name of the tab when you load different pages.

How to use the template

When you have created a template as the one above, you simply save it to a html file somewhere in your static folder. I usually save them to a folder named templates and give them a name that describe what they contain. This one I would have named basic.html, so to use it then you create a new document and start it with a .page, next line add .template /templates/basic.html and end it all with .end. This is the header part of your doucment, that tells the server how to use it. Then add the actual html code after the .end

.page
.template /templates/basic.html
.name Hello world
.end
<h1>Hello world</h1>

Here it is. This will use the template from above and add the html part where the [%body%] tag is. If you save this as hello.htlm in your static folder, you can test it with adding http://127.0.0.1:port/hello.html. Port is the designated port number your server is given the first time you start up. Usually something like 8765. You can read it in the console when you start your server. My message is: Setting up server to serve http requests from port: 8882 meaning that my server run on port 8882 and the url is http://127.0.0.1:8882

<!doctype html>
<html lang="en-GB">
<head>
  <title>Hello world</title>
  <meta charset="utf-8">
</head>
<body>
<!-- Start of body imported from page -->
<h1>Hello world</h1>
<!-- End of body imported from page -->
</body>
</html>

The result when loading into a browser and do a show page source.