Using components
Here's an example of using components to break apart common parts like headers, footers and menus from templates and generating translation file for multilingual site. Using components not only allows editing common parts o source in one place, but makes your templates easier to read.
template-head
component.
Declares various <head> tag components for all pages on site.
{% comment %}IE SETTINGS{% endcomment %}
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
{% comment %}META INFO{% endcomment %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
{% comment %}FAV ICON{% endcomment %}
{% if site.has_favicon? %}
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/ico">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
{% endif %}
{% comment %}STYLESHEETS{% endcomment %}
{% if editmode %}
<link rel="stylesheet" href="{{ site.static_asset_host }}/libs/edicy-tools/latest/edicy-tools.css">
{% endif %}
{% stylesheet_link "main.min.css" %}
{% comment %}Comment out the above stylesheet and remove comments from the stylesheet below to use unminified version.{% endcomment %}
{% comment %}{% stylesheet_link "main.css" %}{% endcomment %}
{% comment %}SITE TITLE{% endcomment %}
{% capture page_title %}{% if article %}{{ article.title }}{% unless page.site_title == "" %} — {{ page.site_title }}{% endunless %}{% else %}{% if site.root_item.selected? and page.site_title != "" %}{{ page.site_title }}{% else %}{{ page.title }}{% unless page.site_title == "" %} — {{ page.site_title }}{% endunless %}{% endif %}{% endif %}{% endcapture %}
<title>{{ page_title }}</title>
{% comment %}MISC{% endcomment %}
{% include "template-meta" %}
{% if blog %}{{ blog.rss_link }}{% endif %}
{{ site.stats_header }}
site-footer component.
Declares common footer source:
<footer class="site-footer">
<div class="footer-body content-area js-footer-body">{% xcontent name="footer" %}</div>
<div class="voog-reference">
{% loginblock %}{{ "footer_login_link" | lc }}{% endloginblock %}
</div>
</footer>
menu-main component.
For a more detailed explanation of menussee examples under Navigation menu exaples
<nav class="menu-main">
<ul class="menu">
{% unless site.root_item.hidden? %}
{% menulink site.root_item wrapper-tag="li" %}
{% endunless %}
{% for item in site.visible_menuitems %}
{% menulink item wrapper-tag="li" %}
{% endfor %}
{% if editmode %}
{% if site.hidden_menuitems.size > 0 %}
<li>{% menubtn site.hidden_menuitems %}</li>
{% endif %}
<li>{% menuadd %}</li>
{% endif %}
</ul>
</nav>
menu-sub component
{% for level_1 in site.menuitems_with_hidden %}
{% if level_1.selected? %}
{% if editmode or level_1.children? %}
<ul class="level-2-menu">
{% for level_2 in level_1.visible_children %}
<li class="level-2-item">
{% menulink level_2 %}
{% if level_2.selected? %}
{% if editmode or level_2.children? %}
<ul class="level-3-menu">
{% for level_3 in level_2.visible_children %}
{% menulink level_3 wrapper-tag="li" wrapper-class="level-3-item" %}
{% endfor %}
{% if editmode %}
{% if level_2.hidden_children.size > 0 %}
<li>{% menubtn level_2.hidden_children %}</li>
{% endif %}
<li>{% menuadd parent="level_2" %}</li>
{% endif %}
</ul>
{% endif %}
{% endif %}
</li>
{% endfor %}
{% if editmode %}
{% if level_1.hidden_children.size > 0 %}
<li>{% menubtn level_1.hidden_children %}</li>
{% endif %}
<li class="last">{% menuadd parent="level_1" %}</li>
{% endif %}
</ul>
{% endif %}
{% endif %}
{% endfor %}
template-translations component.
It is a quite good idea to keep all hardcoded texts in your templates in one place so it would be easy to change texts on the whole site and add languages in the future.
{% case page.language_code %}
{% when "et" %}
{% assign translation_login = "Logi sisse" %}
{% assign translation_register = "Registreeri" %}
{% assign translation_forgot = "Unustasid parooli?" %}
{% else %}
{% assign translation_login = "Log in" %}
{% assign translation_register = "Register" %}
{% assign translation_forgot = "Forgot password?" %}
{% endcase %}
template-javascripts component.
Configures Voog site search widget javascript and statistics service javascript. See more here …
{% if site.search.enabled %}
<script src="{{ site.static_asset_host }}/libs/edicy-search/latest/edicy-search.js"></script>
<script>
var searchForm = document.querySelector('.search-form');
if (searchForm) {
var search = new VoogSearch(searchForm, {
per_page: 3,
lang: '{{ page.language_code }}',
resultsContainer: null,
sideclick: true,
mobileModeWidth: 480,
updateOnKeypress: false,
minQueryLength: 3,
showTick: true,
position: "auto"
});
}
</script>
{% endif %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="{{ javascripts_path }}/scripts.js"></script>
{{ site.analytics }}
{% sitejs_include %}
Usage in layout.
<!DOCTYPE html>
<html>
<head>
{% include "template-head" %}
{% include "template-translations" %}
</head>
<body>
<div class="header">
<h1>{{ page.title }}</h1>
{% include "menu-main" %}
</div>
<div class="content-wrapper">
<button>{{ translation_login }}</button>
<button>{{ translation_register }}</button>
<button>{{ translation_forgot }}</button>
<div class="content-area">{% content %}</div>
<div class="sidebar">
{% include "menu-sub" %}
<div class="content-area">{% content name="sidebar" %}</div>
</div>
</div>
{% include "site-footer" %}
</body>
</html>
