Plantilla de arte del motor de plantilla (notas)

1. Motor de plantillas

El motor de plantilla es un módulo de terceros
que permite a los desarrolladores unir 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.
Inserte la descripción de la imagen aquí

2. motor de plantilla de arte-plantilla (Tencent)

  1. Utilice el comando npm install art-template en la herramienta de línea de comandos para descargar
  2. Usar const template = require('art-template')motor de plantilla de importación
  3. Indique al motor de plantillas dónde están los datos y las plantillas que se van a empalmar const html = template('模板路径', 数据);

3. Ejemplo de código de plantilla de arte

Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí

app.js

// 导入模板引擎
const template = require('art-template');
const path = require('path');

const view = path.join(__dirname, 'views', 'index.art')

// template方法是用来拼接字符串的
// 1. 模板路径 绝对路径
// 2. 要在模板中显示的数据 对象类型
// 返回拼接好的字符串
const html = template(view, {
    
    
    name: '张三',
    age: 20
})

console.log(html);

index.art

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    {
   
   {name}}
    {
   
   {age}}
    
</body>
</html>

4. Sintaxis de la plantilla

  • art-template admite dos sintaxis de plantilla al mismo tiempo: sintaxis estándar y sintaxis original
  • La gramática estándar puede hacer que las plantillas sean más fáciles de leer y escribir, y la gramática original tiene poderosas capacidades de procesamiento lógico.
4.1 Salida de texto de gramática original de gramática estándar
标准语法:{
    
    {
    
    数据}}
原始语法:<%=数据 %>
原文输出:{
    
    {
    
    @ content}}  <%- content%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 标准语法 -->
    <p>{
   
   {name}}</p>
    <p>{
   
   {1+1}}</p>
    <p>{
   
   {1+1==2 ? '相等':'不相等'}}</p>
    <p>{
   
   {content}}</p>
    
    <!-- 原文输出 -->
    <p>{
   
   {@ content}}</p>

    <!-- 原始语法 -->
    <p><%= name %></p>
    <p><%= 1 + 2%></p>
    <p><%= 1+1==2 ? '相等':'不相等' %></p>
    <p><%= content%></p>

    <!-- 原文输出 -->
    <p><%- content%></p> 
</body>

</html>
4.2 Juicio condicional (nivel 68)

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

<!-- 条件判断的标准语法 -->

{
    
    {
    
    if age>18}}
    年龄大于18
{
    
    {
    
    else if age < 15}}
    年龄小于15
{
    
    {
    
    else}}
    年龄不符合要求
{
    
    {
    
    /if}}


<% if(age > 18) {
    
     %>年龄大于18<%} %>


<!-- 条件判断的原始语法 -->
<% if(age > 18) {
    
    %>
    年龄大于18
<%} else if (age < 15) {
    
    %>
    年龄小于15
<%} else {
    
    %>
    年龄不符合要求
<%} %>
4.3 Bucle
标准语法:{
    
    {
    
    each 数据}} {
    
    {
    
    /each}}
原始语法:<% for() {
    
    %> <%} %>

Inserte la descripción de la imagen aquí

<ul>
    {
    
    {
    
    each users}}
        <li>
            {
    
    {
    
    $value.name}}
            {
    
    {
    
    $value.age}}
            {
    
    {
    
    $value.sex}}
        </li>
    {
    
    {
    
    /each}}
</ul>
<ul>
    <% for (var i = 0; i < users.length; i++){
    
     %>
            <li>
                <%= users[i].name %>
                <%= users[i].age %>
                <%= users[i].sex %>
            </li>
       <%} 
    %>
</ul>
4.4 Sub-plantilla

Utilice sub-plantillas para extraer secciones públicas (encabezado, final) del sitio web en archivos separados.

- 标准语法:{
    
    {
    
     include '模板' }}
- 原始语法:<% include{
    
    '模板'} %>

Ejemplo de código:

{
    
    {
    
    include './common/header.art'}}
<% include('./common/header.art')%>
<div> {
    
    {
    
     msg }} </div>
{
    
    {
    
    include './common/footer.art'}}
<% include('./common/footer.art')%>
4.5 Herencia de plantillas

Use la herencia de plantillas para extraer el esqueleto del sitio web en un archivo separado, y otras plantillas de página pueden heredar la plantilla que heredará el archivo esqueleto
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    {
   
   {block 'link'}} {
   
   {/block}}
</head>

<body>
    {
   
   {block 'content'}} {
   
   {/block}}
</body>

</html>

Complete la plantilla:

// 继承layout模板
{
   
   {extend './common/layout.art'}}

{
   
   {block 'content'}}
<p>{
   
   { msg }}</p>
{
   
   {/block}}

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

archivo js:

const template = require('art-template');
const path = require('path');

const views = path.join(__dirname, 'views', '05.art');

const html = template(views, {
    
    
    msg: '首页模板'
})
console.log(html);
4.6 Configuración de la plantilla
  1. Importe la plantilla de variable en la plantilla, valores predeterminados.importaciones Nombre de la variable = valor de la variable;
  2. template.defaults.root = path.join (__ dirname, 'vistas');
  3. template.defaults.extname = '. art';
    nombre del sufijo
const template = require('art-template');
const dateFormat = require('dateformat');
const path = require('path');

const views = path.join(__dirname, 'views', '06.art');

// 设置模板根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 默认后缀的配置
template.defaults.extname = '.art';

// 有后缀就找后缀名的文件
const html = template('06.art', {
    
    
    time: new Date(),
    // &#34;2020-08-19T03:22:11.413Z&#34;  用引号引起来的字符串
})

// 可以直接传模板的名字
// 没有后缀就找 template.defaults.extname 设置的文件
console.log(template('07', {
    
    }));
console.log(html);
{
    
    {
    
    dateFormat(time,'yyyy-mm-dd hh:mm:ss')}}

Supongo que te gusta

Origin blog.csdn.net/weixin_45773503/article/details/107964868
Recomendado
Clasificación