当前位置：网站首页>Use of node template engine

Use of node template engine

2022-04-23 20:28:00 【Different 213】

List of articles

template engine

template engine

1. The basic concept of template engine

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 );

The basic example code is as follows ：

//  Import template engine 
const template = require('art-template');
const {
     Agent } = require('http');
const path = require('path');

//  Splicing template path 
const views = path.join(__dirname,'views','index.art')
// template Method is used to splice strings 
// 1. Template path   Using absolute paths 
// 2. Data to be displayed in the template   object type 
//  Returns the concatenated string 

const html = template(views, {
    
    name: ' Zhang San ',
    age:20
})
console.log(html);

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 .

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 %>

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 %>

2.4 conditional

In the template, you can decide which block to display according to the conditions HTML Code .

<!--  Standard syntax for conditional judgment  -->
{
   {if age > 18}}
     Older than 18
{
   {else if age < 15}}
     Age is less than 15
{
   {else}}
     Age does not meet the requirements 
{
   {/if}}

<!--  The original grammar makes conditional judgment  -->
<% if (age > 18) { %>
     Older than 18
<% } else if (age < 15) { %>
     Age is less than 15
<% } else { %>
     Age does not meet the requirements     
<% } %>

2.5 loop

Standard grammar ：{ {each data }} { {/each}}

Original grammar ：<% for() { %> <% } %>

<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>

2.6 Sub template

Use the subtitle version to make the website public （ Head 、 Bottom ） Pull out into a separate file .

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

{
   {include './common/header.art'}}
<div> {
   { msg }} </div>
{
   {include './common/footer.art'}}

<%include('./common/header.art') %>
<div> {
   { msg }} </div>
<%include('./common/footer.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 .

The sample code is as follows ：

This part is HTML Skeleton formwork part ：

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

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

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

</html>

This part is the pit filling part ：

{
   {extend './common/layout.art'}}
{
   {block 'content'}}
<p>{
   { msg }}</p>
{
   {/block}}

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

2.8 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 ;
Configure the default suffix of the template template.defaults.extname = Suffix name

The sample code is as follows ：

//  Import template engine 
const template = require('art-template');
const path = require('path');
const dateformat = require('dateformat')

//  Set the root directory of the template 
template.defaults.root = path.join(__dirname, 'views');

//  Import template variables 
template.defaults.imports.dateformat = dateformat;

//  Configure the default suffix of the template 
template.defaults.extname = '.html';

//  After setting the root directory of the template , Just fill in the file name to be rendered here ： for example 06
const html = template('06.art', {
    
    time : new Date()
});
//  Rendering 07.html file , write in 07 The automatic query file name is 07.html The file of 
console.log(template('07', {
    }))
console.log(html);