Editable regions for Pages
Instead of a single editable area, Evance sees Pages as a collection of one or more named editable regions.
You may add one or more editable regions to Page templates. This is done using the <ev:editable/>
tag
and is super easy to do. This allows you to design layouts with the freedom to define which areas of a template are editable.
Your main content area
Your template should have a primary content region called main
, which represents the bulk of
the page's content.
<main>
<ev:editable ref="main" />
</main>
Additional regions
You may add any number of additional sub-regions to your page templates. You have freedom over what you call your regions, but references should:
- contain alpha-numeric characters, dashes or underscores
- avoid the use of spaces
<main>
<ev:editable ref="main" />
</main>
<section>
<h2>Features</h2>
<ev:editable ref="features" />
</section>
Placeholder content
The <ev:editable>
tag allows you to include default content, which is displayed like a placeholder until
an administrator overwrites the content. Placeholder content should be kept to a minimum.
<main>
<ev:editable ref="main">
<h1>Example title</h1>
<p class="subtitle">Put an introduction to your page here.</p>
<ev:editable>
</main>
Basic EvScript support
The <ev:editable>
tag supports basic use of EvScript (output tags only).
<main>
<ev:editable ref="main">
<h1>{{ page.title }}</h1>
<p class="subtitle">{{ page.description }}</p>
<ev:editable>
</main>
Dynamically generated regions
There may be instances where you need to dynamically generate editable regions for a page. The ref
attribute
for an <ev:editable>
tag also supports basic use of EvScript, allowing you dynamically name references.
<?ev for (var asset of page.assets) { ?>
<ev:editable ref="asset-{{ asset.id }}">
<h3>{{ asset.title }}</h3>
<p>{{ asset.description }}</p>
<ev:editable>
<?ev } ?>
Additional reading
See the following related articles: