La sintaxis y el uso básico del motor de plantillas de arte

Motor de plantillas

1.1 Motor de plantillas

El motor de plantillas no lo proporciona el propio Node, es un módulo de terceros.
El propósito es permitir que los desarrolladores empalmen cadenas de una manera más amigable, haciendo que el código del proyecto sea más claro y más fácil de mantener.

1.2 plantilla de arte

Sitio web oficial https://aui.github.io/art-template/zh-cn/
instalación npm install art-template
Usar let template = require('art-template')motor de plantilla de importación
Indique al motor de plantillas dónde están los datos y las plantillas que se van a empalmar const html = template(‘模板路径’，数据);
- Los datos son tipo de objeto
- El valor de retorno de template () es una cadena concatenada

Proceso de uso completo
1. Cree el archivo 01.js

let template = require("art-template");
let path = require("path");

let view = path.join(__dirname,'views','01.art');

//第一个参数是路径
//第二个参数是数据，对象类型
//返回值是拼接好的字符串
let html = template(view,{
    
    
  name:"张三"
})

console.log(html);

2. Cree el archivo 01.art

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<!--标准语法-->
<p>{
    
    {
    
     name }}</p>

<!--原始语法-->
<p><%= name %></p>
</body>
</html>

Ejecutar archivo 01.js node 01.js

1.3 Sintaxis de salida

art-template admite sintaxis estándar y sintaxis original. La gramática estándar hace que la plantilla sea fácil de leer y escribir, mientras que la gramática original tiene poderosas capacidades de expresión lógica.
- Sintaxis estándar { {value}}
- Sintaxis original <% = valor%>

Si los datos llevan etiquetas HTML, el motor de plantilla predeterminado no analizará las etiquetas y las generará después de escaparte. Esto es por razones de seguridad

let template = require("art-template");
let path = require("path");

let view = path.join(__dirname,'views','01.art');

let html = template(view,{
        
        
  content:'<h1>我是标题</h1>'
})

console.log(html);

Cuando use { {content}} para generar, obtendrá los siguientes resultados

{
          
          {
          
          content}}
// &#60;h1&#62;我是标题&#60;/h1&#62;

Salida original: la oración de salida original no escapará al contenido HTML, que puede tener riesgos de seguridad. Úselo con precaución.
- Gramática estándar { { @数据 }}
- Sintaxis original :, <%- 数据 %>cambiar = al signo menos

1.4 Juicio condicional

En la plantilla, puede decidir qué fragmento de código HTML mostrar según las condiciones

Gramática estándar

{
       
       {if value}} ... {
       
       {/if}}
{
       
       {if v1}} ... {
       
       {else if v2}} ... {
       
       {/if}}
                                  
<!--标准语法-->
{
       
       {if age >= 20}}
<p>年龄大于等于20</p>
{
       
       {else if age < 15}}
<p>年龄小于15</p>
{
       
       {else}}
<h1>年龄不符合要求</h1>
{
       
       {/if}}

Gramática original

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
    
<!--原始语法-->
<% if(age >= 20) { %>
<p>年龄大于等于20</p>
<% } else if(age < 15) { %>
<p>年龄小于15</p>
<% } else {%>
<h1>年龄不符合要求</h1>
<% } %>

1.5 Sintaxis de bucle

Gramática estándar

$ index representa el índice del ciclo actual
$ value representa los datos del ciclo actual

{
     
     {each target}}
    {
     
     {$index}} {
     
     {$value}}
{
     
     {/each}}

Gramática original

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

targetApoyar arrayel objectiterativo, su valor predeterminado $data.
$valueY $indexse puede { {each target val key}}personalizar:.

1.6 Sub-plantilla

Use sub-plantillas para extraer bloques públicos (encabezado, final) del sitio web en archivos separados.

Gramática estándar

{
     
     {include './header.art'}}
{
     
     {include './header.art' data}}

Gramática original

<% include('./header.art') %>
<% include('./header.art', data) %>

1.7 Herencia de plantillas

El uso de la herencia de plantillas puede extraer el esqueleto HTML del sitio web en un archivo separado, y otras plantillas de página pueden heredar el archivo esqueleto.

Gramática estándar

{
     
     {extend './layout.art'}}
{
     
     {block 'head'}} ... {
     
     {/block}}

Gramática original

<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

La herencia de plantillas le permite crear un "esqueleto" de plantilla básico que contiene los elementos comunes de su sitio. ejemplo:

<!--layout.art-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{
     
     {block 'title'}}My Site{
     
     {/block}}</title>

    {
     
     {block 'head'}}
    <link rel="stylesheet" href="main.css">
    {
     
     {/block}}
</head>
<body>
    {
     
     {block 'content'}}{
     
     {/block}}
</body>
</html>

<!--index.art-->
{
     
     {extend './layout.art'}}

{
     
     {block 'title'}}{
     
     {title}}{
     
     {/block}}

{
     
     {block 'head'}}
    <link rel="stylesheet" href="custom.css">
{
     
     {/block}}

{
     
     {block 'content'}}
<p>This is just an awesome page.</p>
{
     
     {/block}}

1.8 Configuración de plantilla

Introducido en la plantilla variable template.defaults.imports.变量名=变量值;valor variable puede ser un módulo de terceros siempre que sea un método

let template = require("art-template");
let path = require("path");
let dateFormat = require('dateformat');

let view = path.join(__dirname, 'views', '06.art')

//默认情况下，在模板中**.art中是不能使用dateFormat方法的，所以需要导入
//导入模板变量
template.defaults.imports.dateFormat = dateFormat

let html = template(view, {
  time: new Date()
})

console.log(html);

{
       
       { dateFormat(time,'yyyy-mm-dd') }}

Establecer directorio raíz de la plantilla template.defaults.root = 模板目录
Establecer el sufijo predeterminado de la plantilla template.defaults.extname = '.art'

Recursos de aprendizaje

Vídeo de la estación B: plantilla de arte del motor de plantilla