Template Markup
Templates in Voog are written using basic HTML, CSS and javascript mixed with Liquid markup tags and some custom Voog tags to render the page content and other variable data into HTML output. Read our developers Getting Started page how to access Voog template files.
The template files are organised in the following structure:
- Layouts - the page designs user can pick when creating a new page.
- Components - parts of reusable code that can be included in layouts.
- Styles - for stylesheets (.css files). These files are all available from path /stylesheets.
- Scripts - for javascripts (.js files). These files are all available from path /javascripts.
- Images - for images used in templates. These files are all available from path /images. This folder is not intended to be used for user added content images. User added and managed images are available from /photos.
- Assets - for all other types of files. These files are all available from path /assets.
Layouts can be one of following types:
- Page - the most basic type used in most pages.
- Blog and News - for blog article listings pages. In addition to all ordinary objects that Page has, additional object articles (list of article objects) is available.
- Blog Article - for displaying a blog article (or creating a new one). Gives access to additional objects articles (like Blog and News template) and article (current article). Every Blog Article layout has a single corresponding Blog and News layout — without one, articles cannot be created. If there are more Blog Article layouts bound to a Blog and News layout, only the first one is used for displaying and creating new articles. Blog articles are displayed as virtual pages on the Blog and News page — this means the page object refers to the listing page, not the article itself.
- Elements - for displaying Database entry listings. It gives access to and additional object elements (list of database entries named element bound to this page).
- Element - for displaying a database entry (or creating a new one). Gives access to additional objects elements (like Elements template) and element (current database entry). Similarly to the Blog Article layout, every Element layout has a single corresponding Elements layout. Also, on Element pages, the page object refers to the Elements listing page, not the element itself.
- Auto-generated product - for displaying an automatically generated product page, which is available for every product in the store. Gives access to additional object product. If this layout is missing, then a system default Auto-generated product layout is used.
- Error 401 - for displaying a custom log-in screen when user is trying to access a password-protected page. If this layout is missing, then a system default Error 401 layout is used.
- Error 404 - for displaying a custom error screen when user is trying to access a non-existent page. If this layout is missing, then a system default Error 404 layout is used.
Start coding
Here is a simple example of a basic page layout.
<html>
<head>
<title>{{ title }}</title>
<meta name="keywords" content="{{ page.keywords }}" />
<meta name="description" content="{{ page.description }}" />
{% stylesheet_link "style.css" %}
{% rss_link %}
{% site.stats_header %}
</head>
<body>
<h1>Welcome to Voog!</h1>
{% content name="maincontent" %}
{% site.analytics %}
</body>
</html>
As you can see here, there are two types of markup elements in Liquid markup - output elements and tag elements.
Output elements are surrounded by {{ two curly brackets }} and can optionally passed through filters which modify the output. In Voog, output elements are being used to render variables and properties of objects to HTML.
Tag elements are surrounded by {% a curly bracket and a percent sign %}. Tags may also generate output but they usually control the program flow on generating output.
Examples on creating layouts
See the basic examples in the sidebar for more information on building the most common layouts like blogs or menus, or advanced examples on solving specific problems like adding a breadcrumb navigation element and filtering elements.Objects
Objects give you access to everything that is editable in Voog. They have properties which in turn can be other objects or just plain variables that can be rendered in output using output elements described above. For example, you have access to your site properties such as title or keywords, the current page or blog article the user is at etc.
Tags
Tags control the template generation flow, for example, looping through lists of objects, performing conditional actions or creating editable content area on your page. See the full list of available tags in the tags section in menu.
Components
Components are useful for common code snippets that are being shared across several page templates, for example, generating site navigation menu with links to all pages on site or page footer with contact information. See more on components.
Smarter images and videos
Voog has built in methods for images and videos to solve mobile issues like fluid scaling of content and serving smaller image sizes based on device screen size. Read more.