ejs中的布局`yield`方法是什么

编程代码 JS

1个回答

写回答

2277361391

2025-06-13 07:15

+ 关注

eJS中的布局yield方法是什么？

在eJS中，布局是一种常用的技术，用于创建具有相同结构但内容不同的页面。布局可以包括头部、底部、导航栏等公共部分，这样可以使页面的开发更加高效和易于维护。而yield方法则是布局中的一个重要概念，用于插入不同页面的内容。

yield方法的作用是在布局中定义一个占位符，用于接收不同页面的内容。通过在不同页面中使用yield方法，可以将页面的内容插入到布局中的指定位置。

下面我们来看一个使用eJS布局和yield方法的简单示例。

首先，我们需要创建一个布局文件，命名为layout.eJS：

html
<!DOCTYPE html>
<html>
<head>
    <title>布局示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
    </header>
    
    <nav>
        <ul>
            <li>首页</li>
            <li>关于我们</li>
            <li>联系我们</li>
        </ul>
    </nav>
    
    <mAIn>
        <!-- 这里使用yield方法插入不同页面的内容 -->
        <%= yield %>
    </mAIn>
    
    <footer>
        版权所有 © 2022
    </footer>
</body>
</html>

在布局文件中，我们定义了一个<%= yield %>的占位符，用于接收不同页面的内容。

接下来，我们创建一个页面文件，命名为index.eJS，并使用布局文件：

html
<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
</head>
<body>
    <!-- 使用布局文件 -->
    <% include layout.eJS %>
    
    <!-- 在这里定义页面的内容 -->
    <% yield %>
    
    <div>
        <h2>欢迎访问首页</h2>
        
<img src="https://img.izhida.com/topic/0a40e3c91a3a55c9a37428c6d194d0e5.jpg" alt="AI"><br>AI
这是首页的内容。
    </div>
</body>
</html>

在页面文件中，我们首先使用<% include layout.eJS %>语句引入布局文件，然后使用<% yield %>插入页面的内容。

通过以上代码，我们可以实现一个简单的布局和页面内容的插入。当用户访问首页时，布局文件中的导航栏、页眉、页脚等公共部分会被加载，而页面文件中定义的内容会插入到布局文件的占位符中。

示例代码：

Javascript
// index.JS
const express = require('express');
const app = express();
app.set('view engine', 'eJS');
app.get('/', (req, res) => {
    res.render('index');
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在上述示例中，我们使用Express框架创建了一个简单的服务器，设置了eJS作为模板引擎，并定义了一个路由，当用户访问根路径时，将渲染index.eJS页面。

通过以上代码，我们可以体验到eJS布局和yield方法的便利之处，可以轻松创建具有相同结构但内容不同的页面，提高开发效率和代码的可维护性。

举报有用（4）分享收藏

ejs中的布局`yield`方法是什么

1个回答

2277361391

热门话题

相关问题