Introduction

We know that implementing page and content layouts in Terminalfour can be a cumbersome and error-prone task. We've made it our goal to completely reimagine the process around implementing layouts, to provide a simple yet powerful solution, one that provides developers with more control, without compromising without impacting on the cost of maintaining and further developing those layouts. ### T4 Tag Layouts T4 Tag Layouts in Terminalfour are quite restricted in their feature set. 1. The main way to implement basic logic in standard layouts is through the use of _selective output_ T4 Tags. 2. Selective output tags are quite complex; both from an ease-of-use and readability perspective, due mainly to the requirement to escape HTML entities within the Tags. Because of the limited feature set in standard layouts, developers that require seemingly basic conditional logic constructs are quickly thrown into the world of programmable layouts. ### Programmable Layouts Programmable layouts in Terminalfour are hugely powerful, but using them has some drawbacks. 1. They can be difficult and costly to maintain. 2. There's no separation of concerns; HTML markup and JavaScript code are intermingled. 3. Updating a programmable layout to make a small text or layout change carries increased risk over updating a standard layout; a small mistake could result in JavaScript errors during publish, or worse still, publish failing completely. There are two main competing concerns here: **ease of use** and **power**; How can be make standard layouts more powerful, while at the same time making them easier to implement and maintain. ### Handlebars Layouts This is where Handlebars Layouts come in. They provide the **power** of _Programmable Layouts_, while improving on the **ease of use** of _T4 Tag Layouts_. With _Handlebars Layouts_ you can access _Content Elements_, _Section_ and _Channel_ information, and much more using simple and easy to remember _Handlebars Expressions_. #### Conditional Logic _Handlebars Layouts_ also provide the ability to add conditional logic to your _Layouts_, without using _Programmable Layouts_. With _Handlebars Layouts_ adding _if_, _and_, _ or_, as well as other conditional operators is simple. `{{publish element="Name"}} {{#ifSet element="Intro"}} {{{publish element="Intro"}}} {{/ifSet}} {{{publish element="Main Body"}}}` #### Code Reuse (Partials) In addition to providing for a more powerful and simple syntax than existing _Layouts_, _Handlebars Layouts_ also improve reuse of code, through the use of _partials_; small blocks of markup, which can be embedded into multiple _Layouts_. Embedding a _partial_ in a _Handlebars __Layout_ is as simple as adding a reference to it. `{{> partialName}}` #### Extensibility Yet without a doubt the most powerful things about _Handlebars Layouts_ is their extensibility. With _Handlebars Layouts_ you can define your own JavaScript functions that build upon and enhance the functionality provided by _Handlebars Layouts_. These custom functions, which are defined within their own area, can be added to any _Layout_ by including a _Handlebars Expression_ in the _Layout_ with the function name. Considering a custom function called _anything_ as below ##### Custom Function `_function (context, options) { return "If you can dream it, you can do it!"; }_` Using this function in a _Handlebars Layout_ is then as simple as adding a _Handlebars Expression_ that calls it. ##### Handlebars Layout `{{anything}}` On publish, the custom function will be called and the below output generated. ##### Published Page `If you can dream it, you can do it!`