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.
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 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 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.
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.