express ejs 布局使用不同的布局 - Javascript(1)

📌 相关文章

📜 express ejs 布局使用不同的布局 - Javascript(1)

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

Express EJS布局使用不同的布局

在使用Express框架时，我们通常会使用模板引擎来处理动态页面的渲染。其中，EJS是一个广泛使用的模板引擎，它允许我们使用布局来管理页面的结构。在本篇文章中，我们将介绍如何使用不同的布局来渲染页面，以实现更灵活的页面结构。

EJS布局

EJS布局是一种用于管理页面结构的技术。在EJS中，我们可以通过定义不同的布局来控制页面的外观和结构。在每个布局中，我们可以定义页面的头部和尾部等通用部分，并在不同的页面中重复使用。

布局的使用

安装EJS

在使用EJS之前，我们需要先安装它。在终端中使用如下命令即可：

npm install ejs --save

定义布局

在EJS中，一个布局通常由两部分组成 - 头部和尾部。对于每个页面，我们可以将它们放在布局的适当位置，并将实际的内容插入到头部和尾部之间。

在下面的示例中，我们定义了一个名为"layout.ejs"的布局：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <header>
        <h1>My Site</h1>
    </header>
    <main>
        <%= content %>
    </main>
    <footer>
        My Site &copy; 2021
    </footer>
</body>
</html>

在这个布局中，我们定义了一个包含头部和尾部的基本HTML模板。在头部中，我们使用了EJS语法来动态地添加页面标题（即通过变量“title”传递的值）。在主体中，我们使用了另一种EJS语法来引用“content”变量，该变量将由每个具体页面的内容替换。

定义页面

在我们定义了布局之后，我们就可以开始定义具体的页面了。在下面的示例中，我们定义了一个名为"index.ejs"的页面：

<% layout('layout') %>
<p>Welcome to my site!</p>

在这个页面中，我们通过使用EJS语法来指定要使用的布局（即"layout.ejs"），并将实际的页面内容放在布局头部和尾部之间。

注意，在EJS中使用布局需要安装ejs-locals包。可以通过以下命令进行安装：

npm install ejs-locals --save

修改App.js文件

在定义好布局和页面之后，我们需要在应用程序中指定要使用的视图引擎和视图目录。在下面的示例中，我们将EJS视图引擎设置为默认视图引擎，并将视图目录设置为"./views"：

const express = require("express");
const app = express();

const ejs = require("ejs");
const ejsLayouts = require("ejs-locals");

app.set("views", "./views");
app.set("view engine", "ejs");
app.engine("ejs", ejsLayouts);

在这个示例中，我们首先使用require语句加载了我们需要的模块（即Express、EJS和ejs-locals）。然后，我们使用了app.set方法来指定要使用的视图引擎和视图目录。最后，我们使用了app.engine方法来设置EJS视图引擎和布局。

运行应用程序

在修改好App.js文件之后，我们就可以使用Express来运行我们的应用程序了。通过以下命令启动服务器：

node app.js

现在，我们可以在浏览器中打开"http://localhost:3000"，并查看我们的页面是否成功渲染。

使用不同的布局

在我们了解了如何使用单个布局之后，还可以使用多个布局来处理不同类型的页面。在下面的示例中，我们将定义两个不同的布局，即"layout.ejs"和"bloglayout.ejs"：

<!-- layout.ejs -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <header>
        <h1>My Site</h1>
    </header>
    <main>
        <%= content %>
    </main>
    <footer>
        My Site &copy; 2021
    </footer>
</body>
</html>

<!-- bloglayout.ejs -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <header>
        <h1>My Blog</h1>
    </header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/blog">Blog</a></li>
        </ul>
    </nav>
    <main>
        <%= content %>
    </main>
    <footer>
        My Blog &copy; 2021
    </footer>
</body>
</html>

在这个示例中，我们创建了两个布局，分别用于整个网站和博客部分。在第一个布局中，我们只包含了基本的网站结构，而在第二个布局中，我们添加了一个导航栏来帮助用户导航博客部分。

确定了布局之后，我们可以开始在程序中使用它们。在下面的示例中，我们将使用不同的布局来渲染"index.ejs"和"blog.ejs"页面：

<!-- index.ejs -->
<% layout('layout') %>
<p>Welcome to my site!</p>

<!-- blog.ejs -->
<% layout('bloglayout') %>
<h2>My Blog</h2>
<p>Welcome to my blog!</p>

在这个示例中，我们使用了两个带有不同布局的页面。在第一个页面中，我们使用了"layout.ejs"布局，而在第二个页面中，我们使用了"bloglayout.ejs"布局。这样，我们就可以为不同类型的页面定义不同的结构和样式。

总结

使用EJS布局是一种方便而灵活的技术，可以帮助我们更好地管理页面的结构和样式。在本篇文章中，我们介绍了如何使用不同的布局来渲染页面，并提供了详细的示例和代码。希望本文能帮助你更好地运用EJS和Express框架来构建Web应用程序。