-
Notifications
You must be signed in to change notification settings - Fork 0
Tag Reference Guide
Temporal uses simple tags.
{tagname}
Tags are used in any HTML template and are replaced by Modules and Pages. It's important to note that Temporal supports multiple output methods. By default, HTML, JSON and XML are supported. It's possible to write your own as needed. Tags are set by their output method. Output methods are set by the current Page. 99% of the time you will just use the default HTML output. In that case you can set content for a tag with the following syntax.
\Html::set({atag}, 'any string content');At its lowest level, the tag engine is just a wrapper for str_replace(). However, the HTML engine uses a number of features to speed up the development process. While you don't have to use {} as a wrapper for your tags, its highly recommended to do so.
A few things to keep in mind with tags: Temporal uses a loop-based engine for Page()/Module(). When you set a tag the tag is not removed right away. It won't be stripped until after DEFAULT_CALLBACK_OUTPUT loop. First off, any instance of that tag will be replaced with your content anytime you call it and you can still set it later on a different loop. Another important note, all calls are done in the order they are set. You MUST not try to set a tag BEFORE you set the template that contains the tag. You should always load the template before setting any tags. It's also possible to set any default tag. It's the recommended way to add CSS, JS, etc to the HEAD and FOOTER parts of an HTML page. Tags are the preferred method to set dynamic HTML.
Tags wont always be set. To clear any tags, just call the correct output method without content.
\Html::set('{atag}');Tags are shown where they should be placed in the template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="{meta_description}">
<meta name="keywords" content="{meta_keywords}">
<title>{title}</title>
{css}
<link rel="stylesheet" href="{root_css}styles.css" type="text/css" media="screen, projection">
</head>
<body>
<h1>Temporal Sample Site</h1>
<p>Some Body Copy</p>
{scripts}
{footer}
{debug}
{adminbar}
</body>
</html> #Required Tags
Contains the page title set by any ZPage (a normal, editable page). Any addon Page()/Module() should set this.
Sets the META description. Any ZPage (a normal, editable page) sets this via the "edit page". Any addon Page()/Module() should set this via the tag.
Sets the META keywords. Any ZPage (a normal, editable page) sets this via the "edit page". Any addon Page()/Module() should set this via the tag.
Used to set all css, this is used by internal Modules and Addon's. It MUST be before your site specific CSS. If you don't, your site specific CSS will be overwritten by default frameworks and internal styles.
###{scripts}
Sets all JavaScript <script> tags and should be place after the content in the body.
###{footer} Legacy, Should be placed after all HTML, used for multiple types of content. Some late JS from old modules will be set on this tag.
###{debug}
Not used much anymore, but internally, it can be used to view the internal debug stack if you run into issues with the CMS. You will have to set define('ENABLE_DEBUG_TRACE', false); in your config.inc.php
###{adminbar} Displays the admin bar when logged in and it's allowed via permissions. NOTE: All internal admin pages use the Bootstrap 3 framework. Bootstrap s not forced in templates. You MUST include the Bootstrap CSS/JS files to use the Admin Bar. We recommend the CDN version.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" type="text/css">
{z1} to {z20} are the only default tags that require being wrapped in html. This is only required if you're using the default Rich and Raw editors. There has been some debate if they should just include what they need by default. It's a complex answer, but due to different requirements depending on what editor is loaded we can give more freedom to write new editor modules by not forcing our HTML syntax.
When using the default editors:
<div class="zone" id="z1">{z1}</div>