<ev:translate>
Extends HTML tags with both CMS editable capabilities and multi-lingual support for sitewide content.
These regions may be editable or non-editable depending on your requirements. However, we believe our users should be able
to edit most text on their site. The <ev:translate>
tag empowers you to enable editing on site/globally
scoped content. If you're looking to add an editable content block specific to a Page, Category or Product then you should
use the <ev:editable>
tag.
Template support
All templates support the <ev:translate> tag.
Default language
The default language for Evance is English and we encourage all themes to be developed in English first. If you are building a custom theme and would like to build your theme in your native language you're free to do so. If you're like most of us, you'll probably create your theme with no language preference:
<ev:translate>
<h1>Hello</h1>
<p>Welcome to Evance</p>
</ev:translate>
Renders as:
<div>
<h1>Hello</h1>
<p>Welcome to Evance</p>
</div>
This doesn't appear to be very useful yet. It's just wrapped our content with a <div>
. Hold your horses,
it's going to get more interesting...
Non-editable translations
You may add multi-lingual support into theme files directly using the <lang:...>
tag.
This tag lets Evance know which languages are available to it within the code block. So if you're freakishly good at
speaking different languages here's your chance to shine.
<ev:translate>
<lang:en>
<h1>Hello</h1>
<p>Welcome to Evance</p>
</lang:en>
<lang:fr>
<h1>Bonjour</h1>
<p>Bienvenue à Evance</p>
</lang:fr>
<lang:de>
<h1>Hallo</h1>
<p>Willkommen bei Evance</p>
</lang:de>
</ev:translate>
If the current language is French (fr) the code block above renders as:
<div>
<h1>Bonjour</h1>
<p>Bienvenue à Evance</p>
</div>
Evance will choose the code block relevant to the current language, or the default language (English) if it cannot find one
it's looking for. You may not nest <lang>
tags and cannot mix <lang>
tags with non-language
specific code. For example the following will not work, only the French (fr) content will be identified by Evance.
<ev:div>
<h2>Hello</h2>
<p>...</p>
<lang:fr>
<h2>Bonjour</h2>
<p>...</p>
</lang:fr>
</ev:div>
Did you notice something else? We used <ev:div>
and not <ev:translate>
.
You can convert most block and inline tags into a translatable area. To make life easier, we still recommend using
<ev:translate>
.
Editable translations
Allowing users to edit translated blocks of content within the CMS is very simple. Add a unique ref="..."
attribute.
<ev:translate ref="MY_UNIQUE_REF">
<lang:en>
<h2>Hello</h2>
<p>...</p>
</lang:en>
<lang:fr>
<h2>Bonjour</h2>
<p>...</p>
</lang:fr>
<lang:it>
<h2>Ciao</h2>
<p>...</p>
</lang:it>
</ev:translate>
The placeholder content within editable tag will be the default content, but allows users to overwrite the content.
Placeholder content is optional, which means the following is also perfectly valid:
<ev:translate ref="MY_UNIQUE_REF" />
Scope & uniqueness
The <ev:translate>
tag is scoped to the site (global) when a ref
attribute
is defined. This means the ref
attribute must be unique within your theme. This allows you
to display content across multiple pages with the same reference. When a user edits content on one page it changes across
all pages with the same region.
If no reference is defined the tag is scoped to the template and is not editable. This is useful when areas of a template require translation, but you do not wish users to be able to edit them.