Templates
When you create multiple pages with LemonStand you will soon find that you repeat the same HTML code in all pages - the HEAD and BODY tags declarations, page headers and footers. Templates allow you to reuse the common code. Templates act as wrappers for your pages. They usually contain the required HTML tags like HEAD, TITLE and BODY, as well as common blocks of your pages - website navigation, footer, header, sidebar etc. You can have as many templates as you need. For simple websites two templates usually are enough - for the Home page and for inner pages.
The following image illustrates the idea behind templates.
Let's create a simple template to use with our stores Home page. Go to the Editor/Templates page and click the + button underneath the Templates heading.
Specify the name for your template in the Code field. The template we are creating will contain all required HTML tags, and the simple header and footer elements. The page itself will be rendered between the header and footer.
Paste the following code into the Content field.
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<title>{{ page.title }}</title>
</head>
<body class="body">
<p>This is a header</p>
{{ page() }}
<p>This is a footer</p>
</body>
</html>
The key element in the Template content code is the {{ page() }} function call. It outputs the current page content. You can use a single template with multiple pages, and this function call will always output the content of a specific page that the user navigates to.
{{ page() }}
Also, please note how the page title in the TITLE tag is displayed. It uses a piece of code which refers to the value you have entered in the title field of the current page object.
{{ page.title }}
You can also output the page description in your HEAD tag in a similar manner by using {{ page.description }}. This will output the value of whatever you entered in the description field on the edit page form.
<meta name="Description" content="{{ page.description }}"/>
Click the Save & Close button to save you newly created template. Now it's time to assign the test-template to the Home page of our store. Click on the Pages menu item on the Editor side bar and then open the Home page by clicking on the Home line item.
This will then open the Edit Page form for the Home page.
In the Template drop-down, select test-template, and then click the Save & Close button.
Now click the View My Store link at the top left of the page. As you can see, the header and footer declared in the template are displayed around the home page content.
You can now go back to the pages section and change the template for the Home page back to home. This will restore the Home page back to its original state.