基于express的布局，express-ejs-layouts使用，＜%- defineContent(‘header‘) %＞、＜%- contentFor(‘header‘) %＞两种语法详解

最新推荐文章于 2024-09-08 18:45:52 发布

大王在路上

最新推荐文章于 2024-09-08 18:45:52 发布

阅读量799

点赞数 1

文章标签： node.js 前端

本文链接：https://blog.csdn.net/weixin_43996999/article/details/115301469

版权

本文详细解析了在Node.js和Express项目中使用`<%-defineContent('header')%>`和`<%-contentFor('header')%>`的布局机制，通过实例展示了如何创建自定义视图并灵活嵌入到页面结构中，适合初学者理解EJS模板布局技术。

摘要由CSDN通过智能技术生成

node+express的项目中，碰到了这个布局
<%- defineContent('header') %>、<%- contentFor('header') %>
这两个语法一开始不太懂，后来慢慢的就理解了，记录一下！下面也会放项目截图用作理解

解释：
<%- defineContent('header') %> 理解：一般都是写在入口layout.ejs文件的，目的是为了渲染自定义视图，相当于是一个占位符，类似与vue中的 <router-view></router-view>组件；
<%- contentFor('header') %> 理解：这个就是一个自定义内容的语法，在这个语法的下面可以写自己的代码！这个是和<%- defineContent('header') %>呼应的，定义的名字要相同

首先想要使用这个布局，需要安装express-ejs-layouts依赖

npm i express-ejs-layouts => 下载包
在 app.js 中引入

实际使用

layout.ejs ----------- 这个是公共页面，包含头部和左侧菜单
<%- defineContent('rightContent') %>原本就是项目中用来渲染视图的，为了方便学习测试，简单改了一下

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <% include ../common/header.ejs %>
    <%- defineContent('header') %>
</head>
<body data-page="<%= page %>" data-pageClass="<%= pageClass %>">
<div class="app-layout app-layout-home">
    <% include ../common/home-head.ejs %>
    <div class="app-side app-side-white">
        <% include ../common/home-left.ejs %>
    </div>
    <div class="app-body">
        <div class="app-right">
            <div class="register-nav" style="height: 300px;background: red">
                <div class="layui-tab" lay-filter="navTab">
                    <h1>这里是test</h1>
                    <%- defineContent('test') %>
                </div>
            </div>
            <div class="layui-content" style="height: 300px;background: green">
                <h1>这里是rightcontent</h1>
                <%- defineContent('rightContent') %>
            </div>
        </div>
    </div>
    <div class="app-footer">
        <% include ../common/footer.ejs %>
    </div>
</div>
<%- defineContent('footerContent') %>
<script type="text/javascript" src="<%=basehost%>javascripts/common/content-<%= pageClass %>.js"></script>
</body>
</html>

home.ejs ----------- 调用页面，使用 contentFor 调用对应的
<%- defineContent('rightContent') %><%- defineContent('test') %>

<%- contentFor('header') %>
<link type="text/css" rel="stylesheet" href="<%= basehost %>stylesheets/aptRegSea.css"/>
<!-- 主要看下面四行调用代码 -->
<%- contentFor('rightContent') %>
<h2>rightContentrightContentrightContentrightContentrightContentrightContentrightContent</h2>
<%- contentFor('test') %>
<h2>testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</h2>

<%- contentFor('footerContent') %>

效果

在这里插入图片描述

到这里就结束了，写这个就是为了搞明白 express-ejs-layouts布局的
<%- defineContent('rightContent') %><%- defineContent('test') %> 这两个是什么关系！

大王在路上

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于express的布局，express-ejs-layouts使用，＜%- defineContent(‘header‘) %＞、＜%- contentFor(‘header‘) %＞两种语法详解

node+express的项目中，碰到了这个布局<%- defineContent('header') %>、<%- contentFor('header') %>这两个语法一开始不太懂，后来慢慢的就理解了，记录一下！下面也会放项目截图用作理解解释：<%- defineContent('header') %> 理解：一般都是写在入口layout.ejs文件的，目的是为了渲染自定义视图，相当于是一个占位符，类似与vue中的 <router-view&g.
复制链接

扫一扫