当前位置：网站首页>Node creates a template file with the art template template template engine

Node creates a template file with the art template template template engine

2022-06-11 12:38:00 【Sister ailing】

art-template template engine

1. art-template The basic concept of template engine

1.1 art-template template engine

art-template The template engine is a third-party module .
Let developers splice strings in a more friendly way , Make the project code clearer 、 Easier to maintain .

 //  Writing without template engine 
 var ary = [{
     name: ' Zhang San ', 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>';

 <!--  Writing using the template engine  --> 
 <ul>
    {
   {each ary}}
        <li>{
   {$value.name}}</li>
        <li>{
   {$value.age}}</li>
    {
   {/each}}
 </ul>

1.2 art-template template engine

Use... In command line tools npm install art-template Command to download
Use const template = require(‘art-template’) Introduce template engine
Tell the template engine where the data and template to be spliced are const html = template(‘ Template path ’, data );
Use the template syntax to tell the template engine , How should templates and data be spliced

1.3 art-template Code example

 //  Import template engine module 
 const template = require('art-template');
 //  Splice specific templates with specific data 
 const html = template('./views/index.art',{
    
    data: {
    
        name: ' Zhang San ',
        age: 20
    }
 });

 <div>
    <span>{
   {data.name}}</span>
    <span>{
   {data.age}}</span>
 </div>

2. Template engine Syntax

2.1 Template syntax

art-template Supports both template syntax ： Standard grammar and original grammar .
Standard syntax makes templates easier to read and write , Primitive grammar has powerful logical processing ability .

Standard grammar ： { { data }}
Original grammar ：<%= data %>

2.2 Output

Output a piece of data in a template , The standard syntax and the original syntax are as follows ：

Standard grammar ：{ { data }}
Original grammar ：<%= data %>

  <!--  Standard grammar  -->
 <h2>{
   {value}}</h2>
 <h2>{
   {a ? b : c}}</h2>
 <h2>{
   {a + b}}</h2>

  <!--  Original grammar  -->
 <h2><%= value %></h2>
 <h2><%= a ? b : c %></h2>
 <h2><%= a + b %></h2>

2.3 Original output

If the data carries HTML label , The default template engine does not parse tags , It will be escaped and output .

Standard grammar ：{ {@ data }}
Original grammar ：<%- data %>

 <!--  Standard grammar  -->
 <h2>{
   {@ value }}</h2>
 <!--  Original grammar  -->
 <h2><%- value %></h2>

2.4 conditional

 <!--  Standard grammar  --> 
 {
   {if  Conditions }} ... {
   {/if}}
 {
   {if v1}} ... {
   {else if v2}} ... {
   {/if}}
 <!--  Original grammar  -->
 <% if (value) { %> ... <% } %>
 <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

2.5 loop

Standard grammar ：{ {each data }} { {/each}}
Original grammar ：<% for() { %> <% } %>

 <!--  Standard grammar  -->
 {
   {each target}}
     {
   {$index}} {
   {$value}}
 {
   {/each}}
  <!--  Original grammar  -->
 <% for(var i = 0; i < target.length; i++){ %>
     <%= i %> <%= target[i] %>
 <% } %>

2.6 Sub template

Use the sub template to make the website public ( Head 、 Bottom ) Pull out into a separate file .

Standard grammar ：{ {include ‘ Templates ’}}
Original grammar ：<%include(‘ Templates ’) %>

  <!--  Standard grammar  -->
 {
   {include './header.art'}}
  <!--  Original grammar  -->
 <% include('./header.art') %>

2.7 Template inheritance

Using template inheritance, the website can be HTML Extract the skeleton into a separate file , Other page templates can inherit skeleton files .

2.8 Template inheritance example

 <!doctype html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>HTML Skeleton template </title>
         {
   {block 'head'}}{
   {/block}}
     </head>
     <body>
         {
   {block 'content'}}{
   {/block}}
     </body>
 </html>

 <!--index.art  Homepage template -->
 {
   {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 into the template template.defaults.imports. Variable name = A variable's value ;
Set the template root directory template.defaults.root = The template directory
Set the default suffix of the template template.defaults.extname = ‘.art’

原网站

版权声明
本文为[Sister ailing]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/162/202206111223402805.html