当前位置：网站首页>Express template engine

Express template engine

2022-06-28 15:02:00 【Struggling young man】

And express Some of the popular template engines used together are Pug,Mustache and EJS.Express The application uses... By default Pug, But he also supports several others .

The following settings need to be made in the application to make Express Render template engine ：

view, The file directory where the template is placed , for example ：app.set('views','./views).
view engine, Template engine to use . for example , To use pug template engine ：app.set('view engine', 'pug')

Render template in route

Route the rendering template and render the rendered HTML The string is sent to the client .

res.rander(view [, locals] [, callback])

view: A string ,view Is the file path of the rendered template file .
locals: An object , Its properties define the local variables of the view .

router.get("/", (req, res) => {
    
  // res.send({ list: ['aaa', 'bbb', 'ccc'] })
  res.render("list", {
     title: " Journalism ", list: ["aa", "bb", "cc"] })
})

ejs Use of template engine

install ejs

npm i ejs

stay express To configure ejs template engine

Use ejs template engine

Configure the following code in the entry file , To configure Express Use ejs template engine

// Configure template engine 
app.set("views", path.join(__dirname, "./views")) // Set the save location of the template engine 
app.set('view engine', 'ejs')

Be careful ：
In this case, the specified template directory is views, And the suffix of the template file is .ejs

Set the template suffix to html

stay app.js Add the following code to , To configure Express Use ejs template engine . And specify the template suffix as html.

app.set('views',path.join(__dirname,'views')); // Set the template storage location 
app.set('view engine','html');
app.engine('html',require('ejs').renderFile); // Use ejs Template engine parsing html

Be careful ： In this case, the specified template directory is views, And the suffix of the template file is .html.

ejs Template syntax

<%= %>    Output label 
<%- %>    Output html label （html It will be parsed by the browser ）
<%# %>    Comment tags 
<% %>     Process control label （ Is written if,else,for）
<%- include("header.html",{user:user})%>   Import public template content

<body>
  <%- include("./haeder.html",{isShow:true})%>
     This is a list page 
    <%=title%>
      <ul>
        <% for(var i=0;i<list.length;i++){ %>
          <li>
            <%=list[i]%>
          </li>
          <%} %>
      </ul>
      <h%- <h5> I am exporting html label </h5>%>

        <%# <h3> Comment tags , Does not appear in the page structure </h3>%>
          <%- include("./footer.html")%>
</body>

Snipaste_2022-06-27_16-51-25