Templates in HyperCode

Understand use Templates with HyperCode

Templates are HyperFluxCMS features that allow reusing code snippets as if they were building blocks.

One of the main features of HyperFluxCMS is the so-called "Templates". Templates are code blocks that model parts of the site and are reusable, repeatable, and customizable.

Like posts, a template is a block of code written in HTML, HyperCode, HyperLite, or a combination of two or three of them. The most common is that they are written in HTML or HyperCode.

A template can represent an entire page or a piece of it. It can also be a block that repeats a determined or undetermined number of times.

A template can even include other templates within it.

But a template is not just a fixed code block. If it were, it would be of little use. But a template is much more than that. It allows certain parts of the code to be replaced by variable text or content that is generated automatically on a case-by-case basis.

For example, the page that shows the Search result on a HyperFluxCMS site is a template. And each block with the description of each post displayed on that page is also a template.

HyperFluxCMS supports 2 types of templates: top-level and low-level

Top-Level templates are those used as models for pages. The search page or the site's home page are examples of top-level templates.

Low-level templates are used as blocks within pages. For example, the page footer, an area containing a navigation menu, an item on the search page, etc.

What tells HyperFluxCMS whether a template is top-level or low-level are the template settings in the site administration page.

Understand better how to use Templates at Templates

Tag [template]

To use, "call", or insert a template into a post or another template, use the template tag. It provides the template name and the optional properties.

Syntax:

The template tag is self-contained, meaning it DOES NOT NEED and MUST NOT be used in "open/close" pairs. It should be used as a single tag.

Properties

The name property is the only mandatory one. It indicates the name of the template to be used. It must be an existing template name on the site, such as large-post-list-item.

All other properties are optional and have no defined name or meaning here, since they vary according to each template's code.

Anonymous property

The "name" property can be omitted and the name can be provided directly after the tag name.

Example:

is equivalent to

Optional properties

For the template Tag there is no predefined list of optional properties. They will vary on a case-by-case basis depending on what the template code uses.

Additional properties are called Parameters.

See Using Variables and Parameters.

For example, if the site has a template called borderbox to display a text box with borders and specific text, and that template has the code:

When using the template, you must pass the @p:text parameter as a property called text.

This will generate in the accessed page the HTML code referring to the template borderbox replacing @p:text with "Hello, World!".

The template tag DOES NOT directly accept the id, class, and style properties. They CAN be provided in the call properties, but will only have effect if those properties are used within the template code.

Alternatively, custom adjustments to the appearance, presentation, and behavior of the component must be made by editing the template or the CSS style sheet.

Only low-level templates should be called within pages or top-level templates.

Tag [header]

The header Tag is a special type of template that is normally used to indicate that, at that point in the code, HyperFluxCMS should insert the code referring to the standard header of content pages.

The header Tag is nothing more than a "Template" already with some pre-programmed characteristics. However, nothing prevents them from being customized, whether through the site's CSS style sheets or through specific customization via JavaScript and/or class and style properties.

The header component is simply a template -type block, but with the "name" property pre-configured to be "header", which causes the template with that name to be used.

The header tag is self-contained, meaning it DOES NOT NEED and MUST NOT be used in "open/close" pairs. It should be used as a single tag.

The header tag DOES NOT directly accept the id, class, and style properties. They CAN be provided in the call properties, but will only have effect if those properties are used within the template code.

Alternatively, custom adjustments to the appearance, presentation, and behavior of the component must be made by editing the template or the CSS style sheet.

Tag [footer]

The footer Tag is a special type of template that is normally used to indicate that, at that point in the code, HyperFluxCMS should insert the code referring to the standard footer of content pages.

The footer Tag is nothing more than a "Template" already with some pre-programmed characteristics. However, nothing prevents them from being customized, whether through the site's CSS style sheets or through specific customization via JavaScript and/or class and style properties.

The footer component is simply a template -type block, but with the "name" property pre-configured to be "footer", which causes the template with that name to be used.

The footer tag is self-contained, meaning it DOES NOT NEED and MUST NOT be used in "open/close" pairs. It should be used as a single tag.

The footer tag DOES NOT directly accept the id, class, and style properties. They CAN be provided in the call properties, but will only have effect if those properties are used within the template code.

Alternatively, custom adjustments to the appearance, presentation, and behavior of the component must be made by editing the template or the CSS style sheet.

Tag [post]

The post Tag is a special type of template that is normally used to display summarized information of a post obtained through a search operation, by the search page or on the site's home page.

The post Tag is nothing more than a "Template" already with some pre-programmed characteristics. However, nothing prevents them from being customized, whether through the site's CSS style sheets or through specific customization via JavaScript and/or class and style properties.

The post tag is self-contained, meaning it DOES NOT NEED and MUST NOT be used in "open/close" pairs. It should be used as a single tag.

The post tag DOES NOT directly accept the id, class, and style properties. They CAN be provided in the call properties, but will only have effect if those properties are used within the template code.

Alternatively, custom adjustments to the appearance, presentation, and behavior of the component must be made by editing the template or the CSS style sheet.