art-template template engine
1. The basic concept of art-template template engine
1.1 art-template template engine
The art-template template engine is a third-party module.
Let developers splice strings in a more friendly way, making the project code clearer and easier to maintain.
// 未使用模板引擎的写法
var ary = [{
name: '张三', age: 20 }];
var str = '<ul>';
for (var i = 0; i < ary.length; i++) {
str += '<li>\
<span>'+ ary[i].name +'</span>\
<span>'+ ary[i].age +'</span>\
</li>';
}
str += '</ul>';
<!-- 使用模板引擎的写法 -->
<ul>
{
{each ary}}
<li>{
{$value.name}}</li>
<li>{
{$value.age}}</li>
{
{/each}}
</ul>
1.2 art-template template engine
In the command line tool, use the npm install art-template command to download.
Use const template = require('art-template') to introduce the template engine to
tell the template engine where the data and templates to be spliced are const html = template('template path', Data);
Use template syntax to tell the template engine how the template and data should be spliced
1.3 Art-template code example
// 导入模板引擎模块
const template = require('art-template');
// 将特定模板与特定数据进行拼接
const html = template('./views/index.art',{
data: {
name: '张三',
age: 20
}
});
<div>
<span>{
{data.name}}</span>
<span>{
{data.age}}</span>
</div>
2. Template engine syntax
2.1 Template syntax
art-template supports two template syntaxes at the same time: standard syntax and original syntax.
Standard syntax can make templates easier to read and write, and original syntax has powerful logic processing capabilities.
Standard syntax: { {data}}
Original syntax: <%=data%>
2.2 Output
To output a certain item of data in the template, the standard syntax and original syntax are as follows:
Standard syntax: { {data}}
Original syntax: <%=data%>
<!-- 标准语法 -->
<h2>{
{value}}</h2>
<h2>{
{a ? b : c}}</h2>
<h2>{
{a + b}}</h2>
<!-- 原始语法 -->
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>
2.3 Original output
If the data contains HTML tags, the default template engine will not parse the tags, and will output them after being escaped.
Standard syntax: { {@ data}}
Original syntax: <%-data%>
<!-- 标准语法 -->
<h2>{
{@ value }}</h2>
<!-- 原始语法 -->
<h2><%- value %></h2>
2.4 Conditional judgment
<!-- 标准语法 -->
{
{if 条件}} ... {
{/if}}
{
{if v1}} ... {
{else if v2}} ... {
{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
2.5 Loop
Standard syntax: { {each data}} { {/each}}
Original syntax: <% for() {%> <%} %>
<!-- 标准语法 -->
{
{each target}}
{
{$index}} {
{$value}}
{
{/each}}
<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
2.6 Sub-template
Use sub-templates to extract public blocks (head, bottom) of the website into separate files.
Standard syntax: { {include'template'}}
Original syntax: <%include('template') %>
<!-- 标准语法 -->
{
{include './header.art'}}
<!-- 原始语法 -->
<% include('./header.art') %>
2.7 Template inheritance
Using template inheritance can extract the HTML skeleton of the website into a separate file, and other page templates can inherit the skeleton file.
2.8 Template inheritance example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML骨架模板</title>
{
{block 'head'}}{
{/block}}
</head>
<body>
{
{block 'content'}}{
{/block}}
</body>
</html>
<!--index.art 首页模板-->
{
{extend './layout.art'}}
{
{block 'head'}} <link rel="stylesheet" href="custom.css"> {
{/block}}
{
{block 'content'}} <p>This is just an awesome page.</p> {
{/block}}
2.9 Template configuration
Import variables template.defaults.imports into the template. Variable name = variable value;
set template root directory template.defaults.root = template directory
Set template default suffix template.defaults.extname ='.art'