EJS(Embedded JavaScript)是一种模板语言,它允许您在HTML文件中嵌入JavaScript代码,将EJS文件转换为HTML文件的过程通常涉及以下几个步骤:
1、安装Node.js和EJS库:确保您的计算机上已安装Node.js,接下来,通过npm(Node.js包管理器)安装EJS库,在命令行中输入以下命令:
npm install ejs
2、创建EJS模板文件:创建一个具有“.ejs”扩展名的文件,例如template.ejs
,在该文件中,编写HTML和EJS代码。
<!DOCTYPE html> <html> <head> <title>My EJS Template</title> </head> <body> <h1><%= title %></h1> <p><%- description %></p> </body> </html>
3、编写JavaScript代码以渲染EJS模板:在同一个目录中创建一个新的JavaScript文件,如render.js
,在此文件中,导入EJS库并设置模板渲染函数。
const ejs = require('ejs'); function renderTemplate(templatePath, data) { const template = ejs.compile(fs.readFileSync(templatePath, 'utf8')); const html = template(data); return html; } const data = { title: 'My First EJS Page', description: 'This is a simple example of using EJS to render an HTML page.' }; const html = renderTemplate('template.ejs', data); console.log(html);
4、运行JavaScript文件:在命令行中,运行render.js
文件,这将生成一个包含渲染后的HTML内容的控制台输出,您可以将此输出保存到一个HTML文件中,以便在浏览器中查看。
node render.js
5、将渲染后的HTML内容保存到新HTML文件:将控制台输出复制到一个名为output.html
的新文件中,现在,您可以在浏览器中打开此文件查看渲染后的HTML页面。
常见问题与解答:
Q1: EJS文件中的<% %>和<%- %>有什么区别?
A1: <% %>用于在EJS模板中嵌入JavaScript代码,这些代码在渲染时会被执行,而<%- %>与<% %>类似,但它会在输出之前去除多余的空格和换行符,以获得更干净的输出。
Q2: 如何在EJS模板中循环遍历数组?
A2: 在EJS模板中,您可以使用<% items.forEach(function(item) { %>语法来遍历数组。
<% fruits.forEach(function(fruit) { %> <li><%= fruit %></li> <% }) %>
Q3: 如何将EJS模板与Express.js框架结合使用?
A3: 确保已安装Express.js和EJS库,在Express.js应用程序中设置EJS为模板引擎。
const express = require('express'); const app = express(); app.set('view engine', 'ejs'); app.get('/', (req, res) => { res.render('index', { title: 'My EJS App' }); }); app.listen(3000, () => console.log('Server started on port 3000'));
这样,Express.js将使用EJS作为模板引擎,您可以在路由处理程序中使用res.render()
方法来渲染EJS模板。