ejs 教程 - Javascript (1)

📌 相关文章

📜 ejs 教程 - Javascript (1)

📅 最后修改于: 2023-12-03 15:00:35.012000 🧑 作者: Mango

EJS教程：JavaScript

基本概念

EJS（Embedded JavaScript）是一种简洁、快速、强大的 JavaScript 模板引擎，可帮助你将数据和模板组合起来生成 HTML。它具有易于使用、灵活、可扩展、易于学习和非常适合 Web 开发的优点。

安装和使用

安装 EJS：

npm install ejs

使用：

const ejs = require('ejs');
const html = ejs.render(templateString, data);

其中，templateString 是 EJS 模板字符串，data 是一个 JavaScript 对象，里面包含了模板中所需的数据。render 方法返回编译后的 HTML 字符串。

基本语法

1. 插值

在 EJS 中，使用 <% %> 将 JavaScript 代码插入到模板中。

示例：

<h1><%= title %></h1>

上述示例中，<%= title %> 实现了模板中的插值效果，将 title 变量的值渲染到 HTML 中。

2. 流程控制

EJS 中提供了包括 if, for 等流程控制语句，可以简化模板的开发。

示例：

<ul>
  <% for(var i=0; i<users.length; i++) { %>
    <li><%= users[i].name %></li>
  <% } %>
</ul>

上述示例中，通过 for 循环遍历了 users 数组，并插入到了模板中。

3. 布局

在 EJS 中，通过 include 可以将其他模板引入当前模板中，实现布局的复用。布局一般会包含头部、尾部等公共结构。

示例：

布局文件 layout.ejs：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title><%= title %></title>
  </head>
  <body>
    <%- body %>
  </body>
</html>

另一个模板文件 index.ejs：

<% include layout %>
<h1><%= title %></h1>
<p>Welcome to my blog</p>

上述示例中，<%- body %> 是占位符，用于插入当前模板的内容。

扩展

EJS 还支持以下扩展：

1. 标签

EJS 提供了多种自定义标签，帮助你快速判断和渲染模板。

示例：

使用 <%# %> 在模板中注释代码：

<%# This is a comment %>

使用 <% include filename %> 引入其他模板。

使用 <%_ %> 可以去除前置空格。

2. 选项

EJS 提供了多种选项，用于控制编译过程和输出结果。

示例：

设置 compileDebug 为 false 以禁用编译调试：

const ejs = require('ejs');
const html = ejs.render(templateString, data, {compileDebug: false});

设置 delimiter 以更改分隔符：

const ejs = require('ejs');
const html = ejs.render(templateString, data, {delimiter: '?'});

结论

EJS 是一个强大的 JavaScript 模板引擎，可以帮助开发者将数据和模板组合起来生成 HTML。它具有易于使用、灵活、可扩展、易于学习和非常适合 Web 开发的优点。本教程介绍了 EJS 的基本概念、安装和使用方法，以及常用的语法和扩展。希望能对大家有所帮助。