1. Template syntax

  • Art-template supports both template syntax: standard and primitive.

  • Standard syntax makes templates easier to read and write, and raw syntax has powerful logical processing power.

  • Standard syntax: {{data}}

  • Original syntax: <%= data %>

2. The output

To output an item in a template, the standard and original syntax looks like this:

  • Standard syntax: {{data}}
  • Original syntax: <%= data %>
<! -- Standard grammar --><h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2><! -- Primitive syntax --><h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>
Copy the code

3. Output of original text

If the data contains HTML tags, the default template engine will not parse the tags, but will escape them and output them.

  • Standard syntax: {{@ data}}
  • Original syntax: <%- data %>
<! -- Standard grammar --><h2>{{@ value }}</h2><! -- Primitive syntax --><h2><%- value %></h2>
Copy the code

4. Conditional judgment

<! -- Standard syntax --> {{ifConditions}}... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}} <! -- Primitive syntax --> <%if(value) { %> ... < %} % > < %if(v1) { %> ... The < %}else if(v2) { %> ... The < %} % >Copy the code

5. Cycle

  • Standard syntax: {{each data}} {{/each}}
  • <% for() {%> <%} %>
<! - standard grammar - > {{each target}} {{$index}} {{$value}} {{/ each}} <! -- Primitive syntax --> <%for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>
Copy the code

6. Template

Use a subtemplate to separate the common sections of the site (header, bottom) into a separate file.

  • {{include ‘template ‘}}
  • Original syntax: <%include(‘ template ‘) %>
<! -- Standard syntax --> {{include'./header.art'}} <! --> <% include('./header.art') % >Copy the code

7. Template inheritance

Using template inheritance, you can separate a site’s HTML skeleton into a separate file, and other page templates can inherit the skeleton file.

8. Template inheritance example

<! Doctype HTML > < HTML > <head> <meta charset=" UTF-8 "> <title>HTML skeleton </title> {{block 'head'}}{{/block}} </head> <body> {{block 'content'}}{{/block}} </body> </html> <! -- index. Art home page template - > {{the extend '. / layout. Art '}} {{block 'head'}} < link rel = "stylesheet" href = ". The custom CSS "> {{/ block}} {{block 'content'}} <p>This is just an awesome page.</p> {{/block}}Copy the code

9. Configure the template

  1. To import variable template template. Defaults. Imports. Variable name = variable value;
  2. Set the template root directory template.defaults.root = the template directory
  3. Set the default suffix template template. Defaults. Extname = ‘art’